1.v-text
相当于js的innerText
1. <div v-text="'姓名：'+name"></div> 2. 3. const name = ref('张三'); //声明
2.v-html
相当于js的innerHTML
1. <div v-html="html"></div> 2. 3. const html = ref('<s>这是一段文字</s>')
3.v-bind
动态绑定属性,简写是冒号( : )
1. <img v-bind:src="url"> 2. <!-- v-bind简写(:) --> 3. <img :src="url"> 4. 5. const url = ref('图片地址')
4.v-on
绑定事件,简写是@
<button v-on:click="changeName">点击更新姓名</button> <!-- v-on简写(@) --> <button @click="changeName">点击更新姓名</button> let changeName = () => { name.value = '李四' }
事件传参（括号在传参是是必须加，不传参可加可不加；但以下场景必须加：获取event、子组件事件传参等）
<button @click="changeName('李四')">点击更新姓名</button> let changeName = (newName) => { name.value = newName }
事件修饰符
5.v-model
可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定
1. <input type="text" v-model="name"> 2. 3. const name = ref('张三');
6.v-if v-else-if v-else
v-if:条件性地渲染一块内容，这块内容只会在指令的表达式返回 truthy[1] 值的时候被渲染。
v-else、v-else-if:是跟js中的if一样,v-if的else块和else-if块
[1]truthy（真值）指的是在布尔值上下文中，转换后的值为真的值。所有值都是真值，除非它们被定义为 假值（即除 false、0、""、null、undefined 和 NaN 以外皆为真值）
7.v-show
根据条件展示元素, 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。
8.v-for
渲染数组列表, v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名
v-for 还支持一个可选的第二个参数，即当前项的索引。
通过Key管理状态
默认模式是高效的，但只适用于列表渲染输出的结果不依赖子组件状态或者临时 DOM 状态 (例如表单输入值) 的情况。
<ul> <li v-for="(item,index) in list">{{index}}-{{item}}</li> </ul> const list = ref([1, 2, 3, 4])
9.v-pre
元素内具有 v-pre，所有 Vue 模板语法都会被保留并按原样渲染。最常见的用例就是显示原始双大括号标签及内容。
10.v-cloak
当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题
1. <style> 2. [v-cloak]{ 3. display:none; 4. } 5. </style> 6. 7. <div v-cloak> 8. {{ message }} 9. </div>
11.v-once
只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。
