Vue的使用場(chǎng)景

這篇文章給大家分享的是有關(guān)Vue的使用場(chǎng)景的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

1.Vue的使用場(chǎng)景 ：

* 在html中通過script引入
* 在webpack中，由于配置有處理各種文件的loader，所以可以用import引入

2.Vue指令

v-cloak
v-bind  ==> :
v-on ==> @
v-text
v-html
v-modal
:class : 簡(jiǎn)單值，數(shù)組，對(duì)象，數(shù)組中對(duì)象
:style ： 數(shù)組， 對(duì)象
v-for
v-if
v-show

• 自定義全局指令

Vue.derictive(自定義指令名字, 指令生效周期配置對(duì)象{
    bind : (被綁定的那個(gè)元素的js原生對(duì)象el) => {},   ==> 一旦綁上馬上調(diào)用
    inserted : (el同上) => {},  ==> 元素插入到DOM之后再調(diào)用
    updated : (el同上, binding) => {}
}

• 自定義局部指令

var vm2 = new Vue({
  el: '#app2',
  data: {},
  methods: {},
  directives: { 
    'fontweight': {
      bind: function (el, binding) {
        el.style.fontWeight = binding.value
      }
    },
  }
})

3.Vue事件修飾符

.stop
.prevent
.capture
.self
.once
.self和.stop在阻止冒泡行為上的區(qū)別

4.Vue過濾器
全局過濾器的參數(shù)傳遞規(guī)則一樣；
如果全局過濾器和局部過濾器的名字相同，在組件內(nèi)部使用過濾器時(shí)，優(yōu)先使用自己的內(nèi)部過濾器

• 全局過濾器

Vue.filter('自定義過濾器名字' , function(第一參數(shù)來自于管道符 | 前的數(shù)據(jù) ， 后面的參數(shù)是該過濾器被調(diào)用時(shí)候傳遞過來的參數(shù)){}

• 局部過濾器

定義在Vue實(shí)例中的filter屬性中

var vm2 = new Vue({
  el: '#app2',
  data: {},
  methods: {},
  filters: { 
    dateFormat: function (dateStr, pattern = '') {}
    }
  },
})

5.Vue按鍵修飾符
按鍵修飾符像.self這樣的事件修飾符一樣，是用在v-on事件后面的。

.enter
.tab
.up
.down
.left
.right
.delete
.esc
.space

• 自定義全局按鍵修飾符

Vue.config.keyCodes.自定義按鍵修飾符名字 = 按鍵的碼值

6.Vue組件生命周期

beforeCreated(){} ==> data和methods中數(shù)據(jù)還沒初始化好
created(){} ==> data和methods中的數(shù)據(jù)已經(jīng)初始化好
beforeMount(){} ==> 模板已經(jīng)在內(nèi)存中編譯好了，但是沒有被渲染到頁面上
mounted(){} ==> 內(nèi)存中的模板已經(jīng)渲染到了頁面行，用戶可以看到頁面了
beforeUpdate (){} ==> data中的數(shù)據(jù)已經(jīng)更新，但是界面上的數(shù)據(jù)沒有更新
updated (){} ==> 界面上數(shù)據(jù)更新結(jié)束
beforeDestory (){} ==> 此時(shí)data和methods中數(shù)據(jù)還可以使用
destoryed (){} ==> data和methods中數(shù)據(jù)都不能使用了，Vnode被完全銷毀

7.Vue-resource
類似于axios，但是依賴于Vue.js. 引入后自動(dòng)給Vue實(shí)例添加上了$http屬性

$http.get()
$http.post()
$http.jsonp()

均返回一個(gè)promise
this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
  console.log(result.body)
})

8.Vue動(dòng)畫

• 類名

v-enter
v-enter-active
v-enter-to
v-leave
v-leave-active
v-leave-to

• 使用第三方類名

<transition
name='my'
enter-active-class="bounceIn"
leave-active-class="bounceOut"
:duration="{ enter: 200, leave: 400 }">
  <h4 v-if="flag" class="animated">這是一個(gè)H3</h4>
</transition>

• 動(dòng)畫的鉤子函數(shù)

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter">
  <p class="ball" v-show="flag"></p>
</transition>

beforeEnter (要執(zhí)行動(dòng)畫的那個(gè)對(duì)象的原生DOM對(duì)象el) {} ==> 動(dòng)畫入場(chǎng)之前，設(shè)置動(dòng)畫的起始樣式
enter (el , done) {done()} ==> 動(dòng)畫開始后樣式，設(shè)置動(dòng)畫結(jié)束樣式
afterEnter () {} ==> 動(dòng)畫完全結(jié)束回調(diào)

9.Vue創(chuàng)建組件

• （1）組件模板對(duì)象創(chuàng)建

方式1：
Vue.extend({
    template : ''
})

方式2：
直接一個(gè) Object

• （2）注冊(cè)全局組件

Vue.component(自定義組件名字, 組件模板)

• （3）組件data和Vue實(shí)例data區(qū)別

組件data必須return object

10.組件切換和動(dòng)畫

• 組件切換

<component :is="comName"></component>
comName是變量

• 組件切換時(shí)的動(dòng)畫

<!-- 通過 mode 屬性,設(shè)置組件切換時(shí)候的 模式 -->
<transition mode="out-in">
  <component :is="comName"></component>
</transition>

11.組件父子間傳值

• 父組件傳值給子組件

傳單純值：
<com1 v-bind:parentmsg="msg"></com1>

傳函數(shù)
<com2 @func="show"></com2>
this.$emit('func', this.sonmsg)

• 子組件給父組件傳值

通過父組件傳入函數(shù)的參數(shù)

• $refs

12.Vue路由

• 和Vue-resource一樣，需要引進(jìn)一個(gè)vue-router.js文件

let routeObj = new VueRouter({  
    routes : [
        {path : '' , redrect : '' , component : null}
    ]
})

var vm = new Vue({
  el: '#app',
  router: routerObj
});

• 路由參數(shù)

<router-link to="/login?id=10&name=zs">login</router-link>
routes: [
  { path: '/login/:id/:name', component: login , children : [{path , redrect , component , children}] },
]
$route.params.id

• 一個(gè)路由對(duì)應(yīng)多個(gè)組件

<router-view></router-view>
<p class="container">
  <router-view name="left"></router-view>
  <router-view name="main"></router-view>
</p>

var router = new VueRouter({
  routes: [
    {
      path: '/', components: {
        'default': header,
        'left': leftBox,
        'main': mainBox
      }
    }
  ]
})

13.watch監(jiān)視data中數(shù)據(jù)變化或者路由變化

var vm = new Vue({
  el: '#app',
  data: {firstname: '',},
  watch: { // 使用這個(gè) 屬性，可以監(jiān)視 data 中指定數(shù)據(jù)的變化，然后觸發(fā)這個(gè) watch 中對(duì)應(yīng)的 function 處理函數(shù)
    'firstname': function (newVal, oldVal) {
      this.fullname = newVal + '-' + this.lastname
    },
    '$route.path': function (newVal, oldVal) {   ==> 只需要這是一個(gè)變量
      if (newVal === '/login') {
        console.log('歡迎進(jìn)入登錄頁面')
      } else if (newVal === '/register') {
        console.log('歡迎進(jìn)入注冊(cè)頁面')
      }
    }
  }
});

感謝各位的閱讀！關(guān)于Vue的使用場(chǎng)景就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！