02 Vue基础语法之插值语法

个人名片：
作者简介：一名大一在校生，web前端开发专业
个人主页：python学不会123
座右铭：懒惰受到的惩罚不仅仅是自己的失败，还有别人的成功。
**学习目标: 坚持每一次的学习打卡，

前言

记录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指令

用法：

功能：用途和{{}}一致，但没有{{}}灵活
代码示例：

  <div id="app">
      <h2>
        {{message}}
      h2>
      <h2 v-text="message">h2>
    div>
    <script>
        new Vue({
            el: '#app',
            data: {
              message:'你好啊',
            },
            methods: {}
        });
    script>

3.v-html指令

用法：

{{url}}

功能：将内容按照HTML格式进行解析并显示对应内容
代码实例：

  <div id="app">
      {{message}} 
      <h2 v-html="url">{{url}}h2>
    div>
    <script>
        new Vue({
            el: '#app',
            data: {
              message:'你好啊11',
              url:'百度一下'
            },
            methods: {}
        });
    script>

4.v-once指令

用法：

{{message}}

功能 表示元素和组件只渲染一次，不会随着数据的改变而改变
代码示例：

<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指令

用法：

{{message}}

功能：用于跳过元素的编译过程，显示原本的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指令

用法：

功能：在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用于一次性展示，比如需要同时展示变化前后数据的场景