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('歡迎進入註冊頁面')
}
}
}
});