企业网站提供商,wordpress主题太大,怎样免费建立个人网站,公司管理流程图大全模板语法 Vue.js 使用了基于 HTML 的模板语法#xff0c;允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML #xff0c;所以能被遵循规范的浏览器和 HTML 解析器解析。vue将模板编译成虚拟dom#xff0c; 结合响应系统#xff0c;V…模板语法 Vue.js 使用了基于 HTML 的模板语法允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML 所以能被遵循规范的浏览器和 HTML 解析器解析。vue将模板编译成虚拟dom 结合响应系统Vue 能够智能地计算出最少需要重新渲染多少组件并把 DOM 操作次数减到最少。
html模板语法 这是一种基于字符串的模板技术,以字符串和数据为输入,通过用正则表达式将占位符替换为所需数据的方式,构建出完整的 HTML 字符串。
插值 文本 使用{{msg}}的形式标签将会被替换成为数据对象data上msg属性值当绑定的数据对象上的msg属性值发生变化时插值处的值也会发生变化双向绑定 示例上节课的hello vue示例使用的就是插值。
html {{}}的方式将数据处理为普通文本如果要输出html需要使用v-html指令 示例 在data中定义一个html属性其值为html
data: { html: input typetext valuehello/ } 1 2 3 在html中取值
span v-htmlhtml/span 1 属性 HTML属性中的值应使用v-bind指令。类型与jQuery中的$(“#xxx”).attr(propName, propVal) 示例以修改元素的class属性为例 定义一个样式
style .redClass { font-size: 30px; color: red; } /style 1 2 3 4 5 6 在data中定义一个属性其值为上面定义的样式名
data: { red: redClass } 1 2 3 在html使用v-bind指令设置样式
p设置之前: aaaa/p p设置之后: span v-bind:classredaaa/span/p 1 2 在浏览器中可以看到相应的效果 表达式 几种常见的表达式
{{str.substr(0,6).toUpperCase()}} {{ number 1 }} {{ ok ? ‘YES’ : ‘NO’ }} 三元运算符 我的Id是js动态生成的 示例1
在html中加入元素定义表达式
span{{str.substr(0,6).toUpperCase()}}/span 在data中加入一个属性名为str与html中对应
data: { str: hello vue } 查看效果字符串被截取并转换为大写 1 2 3 4 5 6 7 8 9 示例2
span{{ number 1 }}/span 在data中加入一个属性名为str与html中对应 data: { number: 10 } 在data中定义的number值将会被加1 1 2 3 4 5 6 示例3
这是一个三元运算如果ok为true表达式值为YES 如果ok为false则表达式值为NO
span{{ ok ? YES : NO }}/span 在data中加入一个属性名为str与html中对应
data: { ok: true } 1 2 3 4 5 6 7 8 示例4
演示id属性绑定和动态赋值
p input typetext v-bind:idbookId//br !--动态生成Id-- input typetext v-bind:idbookList_ id/ /p data: { bookId: book001, id: book002 } 该示例可以通过开发者工具查看生成的id属性值。 1 2 3 4 5 6 7 8 9 10 11 12 指令 指令指的是带有“v-前缀的特殊属性 1.2.1 核心指令 1.2.1.1 v-if |v-else-if|v-else 根据其后表达式的bool值进行判断是否渲染该元素 指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况稍后我们再讨论) 示例
div v-iftype A type A /div div v-else-iftype B type B /div div v-else other value /div JS var vm new Vue({ el: #app, data: { type: C } }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 可以修改data中的type值观察页面的输出。
注 js 之间的区别 一个等号是赋值操作先转换类型再比较先判断类型如果不是同一类型直接为false alert(1 “1”); // true alert(1 “1”); // false
1.2.1.2 v-show 与v-if类似只是不会渲染其身后表达式为false的元素而且会给这样的元素添加css代码style“display:none”。 当v-show 表达式true则显示否则不显示。 注意使用v-show虽然不显示但在页面的dom中是存在的只是display属性为none 示例 在HTML中加入如下内容
div v-showshow yes show yes /div 在data中定义show属性
var vm new Vue({ el: #app, data: { show: yes } }); 1 2 3 4 5 6 7 8 9 10 11 修改show值观察页面显示
1.2.1.3 v-for 循环遍历
遍历数组: v-for“item in items”, items是数组item为数组中的数组元素 遍历对象: v-for“(value,key,index) in stu”, value属性值, key属性名index下标 示例
定义一个div使用v-for指令输出items是vue实例中data中定义的对象数组 !--数组-- div v-foritem in items {{item.name}} -- {{item.id}} /div
!--循环生成下拉列表-- div select option v-foritem in items v-bind:valueitem.id{{item.name}}/option /select /div
!--对象-- div v-for(o,key) in obj {{key}}-{{o}} /div var vm new Vue({ el: #app, data: { itmes:[ {name: zs,age:18}, {name: ww,age:19}, {name: ls,age:20}, {name: zl,age:21} ], obj: { name:张三, age: 21, addr: 湖南长沙 } } }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 1.2.1.4 v-on|v-model|v-for 创建一组多选框可以获取到用户选择项
div v-for(item,index) in items {{index}}:input typecheckbox v-bind:valueitem.id v-modelselected{{item.name}} /div button v-on:clickgetSelected()获取选择/button var vm new Vue({ el: #app, data: { type: C, show: no, items:[ {name: 长沙,id:18}, {name: 昆明,id:19}, {name: 武汉,id:20}, {name: 南京,id:21} ], obj: { name:张三, age: 21, addr: 湖南长沙 }, selected:[] }, methods: { getSelected: function() { console.log(this.selected); } } }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 1.2.1.5 参数 v-bind:href,v-on:click 示例
!--参数href-- div a v-bind:hrefurlbaidu/a /div
!-- 参数动态参数. attname需要在data中定义, 注意attname要全部小写!! -- div a v-bind:[attrname]urlbaidu/a button v-on:[evname]clickme点我看看/button /div 1 2 3 4 5 6 7 8 9 10 11 12 13 14 注意在动态参数中作为参数的变量名如attrname要全部小写否则无效
var vm new Vue({ el: #app, data: { url: https://www.baidu.com, attrname:href, evname: click }, methods: { clickme: function() { console.log(点到我了); } }
}); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1.2.1.6 简写 Vue为v-bind和v-on这两个最常用的指令提供了特定简写
指令 简写 示例 v-bind:xxx :xxx v-bind:href 简写为 :href v-on:xxx xxx v-on:click 简写为 click 2. 过滤器 vue允许自定义过滤器一般用于常见的文本格式化过滤器可用的两个地方双花括号插值与v-bind表达式过滤器应该被添加在js表达式的尾部使用管道运算符|
2.1 局部过滤器 局部过滤器的定义
var vm new Vue({ filters: { filterName: function(value) { //过滤器实现 } } }); 过滤器的使用
!--双花括号中的使用-- {{ name | capitalize }} 1 2 3 4 5 6 7 8 9 10 11 注1过滤器函数接受表达式的值作为第一个参数 注2过滤器可以串联 {{ message | filterA | filterB }} 注3过滤器是JavaScript函数因此可以接受参数 {{ message | filterA(arg1, arg2) }} 示例 div p{{msg | toUpperCase}}/p /div var vm new Vue({ el: #app, data: { msg:hello vue }, //局部过滤器 filters:{ toUpperCase: function(value) { return value.toUpperCase(); } }
}); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 2.2 全局过滤器 拷入date.js日期格式化放入项目js目录中在页面中引入。 定义全局过滤器
//全局过滤器
Vue.filter(fmtDate,function(value) { return fmtDate(value, yyyy年MM月dd日) }); 1 2 3 过滤器的使用
div p{{date | fmtDate}}/p /div 1 2 3 计算属性 计算属性用于快速计算视图View中显示的属性这些计算将被缓存并且只在需要时更新 使用场景当一个属性需要复杂的逻辑运算之后才能获取其值可以使用计算属性在一个计算属性中可以完成各种复杂的逻辑包括运算方法调用等只要最终返回一个结果就可以了 声明计算属性的格式 computed:{ xxx:function(){ } } 1 2 3 4 示例 使用计算属性计算书本的总价 定义测试数据和计算属性计算属性遍历书本记录计算总价
var vm new Vue({ el: #app, data: { //定义测试数据 books: [ {name:红楼梦, price:120}, {name:三国演义, price:100}, {name:水浒传, price:90}, ] }, //计算属性 computed: { compTotal: function() { let sum 0; for(index in this.books) { sum parseInt(this.books[index].price); } return sum; } }
}); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 计算属性在页面中的使用
div v-forbook in books {{book.name}} - {{book.price}} /div
div 总价{{compTotal}} /div 1 2 3 4 5 6 7 关于var 与 let
var声明为全局属性 let为ES6新增可以声明块级作用域的变量局部变量 建议使用let声明变量 4.监听属性 使用场景我们可以使用监听属性watch来响应数据的变量 当需要在数据变化时执行异步或开销较大的操作时这种方式比较有用。回想一下是否做过下拉列表的级联选择
watch声明语法:
watch: { xxxx: function(val) { //监听器实现 } } 1 2 3 4 5 示例 米和厘米的单位换算 设置监听器
var vm new Vue({ el: #app, data: { m: 1, cm: 100 }, //设置监听属性 watch: { m: function(val) { if(val) this.cm parseInt(val) * 100; else this.cm ; }, cm: function(val) { if(val) this.m parseInt(val) / 100; else this.m ; } }
}); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 HTML中使用v-model实现与数据的双向绑定
div !--注意v-model的双向绑定-- 米: input typetext v-modelm 厘米: input typetext v-modelcm /div ———————————————
