Vue常用指令和实例方法（一）

vue实例方法

vue中挂载在数组和对象中的数据不是响应式的

例如：

let vm = new VUE({
    data:{
        obj:{name:1},
        arr:[1,2,3]
    }
})
vm.arr[1]=2
vm.arr.length =2
vm.obj.age = 123

这时页面里的{{arr}} {{obj}}在刷新页面时无法更改

这是因为js自身的限制

如果我们需要去修改数据时应该怎么办

let vm = new VUE({
    data:{
        obj:{name:1},
        arr:[1,2,3]
    }
})
//对于对象我们可以用vm.$set{}或者Object.assign
vm.$set{obj,"age",16}
vm.obj =Object.assign({},vm.obj{
                      	age:27
                      }) 

//对于数组对象我们可以通过vm.$set{}或者数组的变异方法去改变
//变异方法包括
push()	pop()	shift()
unshift()	splice()	sort()	reverse()
//或者用新数组去替换旧数组就可以达到目的

下面介绍一些vue实例的方法

vm.$set  //更改对象或者数组
vm.$el	//获取挂载的dom元素
vm.$data//获取响应式数组
vm.$options//所有的选项
vm.$watch //监视所有数据的变化 异步方法
vm.$delete //删除数组或者对象
vm.$nextTick //这是一个异步的方法，用来获取真实的DOM元素，这个函数一旦触发，代表DOM元素已经渲染完成
vm.$mount //设置vue实例挂载的DOM元素

指令

v-text 渲染成文本

v-html 渲染成html标签

v-once 只渲染一次，再更改时直接从缓存中获取

v-for 遍历数组、字符串、对象

v-show 更改样式，让样式显示和隐藏，不支持templete

v-if v-else v-lese-if 操作DOM元素，DOM是否显示和隐藏，是DOM操作，消耗性能

永远不要把v-if和v-for同时使用，因为v-for优先级更高

v-on 绑定事件@

v-bind 绑定属性 简写：

v-model 双向绑定，一般用于input标签，其他标签正常不会修改

v-for中key的作用—增加唯一性，避免重复使用