Vue教程0202-Vue模板语法

watchping

已于 2023-02-12 09:58:32 修改

阅读量64

点赞数

分类专栏：前端Vue教程 # Vue基础文章标签： vue.js javascript 前端

于 2023-02-11 15:36:55 首次发布

本文链接：https://blog.csdn.net/watchping/article/details/128984315

版权

前端Vue教程同时被 2 个专栏收录

10 篇文章 3 订阅

订阅专栏

Vue基础

8 篇文章 0 订阅

订阅专栏

Vue模板语法

1.文本插值{{}}
2.指令v-html
3.指令v-cloak、v-text
- 3.1指令v-cloak
- 3.2 指令v-text
4.指令v-once
5.指令v-pre
6.指令v-bind

官网学习 模板语法

1.文本插值{{}}

数据绑定最常见的形式就是使用双大括号的文本插值。

用法：{{js表达式}}

参考案例核心代码：

<body> 
  <div id="app">
    <h1>用户名：{{uname}}</h1>
    <h3>性别：{{sex==1?"男":"女"}}</h2>
      <h3>下单时间：{{new Date(orderTime).toLocaleString()}}</h2>
        <h3>数量：{{count}}</h2>
          <h3>单价：{{price.toFixed(2)}}</h2>
            <h2>小计：${{(price * count).toFixed(2)}}
          </h3>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        uname: "dingding",
        sex: 1,
        orderTime: 1587959581823,
        price: 12.5,
        count: 5,
        //将来这些值都可以来自于ajax请求
      },
    });
  </script>
</body>

2.指令v-html

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html指令。

传统的HTML缺少程序必须的要素，比如:
变量，函数，分支，循环等，导致js重复操作量巨大，可以通过使用Vue中的指令来弥补这方面的不足。后续会陆续介绍Vue中的各个指令。

参考案例核心代码：

<body> 
  <div id="app">
    <h1>消息来源:{{rawHtml}}</h1>
    <h1 v-html="`消息来源:${rawHtml}`">
      Welcome
    </h1>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        rawHtml: `<p>来自<a href="javascript:;">&lt;&lt;新华社&gt;&gt;</a>的消息</p>`,
      },
    });
  </script>
</body>

3.指令v-cloak、v-text

因为vue代码是放在js文件中，所以，如果网速慢，vue代码暂时没有下载下来时，用户很可能短暂看到页面上的绑定语法，用户体验不好！通过v-cloak和v-text指令可以解决这个问题。

3.1指令v-cloak

用v-cloak暂时隐藏带有{{}}内容的元素,分二步实现
1). 在包含绑定语法{{}}的元素上添加v-cloak属性
2). 在css中手动添加样式: [v-cloak]{ display:none }
案例核心代码参考：

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1 v-cloak>Welcome: {{uname}}</h1>
  </div>
  <script>
    //模拟网络加载，延时2秒
    setTimeout(function () {
      var vm = new Vue({
        el: "#app",
        data: {
          uname: "dingding",
        },
      });
    }, 2000);
  </script>
</body>

3.2 指令v-text

用 v-text暂时隐藏带有{{}}内容的元素
用法：

<元素 v-text="原{{}}内容"></元素>。

案例核心代码参考：

<body>
  <div id="app">
    <h1 v-text="`Welcome:${uname}`"></h1>
  </div>
  <script>
    //模拟网络加载，延时2秒
    setTimeout(function () {
      var vm = new Vue({
        el: "#app",
        data: {
          uname: "dingding",
        },
      });
    }, 2000);
  </script>
</body>

强调：用了v-text，不要在元素开始标签和结束标签直接写内容！会被v-text内容替换！

4.指令v-once

通过使用 v-once 指令，能执行一次性地插值，当数据后续改变时，插值处的内容不会更新。
案例核心代码参考：

<body>   
    <div id="app">
        <h1>当前系统时间: {{time}}</h1>
        <!--希望上线时间只在首次打开网页时绑定一次，之后，即使time变量值发生变化，也不会自动更新上线时间-->
        <h1 v-once>上线时间: {{time}}</h1>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                time: new Date().toLocaleString(),
            },
        });
        setInterval(function () {
            vm.time = new Date().toLocaleString();
        }, 1000);
    </script>
</body>

5.指令v-pre

用v-pre指令可以防止元素内容中的{{}}被vue编译，让内容中的{{}}原样显示！

案例核心代码参考：

<body>    
    <div id="app">
        <h1 v-pre>Vue框架采用{{uname}}方式绑定元素的内容</h1>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                uname: "dingding"
            }
        })
    </script>
</body>

6.指令v-bind

{{}}只能绑定元素内容，不能绑定元素属性值，用v-bind指令可以绑定元素属性值。

用法:

<元素 v-bind:属性="js表达式"></元素>

可以简写

<元素 :属性="js表达式"></元素>，

案例-根据不同的PM25值，显示不同的表情图片，实现案例核心代码参考：

<body> 
  <div id="app">
    <h1>空气净化器</h1>
    <h2>pm25={{pm25}}</h2>
    <img :src="`../img/${index}.png`">
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        pm25: 180,
        index: 1
      },
      //在Vue实例生命周期钩子函数中设置定时函数
      created() {
        setInterval(() => {
          this.pm25 = parseInt(Math.random() * 400);
          if (this.pm25 < 100) this.index = 1;
          else if (this.pm25 < 200) this.index = 2;
          else if (this.pm25 < 300) this.index = 3;
          else this.index = 4;
        }, 2000);
      },
    });
  </script>
</body>