2.2Vue2的模板语法

原创已于 2025-04-11 11:56:00 修改 · 1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #vue

于 2025-03-20 16:20:28 首次发布

2.1.1、插值语法

1、代码示例

  <body>
    <!-- 准备容器 -->
    <div id="app">
      <!-- 在data中声明的 -->
      <!--1、 data中声明的变量 -->
      <h1>{{msg}}</h1>
      <h1>{{sayHello()}}</h1>
      <!-- 不在data中的变量不可以 -->
      <!-- <h1>{{i}}</h1> -->
      <!-- <h1>{{sum()}}</h1> -->

      <!-- 2、常量 -->
      <h1>{{100}}</h1>
      <h1>{{'hello vue!'}}</h1>
      <h1>{{3.14}}</h1>

      <!--3、 javascript表达式 -->
      <h1>{{1 + 1}}</h1>
      <h1>{{msg + 1}}</h1>
      <h1>{{'msg' + 1}}</h1>
      <h1>{{gender ? '男' : '女'}}</h1>
      <h1>{{number + 1}}</h1>
      <h1>{{msg.split('').reverse().join('')}}</h1>

      <!-- 错误的：不是表达式，这是语句。 -->
      <!-- <h1>{{var i = 100}}</h1> -->

      <!-- 4、在白名单里面的 -->
      <h1>{{Date}}</h1>
      <h1>{{Date.now()}}</h1>
      <h1>{{Math}}</h1>
      <h1>{{Math.ceil(3.14)}}</h1>
    </div>

    <!-- vue程序 -->
    <script>
      // 用户自定义的一个全局变量
      var i = 100;
      // 用户自定义的一个全局函数
      function sum() {
        console.log("sum.....");
      }

      new Vue({
        el: "#app",
        data: {
          number: 1,
          gender: true,
          msg: "abcdef", // msg是在data中声明的变量
          sayHello: function () {
            console.log("hello vue!");
          },
        },
      });
    </script>
  </body>

2、代码总结

data中声明的变量，函数，数组，等都可以
常量
只要是合法的javascript表达式都可以，注意js语句不行，赋值语句，if，for等
模版表达式都被放在沙盒中，只能访问全局变量的一个白名单

如：Math和Date

'Infinity,undefined,NaN,isFinite,isNaN,'

'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,'

'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,'

'require'

2.1.2、指令语法

1. 什么是指令？有什么作用？

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

2. Vue框架中的所有指令的名字都以“v-”开始。

3. 插值是写在标签体当中的，那么指令写在哪里呢？

Vue框架中所有的指令都是以HTML标签的属性形式存在的，

例如：<span 指令是写在这里的>{{这里是插值语法的位置}}</span>

注意：虽然指令是写在标签的属性位置上，但是这个指令浏览器是无法直接看懂的。是需要先让Vue框架进行编译的，编译之后的内容浏览器是可以看懂的。

4. 指令的语法规则：

完整的语法格式：

<HTML标签 v-指令名:参数="javascript表达式"></HTML标签>

javascript表达式：

之前在插值语法中{{这里可以写什么}}，那么指令中的表达式就可以写什么，当然{{}}不需要写

不是所有的指令都有参数和表达式：

有的指令，不需要参数，也不需要表达式，例如：v-once

有的指令，不需要参数，但是需要表达式，例如：v-if="表达式"

有的指令，既需要参数，又需要表达式，例如：v-bind:参数="表达式"

5. v-once 指令

作用：只渲染元素一次。随后的重新渲染，元素及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

6. v-if="表达式" 指令

作用：表达式的执行结果需要是一个布尔类型的数据：true或者false

true：这个指令所在的标签，会被渲染到浏览器当中。

false：这个指令所在的标签，不会被渲染到浏览器当中。

 <body>
    <!-- 准备一个容器 -->
    <div id="app">
      <h1>{{msg}}</h1>
      <!-- 只会渲染一次，msg更改数据，也不会再次渲染 -->
      <h1 v-once>{{msg}}</h1>
      <h1 v-if="a > b">v-if测试：你看我出不出现</h1>
    </div>
    <!-- vue程序 -->
    <script>
      new Vue({
        el: "#app",
        data: {
          msg: "Hello Vue!",
          a: 10,
          b: 11,
        },
      });
    </script>
  </body>

2.1.3、v-bind指令详解

1. 这个指令是干啥的？

它可以让HTML标签的某个属性的值产生动态的效果。

2. v-bind指令的语法格式：

<HTML标签 v-bind:参数="表达式"></HTML标签>

3. v-bind指令的编译原理？

编译前：

<HTML标签 v-bind:参数="表达式"></HTML标签>

编译后：

<HTML标签参数="表达式的执行结果"></HTML标签>

注意两项：

第一：在编译的时候v-bind后面的“参数名”会被编译为HTML标签的“属性名”

第二：表达式会关联data，当data发生改变之后，表达式的执行结果就会发生变化。所以，连带的就会产生动态效果。

4. v-bind因为很常用，所以Vue框架对该指令提供了一种简写方式：

只是针对v-bind提供了以下简写方式：

5. 什么时候使用插值语法？什么时候使用指令？

凡是标签体当中的内容要想动态，需要使用插值语法。

只要向让HTML标签的属性动态，需要使用指令语法。

  <body>
    <!-- 准备一个容器 -->
    <div id="app">
      <!-- 注意：以下代码中 msg 是变量名。 -->
      <!-- 注意：原则上v-bind指令后面的这个参数名可以随便写。 -->
      <!-- 虽然可以随便写，但大部分情况下，这个参数名还是需要写成该HTML标签支持的属性名。这样才会有意义。 -->
      <span v-bind:xyz="msg"></span>

      <!-- 这个表达式带有单引号，这个'msg'就不是变量了，是常量。 -->
      <span v-bind:xyz="'msg'"></span>

      <!-- v-bind实战 -->
      <img src="../img/1.jpg" /> <br />
      <img v-bind:src="imgPath" /> <br />

      <!-- v-bind简写形式 -->
      <img :src="imgPath" /> <br />

      <!-- 这是一个普通的文本框 -->
      <input type="text" name="username" value="zhangsan" /> <br />
      <!-- 以下文本框可以让value这个数据变成动态的：这个就是典型的动态数据绑定。 -->
      <input type="text" name="username" :value="username" /> <br />

      <!-- 使用v-bind也可以让超链接的地址动态 -->
      <a href="https://www.baidu.com">百度1</a> <br />
      <a :href="url">百度2</a> <br />

      <!-- 不能采用以下写法，会报错-->
      <!-- <a href="{{url}}">百度3</a>  -->
    </div>
    <!-- vue程序 -->
    <script>
      new Vue({
        el: "#app",
        data: {
          msg: "Hello Vue!",
          imgPath: "../img/1.jpg",
          username: "章三",
          url: "https://www.baidu.com",
        },
      });
    </script>
  </body>

2.1.4、 v-model详解

1. v-bind和v-model这两个指令都可以完成数据绑定。

2. v-bind是单向数据绑定。

data ===> 视图

3. v-model是双向数据绑定。

data <===> 视图

4. v-bind可以使用在任何HTML标签当中。

v-model只能使用在表单类元素上，例如：input标签、select标签、textarea标签。

为什么v-model的使用会有这个限制呢？

因为表单类的元素才能给用户提供交互输入的界面。v-model指令通常也是用在value属性上面的。

5. v-bind和v-model都有简写方式：

v-bind简写方式：

v-bind:参数="表达式" 简写为 :参数="表达式"

v-model简写方式：

v-model:value="表达式" 简写为 v-model="表达式"

<body>
    <!-- 准备一个容器 -->
    <div id="app">
      <!-- 完整写法 -->
      v-bind指令：<input type="text" v-bind:value="name1" /><br />
      v-model指令：<input type="text" v-model:value="name2" /><br />

      <!-- 报错了，v-model不能使用在这种元素上。 -->
      <!-- <a v-model:href="url">百度</a> -->

      <!-- 简写 -->
      v-bind指令：<input type="text" :value="name1" /><br />
      v-model指令：<input type="text" v-model="name2" /><br />

       <!-- 联动改变 -->
      v-bind消息1：<input type="text" :value="msg" /><br />
      v-model消息2：<input type="text" v-model="msg" /><br />
    </div>

    <!-- vue程序 -->
    <script>
      new Vue({
        el: "#app",
        data: {
          name1: "zhangsan",
          name2: "wangwu",
          url: "https://www.baidu.com",
          msg: "Hello Vue!",
        },
      });
    </script>
  </body>

2.15、用户片段

安装插件：JavaScript (ES6) code snippets

为JavaScript、TypeScript、HTML、React和Vue提供了ES6的语法支持。

第一步：

第二步：

第三步：配置片段

html.json中设置html环境下的代码片段

// 配置信息
"Print to console": {
  // 给片段设置的简写
  "prefix": "log",
  // 配置片段
  "body": [
    // ,分割开每行代码  $1 鼠标聚焦的地方 
  "console.log('$1');",
  "$2"
  ],
  // 片段描述信息（可删除）
  "description": "Log output to console"
}

具体配置如下：

{
    "h5 template": {
        "prefix": "vv", // 对应的是使用这个模板的快捷键
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"en\">",
            "<head>",
            "\t<meta charset=\"UTF-8\">",
            "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
            "\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
            "\t<title>Document</title>",
            "\t<script src='https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js'></script>",
            "</head>\n",
            "<body>",
            "\t<div id =\"root\"> </div>\n",
            "\t<script>",
            "\tVue.config.productionTip = false//阻止vue 在启动时生成生产提示",
            "\t var vm = new Vue({",
            "\t\tel: '#root',",
            "\t\tdata() {return{}},",
            "\t\tmethods: {}",
            "\t });",
            "\t</script>",
            "</body>\n",
            "</html>"
        ],
        "description": "vue学习模版" // 模板的描述
    }
}

在javascript.json 中配置js的片段

    // 配置信息
    "create vue instance": {
        // 给片段设置的简写
        "prefix": "v1",
        // 配置片段
        "body": [
            "\t var vm = new Vue({",
            "\t\tel: '#root',",
            "\t\tdata: {'$1'},",
            "\t });",
        ],
        // 片段描述信息（可删除）
        "description": "vm"
    },