vue笔记

vue是什么？
vue是一套用于构建用户界面的渐进式前端js框架。

vue能做什么？
1.可以用来管理数据，简化操作
2.摒弃掉DOM操作

创建一个vue实例

注意：
1.实例data里面的数据类型可以是任意类型
2.undefined / null 在{{}}里面是没有办法渲染出来的
3.{{}} 里面的代表只能写表达式！流程控制语句等不能写

(1) v-for

​ 这是一个指令，只要有v-的就是指令（directive 操作dom ）

​ 在vue中可以通过v-for来循环数据的通知循环dom，语法是item in/of items，接收第二个参数是索引 (item,index) of items,

还可以遍历对象，第一个参数是value，第二个是key，第三个依然是索引

如果要进行多标签的循环，(不想额外形成新的标签 )外面套上template

(2) key

*跟踪每个节点的身份，从而重用和重新排序现有元素

*理想的 key 值是每项都有的且唯一的 id。data.id

在v-for中提供key，一方面可以提高性能，一方面也会避免出错

Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

        push()          数组的添加元素           返回数组的长度
        pop()           从后面删除一个元素       返回删除的元素
        shift()         从前面删除一个元素       返回删除的元素
        unshift()       从数组的前面追加元素     返回数组的长度
        splice()        数组的剪贴、删除、插入
        sort()          数组的排序
        reverse()       数组的反转

由于 JavaScript 的限制，Vue 不能检测以下数组的变动

        1.当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
            1-1.Vue.set(vm.items, indexOfItem, newValue)
                Vue.set(vm.arr, 2, 30) //如果在实例中可以通过 this.$set(vm.arr, 2, 30)
            1-2 vm.items.splice(indexOfItem, 1, newValue)

        2.当你修改数组的长度时，例如：
            vm.items.length = newLength
            vm.items.splice(newLength)

事件处理
//v-on可以用来绑定点击事件
//v-on:click ====> @click(简写)
//修饰符是由点开头的指令后缀来表示的
//.stop 可以阻止事件的冒泡
//.prevent 可以取消事件的默认行为
//.once 只会触发一次
//.self 只会自身触发

表单控件绑定/双向数据绑定
1.基本用法
v-model：获取输入框的value值
2.修饰符
.lazy：失去焦点同步一次
.number：格式化数字
.trim：去除收尾空格

计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护
所以，对于任何复杂逻辑，你都应当使用计算属性。
在 computed 属性对象中定义计算属性的方法，在页面中使用 {{ 方法名 }} 来显示计算的结果。
计算属性的用法：
var vm = new Vue({
el:’#app’,
data:{
message:‘你好’
},
// 计算属性
computed:{
ReverseMessage: function() {
// this 指向 vm 实例
return this.message.split(’’).reverse().join(’,’);
}
}
})