Vue之模板语法（上）--插值，指令，过滤器，计算属性，监听属性

最新推荐文章于 2024-04-04 19:37:30 发布
最新推荐文章于 2024-04-04 19:37:30 发布
阅读量322 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54936371/article/details/121048532
版权

一、 插值

1. 文本{{msg}}        

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>    
    </head>
    <body>
        <!--定义边界  -->
        <div id="app">
            <p>文本</p>
            <h3>{{msg}}</h3>
                
        </div>
    </body>
    
    <script type="text/javascript">
        <!-- 绑定边界 Es6的具体体现 -->
        new Vue({
            el:'#app',        
             data(){
                 return {msg:'Hello Vue！1111'}
        }
        
        })
    </script>
</html>

 

2. html

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
        <!--定义边界  -->
        <div id="app">
            <p>文本</p>
            <h3>{{msg}}</h3>
            <p>html串</p>
            <div v-html="htmlstr"></div>
        </div>
    </body>

    <script type="text/javascript">
        <!-- 绑定边界 Es6的具体体现 -->
        new Vue({
            el: '#app',
            data() {
                return {
                    msg: 'Hello Vue！1111',
                    htmlstr:'<h3 style="color:red;">这是一个html片段</h3>'
                };
            }

        })
    </script>
</html>


  3. 属性

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
        <!--定义边界  -->
        <div id="app">
            <p>Vue的属性</p>
            <!-- 所有的原生态的属性，要利用vue的变量，都需要在对应的属性前加v-bind -->
            <a v-bind:href="hrefstr">百度</a>
            <input :value="valuestr" />//v-bind==:
        </div>
    </body>

    <script type="text/javascript">
        <!-- 绑定边界 Es6的具体体现 -->
        new Vue({
            el: '#app',
            data() {
                return {
                    hrefstr:'http://www.baidu.com',
                    valuestr:'小芳说自己漂亮',
                };
            }

        })
    </script>
</html>

 

4. 表达式

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
        <!--定义边界  -->
        <div id="app">
            <p>Vue的表达式</p>
            {{str.substring(0,5).toUpperCase()}}
            小会：{{number+1}}分
            {{ok ? 'yes' : 'no'}}
            <span :id="'goods_id_'+id">xxx</span>
        </div>
    </body>

    <script type="text/javascript">
        <!-- 绑定边界 Es6的具体体现 -->
        new Vue({
            el: '#app',
            data() {
                return {
                    str:'hhh小慧说还可以',
                    number:99,
                    ok:true,
                    id:66
                };
            }

        })
    </script>
</html>       

二、指令

 指的是带有“v-”前缀的特殊属性

1. 核心指令 

         (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的元素，而且会给这样的元素添加

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

          v-bind
          v-on
          v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值   
            v-for/v-model一起绑定[多选]复选框和单选框  

           *v-if和v-show的区别：

  • v-show指令的作用是：根据真假值切换元素的显示状态,是响应式的
  • v-if指令的作用：根据表达式的真假切换元素的显示状态
  • v-show原理是修改元素的的CSS属性(display)来决定实现显示还是隐藏
  • v-if本质是通过操纵dom元素来进行切换显示

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <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>80">优秀</div>
            <div v-else-if="score>60">良好</div>
            <div v-else="score<60">还需努力</div>
            <p>v-show</p>
            <div v-show="score>90">优秀学员</div>
            <div v-if="score>90">优秀学员</div>
            <p>v-for</p>
            <select v-model="hobbyselected">
                <option v-for="h in hobby" :value="h.id" >
                {{h.name}}
                </option>
            </select>
            <input v-model="hobbyselected" />
            
            <div v-for="h in hobby">
            <input :value="h.id" type="checkbox" />
            {{h.name}}
            </div>
            <p>v-on</p>
            <button v-on:click="handle()">触发事件</button>
            <button @click="handle()">触发事件2</button>缩写
        </div>
    </body>

    <script type="text/javascript">
        <!-- 绑定边界 Es6的具体体现 -->
        new Vue({
            el: '#app',
            data() {
                return {
                    score:78,
                    hobby:[
                        {id:"1",name:"吃饭"},
                        {id:"2",name:"睡觉"},
                        {id:"3",name:"敲代码"},
                    ],
                    hobbyselected:3
                };
            },
            methods:{
                handle(){
                    alert("触发事件")
                }
            }

        })
    </script>
</html>

       
  
2. 参数   

        一些指令能够接收一个“参数”，在指令名称之后以冒号表示，例如：
          <a v-bind:href="url">...</a>
          在这里href是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定 
          <a v-on:click="doSomething">...</a>
          在这里click参数是监听的事件名。

3.动态参数

          从2.6.0开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数
          <a v-bind:[attrname]="url"> ... </a>

          同样地，你可以使用动态参数为一个动态的事件名绑定处理函数
          <a v-on:[evname]="doSomething"> ... </a>

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
        <!--定义边界  -->
        <div id="app">
            <p>动态参数</p>
            <button v-on:[evname]="handle">动态参数</button>
        </div>
    </body>

    <script type="text/javascript">
        <!-- 绑定边界 Es6的具体体现 -->
        new Vue({
            el: '#app',
            data() {
                return {
                    evname:'dblclick'/* 点击俩下触发 */
                };
            },
            methods:{
                handle(){
                    alert("触发事件")
                }
                }
            

        })
    </script>
</html>

  ## 初学者了解下即可
4.修饰符   

        修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
          例如：.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
        
          <form v-on:submit.prevent="onSubmit">...</form>
      
          注1：event.preventDefault()方法的作用？
               该方法将通知Web浏览器不要执行与事件关联的默认动作(如果存在这样的动作)

   5. 简写

          Vue为v-bind和v-on这两个最常用的指令，提供了特定简写
          <a v-bind:href="url">...</a>
          <a :href="url">...</a>
  
          <a v-on:click="doSomething">...</a>
          <a @click="doSomething">...</a> 

三、过滤器

  1. 全局过滤器

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

2.局部过滤器

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

vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：
   <!-- 在两个大括号中 -->
   {{ name | capitalize }}

   <!-- 在 v-bind 指令中 -->
   <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>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
        <!--定义边界  -->
        <div id="app">
        <h1>全局：{{msg|all}},局部：{{msg|single}},俩个要：{{msg|all|single}},加参数：{{msg|param(4,5)}}</h1>
        </div>
    </body>

    <script type="text/javascript">
        //全局过滤器
    Vue.filter('all', function (value) {
     // value 表示要过滤的内容
     return value.substring(1,4);
   });
        <!-- 绑定边界 Es6的具体体现 -->
        new Vue({
            el: '#app',
            data() {
                return {
                msg:"小慧最聪明哈哈哈哈！！"
                };
            },
            filters:{
                'single':function(val){
                    return val.substring(2,3)
                },
                'param':function(val,start,end){
                    return val.substring(start,end);
                }
            }
            

        })
    </script>
</html>

 


四、计算属性

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

通过变量计算的属性的属性就叫计算属性，计算属性是没有在变量中定义的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
        <!--定义边界  -->
        <div id="app">
        <p>计算属性</p>
        <table border="1" style="width: 600px;height: 300px;">
            <tr>
                <td>帽子</td>
                <td>30.0</td>
                <td><input v-model="maozi"/></td>
                <td>{{maoziTotal}}</td>
            </tr>
            <tr>
                <td>衣服</td>
                <td>250</td>
                <td><input v-model="yifu"/></td>
                <td>{{yifuTotal}}</td>
            </tr>
            <tr>
                <td>裤子</td>
                <td>150</td>
                <td><input v-model="kuzi"/></td>
                <td>{{kuziTotal}}</td>
            </tr>
            <tr>
                <td>总价</td>
                <td colspan="3">{{total}}</td>
                
            </tr>
        </table>
        
        </div>
    </body>

    <script type="text/javascript">
        
        <!-- 绑定边界 Es6的具体体现 -->
        new Vue({
            el: '#app',
            data() {
                return {
                maozi:1,
                yifu:1,
                kuzi:1
                };
            },
            computed:{
                maoziTotal(){
                    return this.maozi*30;
                },
                yifuTotal(){
                    return this.yifu *250;
                },
                kuziTotal(){
                    return this.kuzi*150;
                },
                total(){
                    return this.maoziTotal+yifuTotal+kuziTotal
                }
            }
            

        })
    </script>
</html>

 

五、监听属性 

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

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
        <!-- vue编码 -->
        <!-- 定义边界 -->
        <div id="app">
           
            <h2><p>监听属性</p></h2>
            大：<input v-model="a" value="2"/>
            小：<input v-model="b" value="300" />
        </div>
    </body>
    <script type="text/javascript">
        Vue.filter('all',function(value){
            return value.substring(0,2);
        });
    
        /* 绑定边界 */
        new Vue({
            el: '#app',
            data() {
                return {
                   
                };
            },
            watch:{
                /* y值的是b变量 */
                b:function(y){
                    this.a=parseInt(y)/1000;
                },
                /* y值的是a变量 */
                a:function(y){
                    this.b=parseInt(y)*1000;
                }
            }
        })
    </script>
</html>

 

 

  * 小结：计算属性和监听属性的区别（面试题）
         自己的理解：
         computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
         computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，
         举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择 
         与watch之间的区别：

       刚开始总是傻傻分不清到底在什么时候使用watch，什么时候使用computed。这里大致说一下自己的理解：
         watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象


        那么对比一下,我们很容易得出computed(计算属性)和watch(监听属性)都存在缓存机制的,性能都处优先选择,那么这两者哪个更好呢?
        上述很容易得出监听属性比计算属性复杂的多!因此在一个项目同时可以使用计算属性,methods和监听属性实现时候我们优先使用计算属性其次是监听属性,最后选择methods!

小依不秃头
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue模板语法-插值详解
01-19
数据绑定最常见的形式就是使用‘Mustache’语法（双打括号）的文本插值： <span>message:{{msg}} 使用v-once指令，也能执行一次性的插值，当主句改变时，插值处的内容不会更新。 但请留心这回影响到该节点上所有的...
VUE基本语法1-插值 属性绑定
qq_41358574的博客
01-22 1541
.1 插值绑定 插值绑定是Vue中最常见、最基本的语法，绑定的内容主要有文本插值和HTML插值两种 文本插值 文本插值的方式十分简单，只要用双大括号（Mustache语法）将要绑定的变量、值、表达式括住就可以实现，Vue将会获取计算后的值，并以文本的形式将其展示出来。 下面一段代码演示了文本插值的基本用法： <style> .profile { display: inline-block; width: 300px; }
Vue语法模板（插值，指令，动态参数，过滤器，计算属性，监听属性）
最新发布
rfghrd的博客
04-04 971
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可免费领取！能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**[外链图片转存中…(img-wQZRAz3l-1712230606514)][外链图片转存中…(img-J5zBjRMp-1712230606514)]
Vue从后往前截取字符串的方法
qq_43151070的博客
03-23 1万+
Vue从后往前截取字符串的方法 在我开发的过程中，我发现的substring方法没有从后往前截取字符串的方法，我的需求是截取字符串后的两位，但是最好的方法应该在后台的js里面写一个方法对字符串进行处理，这里可以使用正则表达式等等，但是因为我已经把后台的代码写好了而不想动它，这时可以在Vue里采用以下方法： ((item.KPIName.split("").reverse().join("")).s...
substring( )的两种用法？
weixin_48037671的博客
03-13 7731
substring( )的两种用法？
Vue基础语法(插值、指令、过滤器、 计算属性和监听属性)
byg
08-01 687
Vue基础语法 插值.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <title>指令</ti...
vue计算属性和监听器实例解析
08-27
本文通过基本实例给大家介绍了vue计算属性和监听器的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue2 v-model/v-text 中使用过滤器的方法示例
10-17
主要介绍了vue2 v-model/v-text 中使用过滤器的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue计算属性computed、事件、监听器watch的使用讲解
10-17
今天小编就为大家分享一篇关于vue计算属性computed、事件、监听器watch的使用讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
VUE过滤器，时间格式化
wakaka112233的博客
05-27 524
1. VUE过滤器 使用vue的过滤器：做输出前的最后一步的处理 Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。 过滤器可以用在两个地方：mustache插值（即{{ }}）、v-bind表达式 分为全局和私有过滤器 两者用法相同，都是{{ name | 过滤器的名字 }}，写法上有区别 1.1 全局过滤器 写在vue实例外面，且必须先定义过滤器，再创建vue实例 vue过滤器的写法 ：Vue.filter('过滤器名称'，function(data)) 1.2 私有过滤器 写在vu
vue通过过滤器实现数据格式化
11-20
一、本节说明 在使用插值表达式的时候，我们通常会有一种需求，就是将数据进行二次的格式化。VUE的过滤器的实现参考了linux的shell命令的管道的实现原理：即上一个命令的输出，是下一个命令的输入。 所以过滤器可以串接使用：{{数据 | 过滤器A | 过滤器B}} 除了在插值表达式中可以使用过滤器，在后文中将要学习到的v-bind指令中也可以使用过滤器。用法是一致的，到时候我们再看一看。 二、 怎么做 全局过滤器（定义一个用于做日期格式化的过滤器） 过滤器的第一个参数是固定的，就是输入的数据。对于{{message|date-format('yyyy-mm-dd')}}而言，参数i
了解Vue，Vue的基础语法
weixin_67696142的博客
07-14 624
Vue的基础语法
vue模板语法上集
weixin_30794491的博客
08-20 132
模板语法上集 1.1 插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达式 Vue提供了完全的JavaScript表达式支持 ...
Vue 页面绑值后截取字符串substring()
热门推荐
每天学习一点点
10-16 2万+
页面绑值后截取字符串 使用 substring(start,end) 方法： 例如：截取前10位字符 {{HotelName.substring(0,9)}}
vue-substring报错
weixin_30539625的博客
01-18 1014
由于异步获取数据,渲染时数据还没出来 转载于:https://www.cnblogs.com/zhizibh/p/8309685.html
Vue 页面绑值后截取字符串substring()、substr()、slice()
大胖东的博客
03-03 1万+
Vue 页面绑值后截取字符串 一、substring() substring()方法返回一个索引和另一个索引之间的字符串 以下是一些示例代码： var str = 'abcdefghij'; console.log('(1, 2): ' + str.substring(1, 2)); // '(1, 2): b' console.log('(1, 1): ' + str.substring(1, 1)); // '(1, 1): ' console.log('(-3, 2): ' + st
vue截取一个字符串_vue 截取字符串
weixin_39562579的博客
12-23 2834
let str = 'abcdef';// 0str = str.slice(0);//返回整个字符串 abcdefstr = str.substring(0);//返回整个字符串 abcdefstr = str.substr(0);//返回整个字符串 abcdef// 使用一个参数str = str.slice(2);//截取第二个之后所有的字符 cdefstr = str.substring(...
2. Vue指令和过滤器
Mr_LiuP的博客
03-04 680
Vue指令与过滤器
vue监听器和计算属性
10-28
其中，监听器可以监听某个数据的变化，并在数据变化时执行相应的操作，而计算属性则是根据已有的数据计算出一个新的值，并将这个新值返回给模板进行渲染。 具体来说，计算属性是一种特殊的属性，它的值是通过计算...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值