VUE中的模板语法以及过滤器和双向数据绑定
目录:
- 1. 模板语法
- 1.1 插值
- 1.1.1 文本
- 1.1.2 html
- 1.1.3 属性
- 1.1.4 表达式
- 1.2 指令
- 1.2.1 核心指令
- 1.2.1.1 v-if |v-else-if|v-else
- 1.2.1.2 v-show
- 1.2.1.3 v-for
- 1.2.1.4 v-on|v-model|v-for
- 1.2.1.5 参数 v-bind:href,v-on:click
- 1.2.1.6 简写
- 1.2.1 核心指令
- 1.1 插值
- 2. 过滤器
- 2.1 局部过滤器
- 2.2 全局过滤器
- 3. 计算属性
- 4.监听属性
1. 模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。vue将模板编译成虚拟dom,
结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。
html模板语法:
这是一种基于字符串的模板技术,以字符串和数据为输入,通过用正则表达式将占位符替换为所需数据的方式,构建出完整的 HTML 字符串。
1.1 插值
1.1.1 文本
使用{{msg}}的形式,标签将会被替换成为数据对象(data)上msg属性值,当绑定的数据对象上的msg属性值发生变化时,插值处的值也会发生变化(双向绑定)
示例:上节课的hello vue示例使用的就是插值。
1.1.2 html
{{ }}的方式将数据处理为普通文本,如果要输出html,需要使用v-html指令
示例:
在data中定义一个html属性,其值为html
data: {html: '<input type="text" value="hello"/>'
}
在html中取值
<span v-html="html"></span>
1.1.3 属性
HTML属性中的值应使用v-bind指令。类型与jQuery中的$("#xxx").attr(propName, propVal)
示例,以修改元素的class属性为例:
定义一个样式
<style>
.redClass {font-size: 30px;color: red;
}
</style>
在data中定义一个属性,其值为上面定义的样式名
data: {red: 'redClass'
}
在html使用v-bind指令设置样式
<p>设置之前: aaaa</p>
<p>设置之后: <span v-bind:class="red">aaa</span></p>
在浏览器中可以看到相应的效果
1.1.4 表达式
几种常见的表达式:
{{str.substr(0,6).toUpperCase()}}
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }} 三元运算符
<li v-bind:>我的Id是js动态生成的</li>
示例1:
在html中加入元素,定义表达式
<span>{{str.substr(0,6).toUpperCase()}}</span>
在data中加入一个属性,名为str与html中对应
data: {str: 'hello vue'
}
查看效果:字符串被截取,并转换为大写
示例2:
<span>{{ number + 1 }}</span>
在data中加入一个属性,名为str与html中对应
data: {number: 10
}
在data中定义的number值将会被加1
示例3:
这是一个三元运算,如果ok为true,表达式值为YES ,如果ok为false则表达式值为NO
<span>{{ ok ? 'YES' : 'NO' }}</span>
在data中加入一个属性,名为str与html中对应
data: {ok: true
}
示例4:
演示id属性绑定和动态赋值
<p><input type="text" v-bind:id="bookId"/></br><!--动态生成Id--><input type="text" v-bind:id="'bookList_' + id"/>
</p>
data: {bookId: 'book001',id: 'book002'
}
该示例可以通过开发者工具查看生成的id属性值。
1.2 指令
指令指的是带有“v-"前缀的特殊属性
1.2.1 核心指令
1.2.1.1 v-if |v-else-if|v-else
根据其后表达式的bool值进行判断是否渲染该元素, 指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)
示例:
HTML
<div v-if="type === 'A'">type == A
</div>
<div v-else-if="type === 'B'">type == B
</div>
<div v-else>other value
</div>
JS
var vm = new Vue({el: '#app',data: {type: 'C'}});
可以修改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-show="show === 'yes'">show == yes
</div>
在data中定义show属性
var vm = new Vue({el: '#app',data: {show: 'yes' }
});
修改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-for="item in items">{{item.name}} -- {{item.id}}
</div><!--循环生成下拉列表-->
<div><select ><option v-for="item in items" v-bind:value="item.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.1.4 v-on|v-model|v-for
创建一组多选框,可以获取到用户选择项
<!--
循环生成一组多选按钮,v-model通过vue的双向绑定将用户选择的项保存到
定义的selected组数中
-->
<div v-for="(item,index) in items">{{index}}:<input type="checkbox" v-bind:value="item.id"v-model="selected">{{item.name}}
</div>
<button v-on:click="getSelected()">获取选择</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.1.5 参数 v-bind:href,v-on:click
示例:
<!--参数:href-->
<div><a v-bind:href="url">baidu</a>
</div><!--
参数:动态参数.
attname需要在data中定义,
注意:attname要全部小写!!
-->
<div><a v-bind:[attrname]="url">baidu</a><button v-on:[evname]="clickme">点我看看</button>
</div>
注意:在动态参数中,作为参数的变量名(如:attrname)要全部小写,否则无效 !!
var vm = new Vue({el: '#app',data: {url: 'https://www.baidu.com',attrname:'href',evname: 'click'},methods: {clickme: function() {console.log("点到我了");}}});
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 }}<!--在 v-bind 指令中的使用-->
<div v-bind:id="rawId | formatId"></div>
注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();}}});
2.2 全局过滤器
拷入date.js(日期格式化)放入项目js目录中,在页面中引入。
定义全局过滤器
//全局过滤器
Vue.filter('fmtDate',function(value) {return fmtDate(value, 'yyyy年MM月dd日')
});
过滤器的使用
<div><p>{{date | fmtDate}}</p>
</div>
3. 计算属性
计算属性用于快速计算视图(View)中显示的属性,这些计算将被缓存,并且只在需要时更新
使用场景:当一个属性需要复杂的逻辑运算之后才能获取其值,可以使用计算属性,在一个计算属性中可以完成各种复杂的逻辑,包括运算,方法调用等,只要最终返回一个结果就可以了
声明计算属性的格式:
computed:{xxx:function(){}
}
示例: 使用计算属性,计算书本的总价
定义测试数据,和计算属性,计算属性遍历书本记录,计算总价
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;}}});
计算属性在页面中的使用
<div v-for="book in books">{{book.name}} -> {{book.price}}
</div><div>总价:{{compTotal}}
</div>
关于var 与 let
var声明为全局属性
let为ES6新增,可以声明块级作用域的变量(局部变量)
建议使用let声明变量
4.监听属性
使用场景:我们可以使用监听属性watch来响应数据的变量, 当需要在数据变化时执行异步或开销较大的操作时,这种方式比较有用。回想一下是否做过下拉列表的级联选择?
watch声明语法:
watch: {xxxx: function(val) {//监听器实现}
}
示例: 米和厘米的单位换算
设置监听器:
var vm = new Vue({el: '#app',data: {m: 1,cm: 100},//设置监听属性watch: {m: function(val) {if(val)this.cm = parseInt(val) * 100;elsethis.cm = "";},cm: function(val) {if(val)this.m = parseInt(val) / 100;elsethis.m = "";}}});
HTML中使用v-model实现与数据的双向绑定
什么是数据双向绑定?
vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是vue的精髓之处了。值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的,非UI控件不会涉及到数据双向绑定。 单向数据绑定是使用状态管理工具(如redux)的前提。如果我们使用vuex,那么数据流也是单项的,这时就会和双向数据绑定有冲突,我们可以这么解决。
为什么要实现数据的双向绑定?
在vue中,如果使用vuex,实际上数据还是单向的,之所以说是数据双向绑定,这是用的UI控件来说,对于我们处理表单,vue的双向数据绑定用起来就特别舒服了。
即两者并不互斥, 在全局性数据流使用单项,方便跟踪; 局部性数据流使用双向,简单易操作。
<div><!--注意v-model的双向绑定-->米: <input type="text" v-model="m">厘米: <input type="text" v-model="cm">
</div>
VUE中的模板语法以及过滤器和双向数据绑定相关推荐
- 在Vue 中使用 JSX 语法
Vue 中构建虚拟DOM可以直接使用渲染函数构建虚拟Dom,正常情况下用render函数的参数createElement方法构建虚拟Dom的语法比较繁琐,更方便的是用更接近于模板的JSX语法. Vue ...
- django之:网页伪静态 JsonResponse form表单携带文件数据 CBV源码分析 模板语法传值 模板语法之过滤器 标签 自定义标签函数 过滤器、inclusion_tag模板的继承导入
目录标题 一:网页伪静态 1.定义 2.如何实现 二:视图层 1.视图函数返回值问题 2.视图层返回json格式的数据 3.form表单携带文件数据 4.CBV源码分析 1.CBV和FBV: 2.CB ...
- Vue中如果关闭语法检查
Vue中如果关闭语法检查 在Vue中随便写一个变量,没有使用就会报错,太烦了. == 只需在vue.configs.js文件中配置 一下就行了== const { defineConfig } = r ...
- Vue中如何关闭语法检查
Vue中如何关闭语法检查 首先先创建一个js文件,不可以改名字,就叫vue.config.js vue.config.js中的内容 module.exports={pages:{index:{//入口 ...
- 【猿说VUE】初试模板语法,开启VUE编码之旅
模板语法 官网描述: Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的 ...
- Django 的模板语法之过滤器
后端朝前端页面传递数据的方式# 第一种return render(request,'index.html',{'n':n})# 第二种return render(request,'index.html ...
- jsx怎么往js里传参数_在vue中使用jsx语法的使用方法
什么是JSX? JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到 我为什么要在vue中用JSX? 想折腾一下呗,开玩笑.最开始是因 ...
- Python框架篇之Django(Template基础:模板语法、过滤器filter)
文章目录 一.Template介绍 二.模板语法 三.过滤器(filter) 一.Template介绍 Python 代码编写和 HTML 设计是两项不同的工作,大多数专业的网站开发环境都将他们分配给 ...
- Vue 第一天:模板语法
模板语法 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 H ...
最新文章
- 领域驱动设计门槛很高,没有深厚的面向对象编码能力很难实践成功
- Java程序员新手老手都离不开八大开发工具
- 多元函数严格凹 海塞矩阵正定_海森矩阵的应用:多元函数极值的判定
- nx二次开发c语言,NX二次开发-UFUN API函数编程基础
- iOS-如何返回某个字符串的拼音助记码
- 深度学习系列--1.入坑模型: 线性回归,logistic 回归,softmax分类器
- ubuntu-12.04.4-server安装
- 计算机教师招聘试题(汇总集合版),计算机教师招聘试题(汇总集合版).doc
- WindowsServer2008R2安装中文语言包截图详细教程(附语言包下载资源)
- OPPO R9KM手机刷机救砖线刷包附驱动教程
- MATLAB 排序函数(先按第一列排序(主排序)然后再按第二列排序(次排序))
- 海伦公式c语言double,海伦公式
- Ubuntu关机后自动重启问题的解决方案
- js获取某一天是星期几
- Java资深开发:这不得40k起步呀
- 一个面试我的后端妹子问的405错误
- JAVA架构之路(二)
- TS之namespace与module
- 03 KEY BUZZ
- 【阿朱洞察】中国云计算市场未来3年展望(完善版)
热门文章
- Windows10系统中安装Rational Rose
- Twitter或面临欧盟更严格内容审核;韩国电商巨头用机器人军团替代仓库工人;高通公司副总裁加盟三星丨每日大事件...
- 怎么样启用小米8 探索版 屏幕指纹版的ROOT权限
- c# winform datagridview 根据分辨率自动调整行高
- 自动售货机 顺序图_饮料自动售货机系统的分析与设计
- 程序员改变世界:拼音输入法
- 用python画六边形并填充颜色_如何用Python,画一个正多边形,长度和颜色还是任意的!...
- 使用python做一个简单的计算器
- easy-socket
- 软考高级系统架构设计师:论分布式存储系统架构设计