Vue模板语法（上）-阿里云开发者社区

一、插值

插值 Vue.js使用双大括号{{ }}来执行插值操作，将数据渲染到HTML中。

1.1 文本

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>插值</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  </head>
  <body>
    <div id="app">
    <p>文本</p>
    {{msg}}
    </div>
    <script type="text/javascript">
      new Vue({
        el:'#app',
        data(){
          return {
            msg:'4A级景区高校就读'
          };
        }
      });
    </script>
  </body>
</html>

效果如下：

1.2 html解析

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>插值</title>
    <style>
      .f30{
        font-size: 30px;
      }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  </head>
  <body>
    <div id="app">
    <p>文本</p>
    {{msg}} 
    <p>html解析</p>
    {{msg2}} <br>
    <b :class="msg3" v-html="msg2"></b>
    </div>
    <script type="text/javascript">
      new Vue({
        el:'#app',
        data(){
          return {
            msg:'4A级景区高校就读',//文本
            msg2:'<span style="color:red">4A级景区高校就读<span>',//html解析设置颜色样式
            msg3:'f30'//html解析设置大小
          };
        }
      });
    </script>
  </body>
</html>

效果如下：

1.3 表达式

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>插值</title>
    <style>
      .f30{
        font-size: 30px;
      }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  </head>
  <body>
    <div id="app">
    <p>文本</p>
    {{msg}} 
    <p>html解析</p>
    {{msg2}} <br>
    <b :class="msg3" v-html="msg2"></b>
    <p>表达式</p>
    {{num+1}}
    {{warn.substr(0,14)}}
    <input v-model="ok" />
    {{ok == 1 ? '必去武功山':'衡山不配了'}}
    </div>
    <script type="text/javascript">
      new Vue({
        el:'#app',
        data(){
          return {
            msg:'4A级景区高校就读',//文本
            msg2:'<span style="color:red">4A级景区高校就读<span>',//html解析设置颜色样式
            msg3:'f30',//html解析设置大小
            num:99998,//表达式  运算
            warn:'来自4A级景区直升机的压迫感',
            ok:1
          };
        }
      });
    </script>
  </body>
</html>

效果如下：

二、指令

2.1 定义

Vue指令是用于对DOM元素进行操作的特殊属性。指令以 v- 前缀作为标识，通过在HTML模板中使用指令，可以直接在DOM元素上添加特定的行为和功能。

2.2 常用指令

Vue中常用的内置指令有以下几个：

v-bind 或简写为 : 用于动态绑定属性值，将表达式的值绑定到元素的属性上。例如，:src="imageUrl" 将会将 imageUrl 的值作为 src 属性绑定到元素上。

v-if 根据条件决定是否渲染元素。表达式为真时，元素会被渲染到DOM中；为假时，元素会从DOM中移除。

v-for 用于循环渲染列表数据，可以遍历数组或对象。例如，v-for="item in items" 可以循环遍历 items 数组，生成对应的元素。

v-on 或简写为 @ 用于绑定事件监听器，当指定的事件被触发时，执行相应的事件处理函数。例如，@click="handleClick" 将会在点击事件触发时执行 handleClick 方法。

v-model 用于实现表单元素和数据的双向绑定。它会根据元素的类型自动选取正确的方式进行数据绑定，比如 <input> 和 <textarea> 元素使用 value 属性进行绑定，而 <checkbox> 和 <radio> 使用 checked 属性进行绑定。

详解代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <title>指令</title>
  </head>
  <body>
    <div id="app">
      <p>v-if/v-else-if/v-else</p>
      <input v-model="score" /><br>
      <b v-if="score < 60">不及格</b>
      <b v-else-if="score >= 60 && score < 70">及格</b>
      <b v-else-if="score <= 70 && score < 80">一般</b>
      <b v-else-if="score <= 80 && score < 90">良好</b>
      <b v-else="">优秀</b>
      60以下 不及格
      60-70  及格
      70-80  一般
      80-90  良好
      90以上 优秀
      <hr />
      <p>v-show</p>
      v-if与v-show的区别?<br>
      <b v-if="isShow">展示</b>
      <b v-show="isShow">展示</b>
      <hr />
      <p>v-for</p>
      <i v-for="a in arr">{{a}}&nbsp;&nbsp;</i>
      <i v-for="i,u in likes">&nbsp;&nbsp;{{i}}</i>
      <hr />
      <p>下拉框</p>
      <select>
        <option v-for="h in hobby" :value="h.id">{{h.name}}</option>
      </select>
      <div id=""  v-for="h in hobby">
        <input type="checkbox" name="hobby" :value="h.id"/>{{h.name}}
      </div><br />
      <p>动态参数</p>
      <input v-model="evname"/>
      <button v-on:[evname]="test">点我</button><br />
    </div>
    <script type="text/javascript">
      new Vue({
        el:'#app',
        data(){
          return {
            score:99,
            isShow:false,
            arr:[1,2,3,4],
            likes:[{
              name:'刘一金',
              id:1,
            },{
              name:'刘二金',
              id:2,
            },{
              name:'刘三金',
              id:3,
            },{
              name:'刘三金的羁绊',
              id:4,
            }],
            hobby:[{
              name:'4A景区洗浴',
              id:1,
            },{
              name:'4A景区酒吧',
              id:2,
            },{
              name:'4A景区网咖',
              id:3,
            },{
              name:'city walk',
              id:4,
            }],
            evname:'click'
          };
        }
        ,methods:{
          test(){
            //单击事件,双击事件
            alert("点我试试！！！")
          }
        }
      });
    </script>
  </body>
</html>

2.3 效果演示

2.3.1 v-if与v-show

未加v-show的效果：

加了v-show的效果：

v-if跟v-show的区别：

v-if在浏览器中是不存在的，但v-show是存在的。只不过被css样式给隐藏掉了。

2.3.2 v-for

效果如下：

2.3.3 下拉框

演示效果如下：

2.3.4 v-if/v-else-if/v-else

演示效果如下：

2.3.5 多选框

演示效果如下：

2.3.6 动态参数

输入click指令时点一下就能弹窗，当输入dblclick指令时需要双击才能弹窗。如下：

效果演示：

2.4 好处

学习Vue指令可以为我们带来以下几个好处：

增强交互性：Vue指令使得我们能够直接在模板中添加交互行为和功能，而无需深入操作DOM元素。通过使用指令，我们可以轻松地绑定属性、监听事件、进行条件渲染和循环渲染等操作，从而提升用户与应用的交互体验。

提高可维护性：Vue指令可以将与DOM操作相关的代码集中在模板中，使得代码更加直观和易于维护。通过在模板中使用指令，我们可以清晰地了解其功能和作用，而不需要深入查看和修改具体的DOM操作代码。

实现代码重用：通过自定义指令，我们可以将一些常见的DOM操作封装为可复用的指令，以便在多个组件中使用。这样可以减少重复编写相同的代码，并提高开发效率。自定义指令还可以根据需要进行参数传递和扩展，使其更灵活适用于不同的场景。

解耦视图和逻辑：Vue指令的使用可以将视图和业务逻辑解耦，使得开发人员可以专注于不同的层面。通过将数据和指令绑定到模板中，我们可以更清晰地分离视图的呈现和业务逻辑的处理。

扩展性和灵活性：Vue指令提供了丰富的内置指令，并支持自定义指令的开发。这为我们提供了很大的灵活性和扩展性，可以根据不同的需求定制指令的行为和功能。无论是通过使用内置指令还是自定义指令，都可以满足各种复杂的交互需求。

三、过滤器

3.1 定义

在Vue中，过滤器（Filters）是一种用于对数据进行格式化和处理的机制。它可以在模板中对绑定表达式中的数据进行转换和筛选，以满足特定的显示需求。

3.2 用途

过滤器可以用于对文本、日期、数字等各种类型的数据进行处理。通过在模板中使用管道符号（|），你可以将过滤器应用到需要处理的数据上。

3.3 常用过滤器

Vue内置了一些常用的过滤器，例如：

uppercase：将文本转换为大写字母。

lowercase：将文本转换为小写字母。

capitalize：将文本的首字母大写。

currency：格式化货币金额。

过滤器在Vue中提供了一种简洁而灵活的方式来格式化和转换数据，使得在模板中展示数据的过程更加方便和可控。通过使用内置过滤器或自定义过滤器，你可以轻松地处理各种类型的数据，并根据需求进行格式化和筛选。

3.4 效果演示

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <script src="../js/date.js"></script>
    <title>局部过滤器</title>
  </head>
  <body>
    <div id="app">
      <p>局部过滤器</p>
      {{ msg }}<br />
      {{ msg | filterA }}
      <p>局部过滤器串行使用</p>
      {{ msg }}<br />
      {{ msg | filterA }}
      {{ msg | filterA | filterB }}
      <p>局部过滤器传参</p>
      {{ msg | filterC(2, 5) }}<br />
      <p>全局过滤器</p>
      {{ time }}<br />
      {{ time | fmtDataFilter }}
    </div>
    <script>
      Vue.filter('fmtDataFilter', function(value) {
        return fmtDate(value);
      });
      new Vue({
        el: '#app',
        filters: {
          'filterA': function(v) {
            return v.substring(0, 6);
          },
          'filterB': function(v) {
            return v.substring(3, 5);
          },
          'filterC': function(v, begin, end) {
            return v.substring(begin, end);
          },
        },
        data() {
          return {
            msg: '我是九院压力怪.....',
            time: new Date(),
          };
        },
      });
    </script>
  </body>
</html>

结果如下：

四、计算属性与监听属性

在Vue中，计算属性和监听属性是Vue实例的两个重要概念。

4.1 计算属性

计算属性（Computed Properties）: 计算属性主要用于对数据进行计算或者过滤的操作，其结果会被缓存起来，并且只有当依赖的数据发生变化时才会重新计算。计算属性在模板中以普通属性的方式使用，而不需要在模板中调用方法。

解释代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>计算属性监听属性</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  </head>
  <body>
    <div id="app">
    <p>计算属性</p>
    单价：<input v-model="price"/>
    数量：<input v-model="num"/>
    小计：{{count}}
    </div>
    <script type="text/javascript">
      new Vue({
        el:'#app',
        data(){
          return {
            price:999,
            num:1
          };
        },
        computed:{
          count:function(){
            return this.price * this.num;
          }
        }
      });
    </script>
  </body>
</html>

展示效果：

4.2 监听属性

监听属性（Watchers）: 监听属性主要用于观察和响应数据的变化，可以执行一些自定义的操作，比如异步请求、数据持久化等。与计算属性不同，监听属性不会缓存结果，只有在监听的数据变化时才会触发相应的回调函数。

解释代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>计算属性监听属性</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  </head>
  <body>
    <div id="app">
    <p>计算属性</p>
    单价：<input v-model="price"/>
    数量：<input v-model="num"/>
    小计：{{count}}<br />
    <p>监听属性</p>
    千米：<input v-model="km"/>
    米：<input v-model="m"/>
    </div>
    <script type="text/javascript">
      new Vue({
        el:'#app',
        data(){
          return {
            price:999,
            num:1,
            m:1000,
            km:1
          };
        },
        computed:{//计算属性
          count:function(){
            return this.price * this.num;
          }
        },
        watch:{
          km:function(v){
            //v指的是被监听的属性，指的是km
            this.m = parseInt(v) * 1000;
          },
          m:function(v){
            //v指的是被监听的属性，指的是m
            this.km = parseInt(v) / 1000;
          }
        }
      });
    </script>
  </body>
</html>

展示效果如下：

注意：

计算属性用于对数据的变化进行计算和获取，结果会被缓存；

监听属性用于监听数据的变化，并执行自定义的操作，不会缓存结果。

4.3 利用Vue计算属性实现购物车功能

展示效果如下：

代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>购物车功能</title>
  <!-- 引入依赖库 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
  <!-- Vue实例和模板 -->
  <div id="app">
    <!-- 购物车 -->
    <h2>购物车</h2>
    <div v-for="(product, index) in cart" :key="index">
      {{ product.name }} - 单价：{{ product.price }}
      <button @click="decreaseQuantity(index)" v-if="product.quantity > 1">-</button>
      {{ product.quantity }}
      <button @click="increaseQuantity(index)">+</button>
      小计：{{ product.total }}
    </div>
    <p>总计：{{ total }}</p>
    <!-- 添加商品 -->
    <hr>
    <h3>添加商品</h3>
    商品名称：<input v-model="newProduct.name" />
    单价：<input v-model="newProduct.price" type="number" step="0.01" />
    <button @click="addProduct">添加</button>
  </div>
  <script type="text/javascript">
    // 展示购物车列表，用户可以增加或减少商品数量，计算总价，并且可以通过表单添加新的商品到购物车中。
    new Vue({
      el: '#app',
      data() {
        return {
          cart: [],
          newProduct: {
            name: '',
            price: 0,
            quantity: 1,
            total: 0
          }
        };
      },
      computed: {//Vue计算属性计算价格
        total() {
          let sum = 0;
          for (let item of this.cart) {
            sum += item.total;
          }
          return sum;
        }
      },
      methods: {
        increaseQuantity(index) {//增加商品数量方法，通过传入商品在购物车中的索引index将其数量加一
          this.cart[index].quantity++;
          this.updateTotal(index);//调用updateTotal更新小计
        },
        decreaseQuantity(index) {//减少商品数量方法，通过传入商品在购物车中的索引index
          if (this.cart[index].quantity > 1) {//首先判断该商品的数量是否大于1，如果是，则将数量减一
            this.cart[index].quantity--;
            this.updateTotal(index);调用updateTotal更新小计
          }
        },
        updateTotal(index) {//更新商品小计的方法，根据商品的单价和数量计算商品的小计，并更新到购物车数组中的对应商品对象的total属性
          this.cart[index].total = this.cart[index].price * this.cart[index].quantity;
        },
        addProduct() {//添加商品到购物车的方法
          this.newProduct.total = this.newProduct.price * this.newProduct.quantity;
          this.cart.push({ ...this.newProduct });
          this.newProduct.name = '';
          this.newProduct.price = 0;
          this.newProduct.quantity = 1;
          this.newProduct.total = 0;
        }
      }
    });
  </script>
</body>
</html>

（注）方法解释如下：

increaseQuantity(index): 增加商品数量的方法。通过传入商品在购物车中的索引 index，将该商品的数量加一，并调用 updateTotal(index) 方法更新该商品的小计。

decreaseQuantity(index): 减少商品数量的方法。通过传入商品在购物车中的索引 index，首先判断该商品的数量是否大于1，如果是，则将数量减一，并调用 updateTotal(index) 方法更新该商品的小计。

updateTotal(index): 更新商品小计的方法。通过传入商品在购物车中的索引 index，根据商品的单价和数量计算商品的小计，并更新到购物车数组中的对应商品对象的total属性。

addProduct():添加商品到购物车的方法。首先计算新添加商品的小计（单价乘以数量），然后将新商品对象添加到购物车数组中，使用扩展运算符来创建新的对象，以避免直接引用原始数据对象。最后，将新商品表单的相关字段重置为初始值，清空名称、价格、数量和小计。

五、收获

学习Vue模板语法可以带来以下几个收获：

声明式编程：Vue模板语法采用了声明式的编程方式，让我们更关注"做什么"而不是"怎么做"。通过使用Vue的模板语法，我们可以更直观地描述数据和视图之间的关系，而无需深入操作DOM元素。

数据绑定：Vue模板语法提供了丰富的数据绑定方式，使得我们可以将数据动态地与模板中的元素和属性进行绑定。这样，数据的变化会自动反映在视图中，同时用户对视图的操作也能自动更新相关数据。

条件渲染和循环渲染：Vue模板语法支持条件渲染和循环渲染的语法结构。我们可以使用v-if、v-else、v-for等指令来根据条件动态地渲染元素和重复渲染列表数据。这使得我们能够根据不同的状态和数据动态地展示和操作视图。

事件处理：Vue模板语法允许我们在元素上绑定事件监听器，以响应用户的交互操作。我们可以使用v-on指令来绑定不同的事件，并调用相应的方法来处理用户的交互行为。这为我们提供了一种方便和简洁的方式来处理用户输入和操作。

过滤器和计算属性：Vue模板语法还提供了过滤器和计算属性的功能，用于对数据进行额外的处理和转换。过滤器可以在模板中对数据进行格式化，例如日期格式化，而计算属性可以在模板中对数据进行复杂的计算和操作，以生成新的数据供模板使用。

通过学习Vue模板语法，我们能够更加高效地开发Vue应用程序。它使我们的代码更具可读性和可维护性，而且更加清晰地表达数据和视图之间的关系。同时，模板语法还提供了丰富的功能和语法结构，使我们能够轻松地处理条件渲染、循环渲染、事件处理等常见的开发需求。

最后Vue模板语法（上）就到这里，祝大家在敲代码的路上一路通畅!

感谢大家的观看 !

Vue模板语法（上）

一、插值

1.1 文本

1.2 html解析

1.3 表达式

二、指令

2.1 定义

2.2 常用指令

2.3 效果演示

2.3.1 v-if与v-show

2.3.2 v-for

2.3.3 下拉框

2.3.4 v-if/v-else-if/v-else

2.3.5 多选框

2.3.6 动态参数

2.4 好处

三、过滤器

3.1 定义

3.2 用途

3.3 常用过滤器

3.4 效果演示

四、计算属性与监听属性

4.1 计算属性

4.2 监听属性

4.3 利用Vue计算属性实现购物车功能

五、收获

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Vue模板语法（上）

一、插值

1.1 文本

1.2 html解析

1.3 表达式

二、指令

2.1 定义

2.2 常用指令

2.3 效果演示

2.3.1 v-if与v-show

2.3.2 v-for

2.3.3 下拉框

2.3.4 v-if/v-else-if/v-else

2.3.5 多选框

2.3.6 动态参数

2.4 好处

三、过滤器

3.1 定义

3.2 用途

3.3 常用过滤器

3.4 效果演示

四、计算属性与监听属性

4.1 计算属性

4.2 监听属性

4.3 利用Vue计算属性实现购物车功能

五、收获

热门文章

最新文章

相关课程

相关电子书

相关实验场景