Vue模板语法

1 文本

2 纯HTML

v-html vue提供的一个指令，相当于原生js中的 innerHTML 的功能,相当于jQuery中的().html() v-text vue提供的一个指令，相当于原生js中的 innerText 的功能,相当于 jQuery 中的().text() ,一般会用 文本 形式代替 {{ msg }},
作用： 防止XSS,CSRF
作业： XSS, CSRF
用途：传递的代码中如果有HTML标签，并且需要解析的时候，比如说 详情页面 的 详情部分 ，一搬后台会返回带有图文的一些HTML代码

3 表达式

赞成使用三元（目）运算符，不赞成写其余的业务逻辑
虽然赞成你使用三元运算符，但不是必须，以此案例为例，可以使用vue的 过滤器（filter） 实现

4 指令

vue中含有v-前缀的特殊属性 ---- 指令
input中使用v-model ，就会把它的值当做是输入框的value值
标签上v-html，就会把它的值插入到该标签内部 v-text
v-if 条件判断 v-else-if v-else
v-show 条件判断
v-for 遍历循环使用
v-on 绑定事件
v-bind 绑定属性
不常用的

v-slot
v-pre
v-cloak
v-once

5 缩写

6 绑定属性

绑定属性必然跟标签相关
适合场景
img 的 src 属性(从服务器获取了地址)
组件间的传值

7 class 绑定

如果数据来源是后端提供的 class 的名字，前端不能操控，就需要使用class语法

8 条件判断

v-if v-else-if v-elsev-show
v-if 渲染还是不渲染 ---- 运行时消耗更大
v-show 显示还是隐藏 ----- 初始渲染消耗更大
审查元素查看效果

9 循环遍历

v-for = “item of/in list” :key="唯一性的值"v-for = “(item, index) of/in list” :key=“index”
可以遍历数组，可以遍历对象，还可以遍历字符串，一定要记得加 key 值（钥匙与锁的故事 – 详细介绍 — 虚拟DOM算法）

10 事件处理

v-on:click @click v-on:change @changev-on:click="fn()"v-on:click="fn($event)"v-on:click="fn(‘params’)v-on:click=“fn(msg)” msg为变量

一般不要轻易使用事件对象 $event
那么如果需要阻止冒泡以及默认事件呢，vue提供了修饰符

1事件修饰符
阻止冒泡 v-on:click.stop=“fn()”
阻止默认事件 v-on:click.prevent=“fn”
阻止冒泡阻止默认事件 v-on:click.stop.prevent=“fn”
.capture 添加事件监听器时使用事件捕获模式 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数 即事件不是从内部元素触发的
.once 点击事件将只会触发一次
.passive 不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。

2 按键修饰符
以前如果有一个表单输入框，当你输入之后敲回车想要打印值
<input
if (event.keyCode === 13) {name.value}
vue
<input @change.enter=“fn()” />
.tab
.delete
.esc
.space
.up
.down
.left
.right

3 系统修饰符
.ctrl
.alt
.shift
.meta

11 表单输入绑定

v-model

唯一特殊的就是 checkbox
如果初始值为 数组，则表示多选框
如果初始值为 boolean，则表示真假 — 购物车中的选择

表单修饰符
v-model.lazy 失去焦点或者按回车键时才会运算
v-model.trim 得到的值去除两端空格
v-model.number 唤起数字键盘