点击上方 蓝字 关注我们

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 = "[]"  数组 变量 可以有多个变量
：style 对象
：style ="[{},{}]" 数组

条件渲染

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

v-if
v-else-if
v-else

条件渲染时，当条件不同时VUE会尝试复用相同的DOM，若希望不被复用，就需要对每个情况的DOM元素取个key名「input 加key值 可以清除input缓存」

列表渲染

1. 数组直接改变不起作用，需要用下面的方法

pop
push
shift
unshift
splice
sort
reverse

2. 通过改变数据的引用地址，来改变数据

占位符

对象循环

动态加属性不行，通过下面方法来改属性

Vue.set()
vm.$set()

事件绑定

@click.prevent 阻止默认行为
@click.self  self 要求 click事件只有在e.tartget = e.currentTaget
@click.once  只执行一次
@click.capture   事件捕获，遵循从外部到内部(事件冒泡是从内部到外部
@keydowm.ctrl   键盘修饰符
@click.right/left/middle  鼠标修饰符

表单绑定

v-model
v-model.lazy   输入框失去焦点时加载，提高性能 
v-model.number  输入框中的数字转化成数字类型
v-model.trim  去除输入框内容的首尾空格

点个在看你最好看