Vue渲染、基础语法、指令

一、模板语法

（1）插值

1. 文本{{ }}

插值表达式作用：将data对象中数据渲染到页面
支持二元运算{{10+20}}
支持三元运算{{10>20?'aaaa':'bbbb'}}
支持变量{{myname}}
支持访问数组元素{{datalist}} {{datalist[0]}}
支持创建对象{{obj}} {{obj.age}}
不支持分支和循环语句

v-once:通过使用v-once指令，执行一次性插值
（当数据改变时，插值的内容不会继续更新）

2. 纯html
   

动态渲染的html容易导致XSS，csrf攻击，可以对可信的内容使用html插值，不能对用户提供的内容使用插值
防止xss,csrf攻击：a.前端过滤；b.后台转义（<> &lt &gt）;c.给cookie加上属性http

二、指令

（1）v-bind

v-bind:属性名=“属性值”
:属性名=“属性值” ------简写
使用v-bind指令,为元素的属性节点动态绑定值


使用v-bind属性绑定期间，如果绑定内容需要进行动态拼接，字符串外面应该包裹单引号。

（2）v-on

v-on:事件 =“方法”
@事件=“方法”-------简写

（3）v-if

v-if指令：如果isCreated是false时，节点删除

（4）v-show

v-show指令：如果isShow是false时，元素隐藏

（5）v-for

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

（6）v-model

v-model指令：双向绑定，使用场景为表单，用于便捷地设置和获取表单元素（input,textarea）的值

三、vue渲染

（1）条件渲染

• v-if 动态创建和删除，满足条件创建，不满足条件删除
• v-else v-else-if
• template 包装元素template不会被创建
• v-show

（2）列表渲染

1. v-for

in
of

in和of的区别
in在数组中打印索引号，of在数组中打印数组内容
in在对象中打印变量，of在对象中不支持

2. key

跟踪每个节点的身份，从而重用和重新排序现有元素;
理想的key值是每项都有的且唯一的id（data.id）
key值得使用可以提高效率，根据key值判断一个值是否修改，如果修改则重新渲染该项，否则复用之前的元素。

四、附加

（1）数组增加删除

增加：vm.datalist.push("444")
删除：vm.datalist.splice(1,1)
替换：vm.datalist.splice(1,1,"0")
清空：vm.datalist=[]

（2）class与style

1. 绑定html和class

对象写法：Vue.set(vm.classobject，“d”,true)
数组写法：vm.classarr.push(“d”) vm.classarr.splice(1,1)

2. 绑定内联样式

对象写法：Vue.set(vm.styleobj,“fontSize”,30px)
数组写法：vm.stylearr.push({fontSize:“30px”})

（3）数组更新

1. 使用以下方法操作数组可以检测变动（原数组被改变，get set拦截）

push()：向数组末尾添加一个或多个元素，并返回新的长度
pop()：用于删除并返回数组最后一个元素
shift()：用于把数组的第一个元素删除，并返回第一个元素的值
unshift()：可向数组的开头添加一个或多个元素，并返回新的长度
splice()：向（从）数组中添加（删除）项目，返回被删除的项目
sort()：用于对数组的元素进行排序
reverse()：用于颠倒数组中元素的顺序
VUE之数组更新检测

2. 新数组替换旧数组

filter():创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
concat()：用于连接两个或多个数组
slice()：可从已有的数组中返回选定的元素
filter
concat\slice

3. 不能检测以下变动的数组

1.通过索引直接设置项：vm.items[index]=hahaha
解决方法：
Vue.set(item,index,newValue)
splice
2.修改数组长度：vm.items.length=1
解决方法：
vm.items.splice(1)