Vue基础教程之-模板语法和计算属性(三)

时间:2021-6-12 作者:qvyue

一、模板语法

1.1 内容

Vue中的元素内容使用mustache模板引擎进行解析。https://github.com/janl/mustache.js

1.2 指令

指令会影响元素的渲染行为,指令始终以v-开头。

1.2.1 基础指令
v-for:循环渲染元素
  • 名称:{{item.name}}
v-html:设置元素的innerHTML,该指令会导致元素的模板内容失效

    
// vm:Vue实例 var vm = new Vue({ el:"#app", data:{ htmlTitle:`

库存管理系统`, }, });

v-on:注册事件。该指令由于十分常用,因此提供了简写@;事件支持一些指令修饰符,如prevent,阻止元素的默认行为。stop,阻止事件冒泡;事件参数会自动传递。

    
阻止元素的默认行为
// vm:Vue实例 var vm = new Vue({ el:"#app", methods:{ hello(){ console.log("Hello"); }, world(){ console.log("World"); }, test(e){ console.log("Test",e); } } });
v-bind:绑定动态属性。该指令由于十分常用,因此提供了简写:

    
// vm:Vue实例 var vm = new Vue({ el:"#app", data:{ imgUrl:"https://upload.jianshu.io/users/upload_avatars/9571610/9dc14649-4d1b-415c-9a07-23b59d116d31.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/300/format/webp", }, });
v-show:控制元素可见度

    
// vm:Vue实例 var vm = new Vue({ el:"#app", data:{ isShow: false, imgUrl: "https://upload.jianshu.io/users/upload_avatars/9571610/9dc14649-4d1b-415c-9a07-23b59d116d31.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/300/format/webp", }, });
Vue基础教程之-模板语法和计算属性(三)
v-show

v-show只是控制元素是否显示,即使元素不显示,元素也会生成,这样虚拟DOM的结构改动会小。

v-if、v-else-if、v-else:控制元素生成
  • 名称:{{item.name}} {{item.stock}} 无货

如果元素不显示,则不生成元素。

v-model:双向数据绑定,常用于表单元素。该指令是v-on和v-bind的复合版

    

{{text}}

// vm:Vue实例 var vm = new Vue({ el:"#app", data:{ text:"AlanChen", }, });
1.2.2 进阶指令
  • v-slot:插槽
  • v-test
  • v-pre
  • v-cloak
  • v-once
  • 自定义指令
1.3 特殊属性

最重要的特殊属性:key,该属性可以干预diff算法,在同一层级,key值相同的节点会进行比对,key值不同的节点则不会。


    
// vm:Vue实例 var vm = new Vue({ el:"#app", data:{ loginType:"mobile", }, });
Vue基础教程之-模板语法和计算属性(三)
手机登录
Vue基础教程之-模板语法和计算属性(三)
切换到邮箱登录

从手机登录方式切换到邮箱登录方式,输入的手机号码也带过来了。用diff算法演示如下:

Vue基础教程之-模板语法和计算属性(三)
input没设置key时

我们要给两个input标签分别设置key

      
Vue基础教程之-模板语法和计算属性(三)
input设置key后

在循环生成的节点中,Vue强烈建议给予每个节点唯一且稳定的key值(一般用数据的ID)


    

系统名称:{{title}}

  • 名称:{{item.name}} {{item.stock}} 无货
// vm:Vue实例 var vm = new Vue({ //配置对象 el:"#app", // css选择器 data:{ //和界面相关的数据 title:"库存管理系统", products:[ {id:"1",name:"iphone",stock:10}, {id:"2",name:"xiaomi",stock:5}, {id:"3",name:"huawei",stock:6}, ], }, methods:{ remove(i){ this.products.splice(i,1); }, changeStock(product,newStock){ if(newStock<0){ newStock = 0; } product.stock = newStock; } }, });
Vue基础教程之-模板语法和计算属性(三)
DOM树

二、计算属性

计算属性和方法的区别:
1、计算属性可以赋值,而方法不行
2、计算属性会进行缓存,如果依赖不变,则直接使用缓存结果,不会重新计算
3、凡是根据已有数据计算得到新数据的无参函数,都应该尽量写成计算属性,而不是方法


    

姓:{{lastName}}

名:{{firstName}}

全名(拼装):{{firstName+lastName}}

全名(计算属性):{{fullName}}

全名(方法):{{getFullName()}}

{{count}}

// vm:Vue实例 var vm = new Vue({ el:"#app", data:{ firstName:"Alan", lastName:"Chen", count:0, }, // 计算属性 computed:{ // fullName(){ // console.log("computed fullName"); // return this.firstName+this.lastName; // } // 计算属性可以赋值 fullName:{ get(){ console.log("computed fullName"); return this.firstName+this.lastName; }, set(val){ console.log(val); this.lastName=val[0]; this.lastName=val.substr(1); } } }, methods:{ getFullName(){ console.log("methods getFullName"); return this.firstName+this.lastName; } } });
Vue基础教程之-模板语法和计算属性(三)
默认效果
Vue基础教程之-模板语法和计算属性(三)
计算属性和methods的区别?

源码

源码 002

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。