理清楚Vue的結構

Vue · 發表 2019-02-20 10:36:18

摘要： 1.Vue的使用場景： * 在html中通過script引入 * 在webpack中，由於配置有處理各種檔案的loader，所以可以用import引入 2.Vue指令 v-cloak v-bind==> : v-on ==> @ v-text v-html v-m...

1.Vue的使用場景：

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

2.Vue指令

v-cloak
v-bind==> :
v-on ==> @
v-text
v-html
v-modal
:class : 簡單值，陣列，物件，陣列中物件
:style ： 陣列， 物件
v-for
v-if
v-show

自定義全域性指令

Vue.derictive(自定義指令名字, 指令生效週期配置物件{
bind : (被繫結的那個元素的js原生物件el) => {},==> 一旦綁上馬上呼叫
inserted : (el同上) => {},==> 元素插入到DOM之後再呼叫
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在阻止冒泡行為上的區別

4.Vue過濾器

全域性過濾器的引數傳遞規則一樣；

如果全域性過濾器和區域性過濾器的名字相同，在元件內部使用過濾器時，優先使用自己的內部過濾器

全域性過濾器

Vue.filter('自定義過濾器名字' , function(第一引數來自於管道符 | 前的資料 ， 後面的引數是該過濾器被呼叫時候傳遞過來的引數){}

區域性過濾器

定義在Vue例項中的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中資料還沒初始化好
created(){} ==> data和methods中的資料已經初始化好
beforeMount(){} ==> 模板已經在記憶體中編譯好了，但是沒有被渲染到頁面上
mounted(){} ==> 記憶體中的模板已經渲染到了頁面行，使用者可以看到頁面了
beforeUpdate (){} ==> data中的資料已經更新，但是介面上的資料沒有更新
updated (){} ==> 介面上資料更新結束
beforeDestory (){} ==> 此時data和methods中資料還可以使用
destoryed (){} ==> data和methods中資料都不能使用了，Vnode被完全銷燬

7.Vue-resource

類似於axios，但是依賴於Vue.js. 引入後自動給Vue例項新增上了$http屬性

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

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

8.Vue動畫

類名

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 }">
<h3 v-if="flag" class="animated">這是一個H3</h3>
</transition>

動畫的鉤子函式

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

beforeEnter (要執行動畫的那個物件的原生DOM物件el) {} ==> 動畫入場之前，設定動畫的起始樣式
enter (el , done) {done()} ==> 動畫開始後樣式，設定動畫結束樣式
afterEnter () {} ==> 動畫完全結束回撥

9.Vue建立元件

（1）元件模板物件建立

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

方式2：
直接一個 Object

（2）註冊全域性元件

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

（3）元件data和Vue例項data區別

元件data必須return object

10.元件切換和動畫

元件切換

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

元件切換時的動畫

<!-- 通過 mode 屬性,設定元件切換時候的 模式 -->
<transition mode="out-in">
<component :is="comName"></component>
</transition>

11.元件父子間傳值

父元件傳值給子元件

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

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

子元件給父元件傳值

通過父元件傳入函式的引數

$refs

12.Vue路由

和Vue-resource一樣，需要引進一個vue-router.js檔案

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

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

路由引數

<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

一個路由對應多個元件

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

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

13.watch監視data中資料變化或者路由變化

var vm = new Vue({
el: '#app',
data: {firstname: '',},
watch: { // 使用這個 屬性，可以監視 data 中指定資料的變化，然後觸發這個 watch 中對應的 function 處理函式
'firstname': function (newVal, oldVal) {
this.fullname = newVal + '-' + this.lastname
},
'$route.path': function (newVal, oldVal) {==> 只需要這是一個變數
if (newVal === '/login') {
console.log('歡迎進入登入頁面')
} else if (newVal === '/register') {
console.log('歡迎進入註冊頁面')
}
}
}
});

理清楚Vue的結構

您可能也會喜歡…