02 Vue基础语法之插值语法-Toy模板网

这篇具有很好参考价值的文章主要介绍了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指令

用法： <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>