Vue基础之模板语法介绍-阿里云开发者社区

前言

上篇我分享了关于Vue的入门，简单的入了个门。本篇文章将要分享的内容为Vue的模板语法。

一、插值

1.1、文本

1.2、html

1.3、属性

1.4、class、style绑定

1.5、表达式

在Vue的模板语法中，插值是一种常用的方式来动态地将数据渲染到视图中。Vue使用双大括号{{}}作为插值的语法标记。

最简单的用法是在模板中直接插入数据值，例如：

<p>{{ message }}</p>

上面的代码将把Vue实例中的message属性的值插入到<p>元素中。

插值还支持JavaScript表达式，你可以在插值中使用表达式来执行计算或调用函数，例如：

<p>{{ message.toUpperCase() }}</p>

上面的代码将把message属性的值转换为大写后插入到<p>元素中。

另外，插值还可以用在HTML属性中，例如：

<a v-bind:href="url">{{ linkText }}</a>

上面的代码使用v-bind指令将url属性的值绑定到<a>元素的href属性上，并将linkText属性的值插入到<a>元素中显示的文本内容中。

需要注意的是，在插值中不能使用括号或赋值语句，因为插值只接受单个表达式。

总结起来，Vue的模板语法中的插值提供了一种简洁而灵活的方式来将数据动态地渲染到视图中可以直接插入数据值，也可以使用JavaScript表达式进行计算和函数调用。此外，插值还可以用在HTML属性中。

案例：

完整代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>插值</title>
    <!-- 引入vue.js的依赖 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
  </head>
  <body>
    <!-- 定义边界 -->
    <div id="app">
      <h1>{{msg}}</h1>
      <h6>{{msg}}</h6>
      <h3>演示适用html样式</h3>
      <div v-html="htmlstr"></div>
      <h3>演示vue 中的属性值</h3>
      <input type="text" v-bind:value="val" />
      <h3>演示Class与style绑值</h3>
      <span :class="f200" v-bind:style="colorblue">二者合为一体</span>
      <h3>演示表达式</h3>
      {{str.substr((0,5))}}<br />
      月薪：{{number-2000}}<br />
      {{ok ? '好' : '不好'}}<br />
      <span :id="id+'id'">商品id</span>
    </div>
  </body>
  <script>
    // 绑定边界
    new Vue({
      el: '#app',
      data() {
        return {
          msg: '七里香的名字很美',
          htmlstr: '<span style="color:red;">雨水</span>',
          val: '输入的值',
          str: '人生苦短，我用Java',
          number: 19999,
          ok: false,
          id: 'goods_',
          colorblue: 'color: blue;',
          f200: 'f200'
        }
      }
    })
  </script>
</html>

二、指令

核心指令

(v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model

v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素

他们只能是兄弟元素

v-else-if上一个兄弟元素必须是v-if

v-else上一个兄弟元素必须是v-if或者是v-else-if

v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"

v-for：类似JS的遍历，

遍历数组: v-for="item in items", items是数组，item为数组中的数组元素

遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值

v-for/v-model一起绑定[多选]复选框和单选框

v-bind插值：v-bind指令用于在HTML属性中插入动态的数据。可以简写为:。

<img :src="imageSrc">

上述代码中，:src将会把imageSrc变量的值作为src属性的值进行插值。

v-on插值：v-on指令用于在HTML事件处理程序中插入动态的方法。可以简写为@。

<button @click="handleClick">Click Me</button>

上述代码中，@click将会将handleClick方法插入到click事件处理程序中。

v-html插值：v-html指令用于将数据作为原始HTML插入到元素中。

<div v-html="htmlString"></div>

上述代码中，htmlString变量的值将会被作为原始HTML插入到<div>元素之中。

v-text插值：v-text指令用于替代双大括号插值，将指定的数据直接作为文本内容插入到元素中。

<p v-text="message"></p>

上述代码中，message变量的值将会作为<p>元素的文本内容。

注意重点：面试考题！！！

区别v-if与v-show？

v-if：
v-if指令根据条件表达式的值来控制元素的存在与否。当条件为true时，元素会被添加到DOM中；当条件为false时，元素会被从DOM中移除。它是惰性的，在条件变为true时才会进行渲染，可以避免不必要的DOM操作。

<div v-if="isShown">This is shown</div>

当isShown为true时，<div>元素会被渲染到视图中；当isShown为false时，<div>元素不会被渲染。

v-show：
v-show指令根据条件表达式的值来控制元素的显示或隐藏，但不会对DOM结构进行改变。当条件为true时，元素会以CSS的方式进行展示；当条件为false时，元素会以CSS的方式隐藏。即使在条件为false时，元素仍然存在于DOM中，只是在视觉上被隐藏了。

<div v-show="isShown">This is shown</div>

当isShown为true时，<div>元素会以可见的方式展示；当isShown为false时，<div>元素通过display: none隐藏，但仍然在DOM中存在。

区别总结：

v-if：根据条件决定元素是否存在于DOM中，惰性渲染。

v-show：根据条件决定元素的显示与隐藏，通过CSS控制。

一般而言，如果需要在条件变化频繁的情况下切换元素的显示与隐藏，或者初始渲染时元素可能不会被显示的情况下，推荐使用v-show。而如果需要在条件改变时有更高的渲染开销，或避免初始化时不必要的渲染，使用v-if更为合适。

案例：

代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>指令</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
  </head>
  <body>
    <!-- 定义边界 -->
    <div id="app">
        <h3>演示v-if 使用</h3>
      请输入成绩：1-100 <input type="text" v-model="degree" style="color: red;" />
      <div v-if="degree<=60">等级E</div>
      <div v-else-if="degree<=70">等级D</div>
      <div v-else-if="degree<=80">等级C</div>
      <div v-else-if="degree<=90">等级B</div>
      <div v-else-if="degree<=100">等级A</div>
      <div v-else="">输入成绩不合法</div>
       <h3>演示v-show 与 v-if区别</h3>
      <div v-show="ok">show</div>
      <div v-if="ok">if</div>
      <h3>演示v-for</h3>
      <select>
        <option v-for="h in hobby" :value="h.id">{{h.name}}</option>
      </select>
      <div v-for="h in hobby">
        <input :value="h.id" type=checkbox />{{h.name}}
      </div>
    </div>
  </body>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          degree: 78,
          ok: false,
          hobby: [{
              id: "1",
              name: "乒乓球"
            },
            {
              id: "2",
              name: "滑板"
            },
            {
              id: "3",
              name: "跑步"
          }
            ],
        };
      }
    })
  </script>
</html>

4、动态参数

从2.6.0开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数

<a v-bind:[attrname]="url"> ... </a>

同样地，你可以使用动态参数为一个动态的事件名绑定处理函数

<button v-on:[evname]="dt">点击事件</button>

注1：动态参数表达式有一些语法约束，evName无效,evname有效，回避大写

<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                val: "click"
            };
        },
        methods: {
            chc() {
                alert("888");
            }
        }
    })
</script>

三、过滤器

在Vue.js中，过滤器（Filters）是一种用于格式化文本输出的特殊函数。它可以应用于绑定表达式中的数据，在渲染过程中将数据转换为所需的格式。以下是过滤器的详细使用方法：

注册过滤器：
在Vue实例或组件中，可以通过filters选项来注册过滤器。过滤器可以是全局的（注册在Vue实例上）或局部的（注册在组件上）。

全局过滤器的注册示例：

Vue.filter('filterName', function(value) {
  // 过滤器的逻辑处理
  return formattedValue;
});

局部过滤器的注册示例：

new Vue({
  // ...
  filters: {
    filterName(value) {
      // 过滤器的逻辑处理
      return formattedValue;
    }
  }
});

过滤器函数的示例：

// 全局过滤器函数
Vue.filter('filterName', function(value, arg1, arg2) {
  // 逻辑处理
  return formattedValue;
});
// 局部过滤器函数
new Vue({
  // ...
  filters: {
    filterName(value, arg1, arg2) {
      // 逻辑处理
      return formattedValue;
    }
  }
});

3.1局部过滤器

new Vue({

filters:{'filterName':function(value){}}

});

vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：

<p>{{ message | filterName }}</p>

{{ name | capitalize }}



<div v-bind:id="rawId | formatId"></div>

案例：

代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>过滤器</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
    <script src="data.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
  </head>
  <body>
    <div id="app">
      未使用过滤器：{{msg}}<br />
      使用一个过滤器：{{msg|jubu}}<br />
      使用一个过滤器：{{msg|single}}<br />
      使用过滤器链：{{msg|jubu|single}}<br />
      使用一个过滤器：{{msg|param(4,5)}}<br />
    </div>
  </body>
  <script>
    Vue.filter('jubu', function(val) { //val指的是作用的对象--msg
      return val.substring(2, 8);
    });
    new Vue({
      el: '#app',
      data() {
        return {
          msg: '前端过滤器的使用'
        }
      },
      methods: {
        handle() {
          alert("触发事件");
        }
      },
      filters: {
        'single': function(val) {
          return val.substring(2, 3);
        },
        'param': function(val, start, end) {
          return val.substring(start, end);
        }
      }
    })
  </script>
</html>

3.2全局过滤器

Vue.filter('filterName', function (value) {

// value 表示要过滤的内容

});

使用注意事项：

过滤器函数接受表达式的值作为第一个参数

过滤器应该是无状态的，即对于相同的输入应该始终返回相同的输出，不应该改变原始数据。语法：{{ message | filterA | filterB }}

过滤器可以串联使用，后一个过滤器的输出作为前一个过滤器的输入。

过滤器可以使用在v-bind指令中，用于动态绑定属性值。

过滤器是JavaScript函数，因此可以接受参数：{{ message | filterA('arg1', arg2) }}

js定义一个类

function Stu(){};
Stu.prototype.add(a,b){};//添加一个新的实例方法
Stu.update(a,b){};//添加一个新的类方法

案例：

代码：

data.js

//给Date类添加了一个新的实例方法format
Date.prototype.format = function (fmt) {
  //debugger;
    var o = {
        "M+": this.getMonth() + 1,                 //月份
        "d+": this.getDate(),                    //日
        "h+": this.getHours(),                   //小时
        "m+": this.getMinutes(),                 //分
        "s+": this.getSeconds(),                 //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds()             //毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
};
function fmtDate(date, pattern) {
  var ts = date.getTime();
    var d = new Date(ts).format("yyyy-MM-dd hh:mm:ss");
    if (pattern) {
        d = new Date(ts).format(pattern);
    }
    return d.toLocaleString();
};

具体代码：

<div id="app">
      未使用全局过滤器：{{msg}}<br/>
      使用全局过滤器：{{msg|all}}<br/>
    </div>
      <script type="text/javascript">
        // 全局过滤器
            Vue.filter('all', function(val) {//val指的是作用的对象--msg
              return fmtDate(val);
            });
        new Vue({
          el: '#app',
          data(){
            return{
              msg:new Date()
            }
          }
          })
      </script>

四、计算属性和监听属性

4.1计算属性

计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新

computed:{}

语法：

<div id="app">
      单价：<input v-model="price">
      数量：<input v-model="num">
      总价：<input v-model="count">
    </div>
  <script type="text/javascript">
    new Vue({
      el: '#app',
      data(){
        return{
          price:20,
          num:1
        }
      },
       computed:{
         count:function(){
           return this.price*this.num
         }
       }
    })
  </script>

效果：

4.2.监听属性

watch可以监听简单属性值及其对象中属性值的变化

watch类似于onchange事件,可以在属性值修改的时候,执行某些操作

语法：

<div id="app">
        千米：<input v-model="km"><br>
        米：<input v-model="m">
      </div>
    <script type="text/javascript">
      new Vue({
        el: '#app',
        data(){
          return{
            m:1000,
            km:1
          }
        },
          watch:{
            // v指的是m变量
            m: function(v){
                this.km = parseInt(v)/1000;
            },
            // v指的是km变量
           km: function(v){
                this.m = parseInt(v)*1000;
            }
          }
      })
    </script>

效果：

对比计算属性和监听属性区别：

计算属性：

定义：计算属性是基于依赖的数据动态生成的属性，通过在Vue实例中定义computed选项来创建。

特点：

计算属性具有缓存，即只有相关的依赖发生变化时，它们才会重新计算，否则会直接返回缓存结果，避免不必要的计算。

计算属性是响应式的，当依赖的数据发生变化时，与该计算属性相关的视图会自动重新渲染。

计算属性可以通过在模板中像绑定普通属性一样使用，不需要在模板中添加函数调用语法。

监听属性：

定义：监听属性通过在Vue实例中定义watch选项来创建，它监听指定的数据变化并执行相应的回调函数。

特点：

监听属性不会缓存结果，而是在依赖数据变化时立即执行回调函数。

监听属性可以监听一个或多个数据的变化，当其中任何一个被修改时，都会触发回调函数。

监听属性适用于数据变化后需要执行异步操作或复杂计算的场景。

计算属性：它用于响应式地更新数据，只要依赖的数据发生变化，该属性就会重新计算，计算的结果改变不可以影响前面的输入。

监听属性：二者相互依赖，一方改变，对方也相应更改。

五、vue实现购物车案例

通过今天的学习，我们可以用计算属性的方式去完成数量递增递减随之总价格也会发生改变的案例。

先看看以前我们使用的 jQuery方式实现购物车的功能，非常复杂，尤其是我们嵌套样式多的时候，那真的非常难找。以下是我之前写过的前端项目的购物车功能效果。

我使用vue来实现价格计算：

核心代码：（原创不易，html代码私信作者可得）

<script type="text/javascript">
    new Vue({
      el: '#app',
      data(){
        return{
          price:9.9,
          num:2
        }
      },
       computed:{
         count:function(){
           return this.price*this.num
         }
       }
    })
  </script>

Vue基础之模板语法介绍

前言

一、插值

二、指令

三、过滤器

四、计算属性和监听属性

五、vue实现购物车案例

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Vue基础之模板语法介绍

前言

一、插值

二、指令

三、过滤器

四、计算属性和监听属性

五、vue实现购物车案例

热门文章

最新文章

相关课程

相关电子书

相关实验场景