【Vue】模板语法，插值、指令、过滤器、计算属性及监听属性（内含面试题及毕设等实用案例）上篇

川长思鸟来 2024-03-02 08:35 4阅读 0赞

## 一、引言 ##

### **1、什么是模板语法？** ###

> Vue 的模板语法是一种用于在 HTML 中声明式地渲染 Vue 组件的语法。它基于 HTML，并通过特定的模板语法扩展了 HTML。Vue 使用了一种称为 “Mustache” 语法的模板插值来绑定数据到 HTML 元素上。

> 在 Vue 的模板语法中，你可以使用双大括号（\{ \{\}\}）将数据绑定到 HTML 元素上，这样数据的值会被动态地替换到相应的位置。

> **下面我会以语法的介绍和案例为大家做一个示范**

## 二、插值 ##

### 1、文本 ###

> \{ \{msg\}\}

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>插值</title>
        
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <h2>文本</h2>
        <p>{
       {msg}}</p>
    </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data() {
                return {
                    msg: 'hello Vue.js'
                };
            }
        })
    </script>
    </html>

![bad3afffeac04c00a383a1c2f2cf0129.png][]

### 2、 html ###

> 使用v-html指令用于输出html代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>插值</title>
        
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <h2>html</h2>
    </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data() {
                return {
                    htmlstr: '<h3 style="color:red;">这是一个v-html指令html代码</h3>'
                };
            }
        })
    </script>
    
    </html>

![cb124169a6734fc1bd91f98be06d47ba.png][]

### 3、属性 ###

> HTML属性中的值应使用v-bind指令

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>插值</title>
        
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <h2>vue中的属性</h2>
        <a v-bind:href="hrefstr">4399</a>
    </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data() {
                return {
                    hrefstr: 'https://www.4399.com/'
                };
            }
        })
    </script>
    
    </html>

> 他在我这里是一个链接，因为我使用了<a>标签,这样它可以做一个跳转

![6862380a6f1c46859b11f7525f382ac2.png][]

### 4、表达式 ###

> Vue提供了完全的JavaScript表达式支持

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>插值</title>
        
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <h2>表达式</h2>
        表达式:{
       {number + 1}}<br>
        截取：{
       {str.substring(0, 4).toUpperCase()}}<br>
        三元：{
       {ok ? 'yes' : 'no'}}
    
    </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data() {
                return {
                    number: 59,
                    str: 'Java、python、php、C++',
                    ok: false,
                };
            }
        })
    </script>
    
    </html>

![dd0fd628e4f248819f2bc19f5b3f7424.png][]

### 5、class、style绑定 ###

> 使用方式：
> 
>  v-bind:class="expression"
> 
> v-bind:style="expression"
> 
> expression的类型：字符串、数组、对象
> 
> **这里做了一个class、style一起的案例**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>插值</title>
        
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <style>
        .f30 {
            font-size: 30px;
            color: red;
        }
    </style>
    <body>
    <div id="app">
        <h2>class、style绑定</h2>
        <b :class="msg3">class、style绑定</b>
    </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data() {
                return {
                    msg3: 'f30'
                };
            }
        })
    </script>
    
    </html>

![437670e830f84613a7f6afac0f653301.png][]

## 三、指令、动态参数 ##

> 指的是带有“v-”前缀的特殊属性
> 
> **核心指令：**
> 
> （v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-mode）

### 1、v-if|v-else|v-else-if ###

> 根据其后表达式的bool值进行判断是否渲染该元素

> 他们只能是兄弟元素
> 
> v-else-if上一个兄弟元素必须是v-if
> 
> v-else上一个兄弟元素必须是v-if或者是v-else-if

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>指令</title>
        
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
    
    <div id="app">
        <p>v-if|v-else|v-else-if</p>
        分数：<input v-model="score"/>
        <div v-if="score>=90">大神</div>
        <div v-else-if="score>=80 && score<90">优秀</div>
        <div v-else-if="score>=70 && score<80">优秀</div>
        <div v-else-if="score>=60 && score<70">良好</div>
        <div v-else="score<60">还需努力</div>
    </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data() {
                return {
                    score: 78
                };
            }
        })
    </script>
    
    </html>

![1d33210f7795430aa4ee41b59f7ccf61.gif][]

### 2、v-show ###

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

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>指令</title>
        
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
    
    <div id="app">
        <p>v-if|v-else|v-else-if</p>
        分数：<input v-model="score"/>
        <div v-if="score>=90">大神</div>
        <div v-else-if="score>=80 && score<90">优秀</div>
        <div v-else-if="score>=70 && score<80">优秀</div>
        <div v-else-if="score>=60 && score<70">良好</div>
        <div v-else="score<60">还需努力</div>
    
        <p>v-show</p>
        <div v-show="score>90">v-show-成为大神的人</div>
        <div v-if="score>90">v-if-成为大神的人</div>
    </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data() {
                return {
                    score: 78
                };
            }
        })
    </script>
    
    </html>

> 只有当我们的分数达到了90以上就会显示出来
> 
> ![882a0161e87c4913b136c5a21f397670.gif][]

### 3、v-for ###

> 类似JS的遍历：
> 
> 遍历数组: v-for="item in items", items是数组，item为数组中的数组元素
> 
> 遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>指令</title>
        
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
    
    <div id="app">
        <p>v-for</p>
        下拉框：
        <select v-model="hobbySelected">
            <option v-for="h in hobby" :value="h.id">{
       {h.name}}</option>
        </select><br>
        复选框：
        <div v-for="h in hobby">
            <input :value="h.id" type='checkbox'/>{
       {h.name}}
        </div>
    </div>
    </body>
    <script type="text/javascript">
        // 绑定边界	ES6具体体现
        new Vue({
            el: '#app',
            data() {
                return {
                    hobby: [
                        {id: "1", name: "唱"},
                        {id: "2", name: "跳"},
                        {id: "3", name: "rap"},
                        {id: "4", name: "篮球"}
                    ]
                };
            }
        })
    </script>
    
    </html>

![d832eec2bede42a588d1fb1146f59618.gif][]

### **4、动态参数** ###

> 从2.6.0开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数
> 
> <a v-bind:\[attrname\]="url"> ... </a>
> 
> 同样地，你可以使用动态参数为一个动态的事件名绑定处理函数
> 
> <button v-on:\[evname\]="dt">点击事件</button>
> 
> 注1：动态参数表达式有一些语法约束，**evName**无效,**evname**有效，回避大写

![18afa84119be40219ce4bdbb9626c618.gif][]

## 四、过滤器 ##

### 1、局部过滤器 ###

new Vue({
    
     filters:{'filterName':function(value){}}
    
    });

> vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：
> 
> 
> 
> \{ \{ name | capitalize \}\}
> 
> 
> 
> <div v-bind:id="rawId | formatId"></div>
> 
> 注1：过滤器函数接受表达式的值作为第一个参数
> 
> 注2：过滤器可以串联
> 
> \{ \{ message | filterA | filterB \}\}
> 
> 注3：过滤器是JavaScript函数，因此可以接受参数：
> 
>  \{ \{ message | filterA('arg1', arg2) \}\}
> 
> 注4：js定义一个类
> 
>  function Stu()\{\};
> 
>  Stu.prototype.add(a,b)\{\};//添加一个新的实例方法
> 
>  Stu.update(a,b)\{\};//添加一个新的类方法

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>过滤器</title>
        
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
    
    <div id="app">
        <h3>局部过滤器基本使用</h3>
        {
       {msg}}<br>
        {
       {msg | singleA}}
        <h3>局部过滤器串行使用</h3><br>
        {
       {msg | singleA | singleB}}
        <h3>局部过滤器传参</h3><br>
        {
       {msg|param(3,5)}}
    </div>
    </body>
    <script type="text/javascript">
        // 绑定边界	ES6具体体现
        new Vue({
            el: '#app',
            data() {
                return {
                    msg: 'python、Java、php、C++'
                };
            },
            methods: {
                handle() {
                    alert("触发事件");
                }
            },
            filters: {
                'singleA': function (val) {
                    return val.substring(0, 6);
                },
                'singleB': function (val) {
                    return val.substring(1, 5);
                },
                'param': function (val, start, end) {
                    return val.substring(start, end);
                }
            }
        })
    </script>
    </html>

![b6d7fbd124c74c09b9b51870dda387fe.png][]

### 2、全局过滤器 ###

Vue.filter('filterName', function (value) {
    
     // value 表示要过滤的内容
    
    });

#### 2.1、配置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();
    };

![2f3ba57a61f745118836ed033ce13ea4.png][]

## 五、计算属性及监听属性 ##

### **1、计算属性** ###

> 计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新
> 
>  computed:\{\}
> 
>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>         <meta charset="UTF-8">
>         <title>计算</title>
>         
>         <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
>         
>         <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
>     </head>
>     <body>
>     <div id="app">
>         单价：<input v-model="price">
>         数量：<input v-model="num">
>         总价：<input v-model="count">
>     </div>
>     </body>
>     <script type="text/javascript">
>     
>         new Vue({
>             el: '#app',
>             data() {
>                 return {
>                     price: 79,
>                     num: 1
>                 }
>             },
>             computed: {
>                 count: function () {
>                     return this.price * this.num
>                 }
>     
>             }
>         })
>     </script>
>     </html>

![cb4d35e923f54c819a057439c3d79bd9.gif][]

### **2、监听属性** ###

> 监听属性 watch，我们可以通过 watch 来响应数据的变化
> 
> watch:\{\}

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>计算属性及监听属性</title>
        
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.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="km"/>
        米：<input v-model="m"/>
    </div>
    </body>
    <script type="text/javascript">
        // 绑定边界	ES6具体体现
        new Vue({
            el: '#app',
            data() {
                return {
                    km: 2,
                    m: 2000
                };
            },
            watch: {
                // v指的是m变量
                m: function (v) {
                    this.km = parseInt(v) / 1000;
                },
                // v指的是km变量
                km: function (v) {
                    this.m = parseInt(v) * 1000;
                }
            }
        })
    </script>
    
    </html>

![948177a689a14917940777b8230fe441.gif][]

### 3、购物车案例 ###

> 利用监听属性和计算属性利用来计算前端的一个案例

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>购物车</title>
        
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
        <style>
            table {
                width: 100%;
                border-collapse: collapse;
            }
    
            th, td {
                padding: 8px;
                text-align: left;
                border-bottom: 1px solid #ddd;
            }
    
            th {
                background-color: #f2f2f2;
            }
    
            h1, p {
                text-align: center;
            }
        </style>
    </head>
    <body>
    <h1>购物车</h1>
    <div id="app">
        <table>
            <thead>
            <tr>
                <th>商品名</th>
                <th>商品价格</th>
                <th>数量</th>
                <th>小计</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>花西币</td>
                <td>{
       {hxbDj}}</td>
                <td>
                     <input type="number" v-model="hxb"/> 
                </td>
                <td>{
       {hxbTotal}}</td>
            </tr>
            <tr>
                <td>眉笔</td>
                <td>{
       {mbDj}}</td>
                <td>
                     <input type="number" v-model="mb"> 
                </td>
                <td>{
       {mbTotal}}</td>
            </tr>
            <tr>
                <td>口红</td>
                <td>{
       {khDj}}</td>
                <td>
                     <input type="number" v-model="kh"> 
                </td>
                <td>{
       {khTotal}}</td>
            </tr>
            <tr>
                <td colspan="3" style="text-align: right;">总计</td>
                <td>{
       {total}}</td>
            </tr>
            </tbody>
        </table>
    </div>
    </body>
    <script type="text/javascript">
        // 绑定边界	ES6具体体现
        new
        Vue({
            el: '#app',
            data() {
                return {
                    hxbDj: 79,
                    mbDj: 10,
                    khDj: 299,
                    hxb: 1,
                    mb: 1,
                    kh: 1,
                };
            },
            computed: {
                hxbTotal() {
                    return this.hxbDj * this.hxb;
                },
                mbTotal() {
                    return this.mbDj * this.mb;
                },
                khTotal() {
                    return this.khDj * this.kh;
                },
                total() {
                    return this.hxbTotal + this.mbTotal + this.khTotal;
                }
            }

> 因为我用的输入框的类型是number类型的所以我就没用按钮的点击事件++--了

![1cf008141ff84026b871d991bad93f74.gif][]

[bad3afffeac04c00a383a1c2f2cf0129.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/30aced50f6c44648bb721020acb7135b.png
[cb124169a6734fc1bd91f98be06d47ba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/fd628281474f493bbdcbdb605cf45d1b.png
[6862380a6f1c46859b11f7525f382ac2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/04fd2f55a9444c949f207d9daa8b4821.png
[dd0fd628e4f248819f2bc19f5b3f7424.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/dce67652afef4386bda4c4d4018c1c7d.png
[437670e830f84613a7f6afac0f653301.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/24ec0d6685354160a2e5f2fe5bea98ba.png
[1d33210f7795430aa4ee41b59f7ccf61.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/d90ccb47c0594ff4a63058ae30ec2175.png
[882a0161e87c4913b136c5a21f397670.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/3ec5ef8b97834278890fccfff2d54487.png
[d832eec2bede42a588d1fb1146f59618.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/25385d8dbfa94c1db861ce7471aba372.png
[18afa84119be40219ce4bdbb9626c618.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/3ef9d3263c2146598bfafdc2b2089af9.png
[b6d7fbd124c74c09b9b51870dda387fe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/96843b061f39437c8b1498a82eec45d1.png
[2f3ba57a61f745118836ed033ce13ea4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/d66e79be4af54f719d2ec057498d197a.png
[cb4d35e923f54c819a057439c3d79bd9.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/6ae632d0548245ee9bae2a1a61e764b6.png
[948177a689a14917940777b8230fe441.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/4cd07f2116484f2f94cb2edda5085503.png
[1cf008141ff84026b871d991bad93f74.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/5d5ff3076d2642188fbfe3999ef70c16.png