前言
记录vue的学习笔记，有什么不对的地方，欢迎各位大佬进行指正，共同学习进步
Vue的语法分为两种：
（1）插值语法：双大括号表达式 （“Mustache”语法）【一个】
（2）指令语法：指令（以v-开头的自定义标签属性）【很多】
插值语法
- 功能：用于解析标签体内容，向页面输出数据
- 写法：
{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性，可以调用对象的方法 - 备注：里面写js表达式：有返回值的js代码，而不是js语句
指令语法
- 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
- 举例：
v-bind:href="xxx"或 简写为:href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性 - 备注：Vue中有很多的指令，且形式都是：v-??
今天我们先学习插值语法
1.Mustache语法
用法：通常用 {{}}
功能：用于将data中的文本数据插入到页面中
2.v-text指令
用法： <h2 v-text="message"></h2>
功能：用途和{{}}一致，但没有{{}}灵活
代码示例：
<div id="app"> <h2> {{message}} </h2> <h2 v-text="message"></h2> </div> <script> new Vue({ el: '#app', data: { message:'你好啊', }, methods: {} }); </script>
3.v-html指令
用法：<h2 v-html="url">{{url}}</h2>
功能：将内容按照HTML格式进行解析并显示对应内容
代码实例：
<div id="app"> {{message}} <h2 v-html="url">{{url}}</h2> </div> <script> new Vue({ el: '#app', data: { message:'你好啊11', url:'<a href="https://www.baidu.com">百度一下</a>' }, methods: {} }); </script>
4.v-once指令
用法： <h2 v-once>{{message}}</h2>
功能 表示元素和组件只渲染一次，不会随着数据的改变而改变
代码示例：
<div id="app"> <h2>{{message}}</h2> <h2 v-once>{{message}}</h2> </div> <script> const app = new Vue({ el: '#app', data: { message:'你好啊11' }, methods: {} }); </script>
5.v-pre指令
用法： <h2 v-pre>{{message}}</h2>
功能：用于跳过元素的编译过程，显示原本的Mustache语法
代码示例：
<div id="app"> <h2> {{message}} </h2> <h2 v-pre>{{message}} </h2> </div> <script> new Vue({ el: '#app', data: { message:'你好哦' }, methods: {} }); </script>
6.v-cloak指令
用法：<div id="app" v-cloak>
功能：在vue解析之前，div中有一个属性v-cloak
在vue解析之后，div中没有一个属性v-cloak
代码示例：
<div id="app" v-cloak> <h2> {{message}} </h2> <h2></h2> </div> <script> new Vue({ el: '#app', data: { message:'111' }, methods: {} }); </script>
总结：
常用的：
v-text，v-html 和{{}}
{{}}和v-text为一组，均能将数据解析后插入到页面中，但{{}}更常用，因为其更灵活v-text和v-html为一组，二者用法一致，均用于向页面展示数据，后者会将内容按照html格式进行解析后再展示，会带来xss攻击问题（需要解决方案）
不常用的：
v-once、v-pre和v-cloak一般很少使用这三个除非特定场合比如：
v-pre和v-cloak为一组，v-pre用于展示原本的Mustache语法，v-cloak配合特定css样式可起到相反的效果v-once用于一次性展示，比如需要同时展示变化前后数据的场景
