vue生命周期

1. beforeCreat
2. created
3. beforeMount
4. mounted
5. beforeDestroy
6. destroyed
7. beforeUpdate
8. updated

模板語法

• v-html
• v-text

計算屬性 方法 偵聽器

var vm = new Vue({
    el: "#app",
    data: {
        firstName: 'zhao',
        lastName: 'gary',
        fullName:'gary zhao',
        age: 28
    },
    watch:{
        firstName: function () {'' +
             console.log('計算了一次')
            this.fullName = this.firstName +' '+ this.lastName
        },
        lastName: function () {
            console.log('計算了一次')
            this.fullName = this.firstName +' '+ this.lastName
        }
    },
    methods:{
         // 計算屬性
         fullName:function () {
             console.log('計算了一次')
             return this.firstName +" "+this.lastName
         }
    },
    // 、、計算屬性 有緩存
    computed: {
        fullName: function () {
            console.log('計算了一次')
            return this.firstName + " " + this.lastName
        }
    }
})

computed get set 屬性

computed: {
    fullName: {
        get:function(){
            return this.firstName + this.lastName
        },
        set:function (value) {
            var arr = value.split(" ")
            console.log(arr)

        }
    }
}

vue 綁定樣式

：class = "{}" 對象
：class = "[]"  數(shù)組 變量 可以有多個變量
：style 對象
：style ="[{},{}]" 數(shù)組

條件渲染

v-show  display:none
v-if  不渲染

v-if
v-else-if
v-else

條件渲染時，當條件不同時VUE會嘗試復用相同的DOM，若希望不被復用，就需要對每個情況的DOM元素取個key名
input 加key值 可以清除input緩存

列表渲染

1. 數(shù)組直接改變不起作用，需要用下面的方法

pop
push
shift
unshift
splice
sort
reverse

2. 通過改變數(shù)據(jù)的引用地址，來改變數(shù)據(jù)

占位符

<template></template>

對象循環(huán)

動態(tài)加屬性不行，通過下面方法來改屬性

Vue.set()
vm.$set()

事件綁定

@click.prevent 阻止默認行為
@click.self  self 要求 click事件只有在e.tartget = e.currentTaget
@click.once  只執(zhí)行一次
@click.capture   事件捕獲，遵循從外部到內(nèi)部（事件冒泡是從內(nèi)部到外部
@keydowm.ctrl   鍵盤修飾符
@click.right/left/middle  鼠標修飾符

表單綁定

v-model
v-model.lazy   輸入框失去焦點時加載，提高性能 
v-model.number  輸入框中的數(shù)字轉(zhuǎn)化成數(shù)字類型
v-model.trim  去除輸入框內(nèi)容的首尾空格