Vue02基础语法-插值+过滤器+计算属性+计算属性
14天阅读挑战赛
努力是为了不平庸~
目录
1.模板语法
1.1 插值
1.1.1 文本
1.1.2 html
1.1.3 属性
1.1.4 表达式
1.2 指令:指令指的是带有“v-"前缀的特殊属性
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 简写
2. 过滤器
2.1 局部过滤器
示例：
2.2 全局过滤器
3. 计算属性
示例： 使用计算属性，计算书本的总价定义测试数据，和计算属性，计算属性遍历书本记录，计算总价
关于var 与 let
4.监听属性
watch声明语法:
今天就分享到这里了，咱们下个章节再见！！！
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属性值发生变化时，插值处的值也会发生变化（双向绑定）
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)
//定义一个样式
<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实现与数据的双向绑定
<div><!--注意v-model的双向绑定-->米: <input type="text" v-model="m">厘米: <input type="text" v-model="cm">
</div>今天就分享到这里了，咱们下个章节再见！！！
Vue02基础语法-插值+过滤器+计算属性+计算属性相关推荐
- （6）vue.js基础语法—插值表达式
一.vscode插件介绍 在我们演示插值表达式之前,我们先安装这一个VScode给我们提供的插件,它可以将我们书写好的网页通过服务端口的方式进行访问,同时它的好处还有:再修改代码后,不需要我们手动点击 ...
- vue基础-动态class、动态style、vue过滤器、vue计算属性vue基础-动态class、动态style、vue过滤器、vue计算属性
vue基础-动态class.动态style.vue过滤器.vue计算属性 文章目录 vue基础-动态class.动态style.vue过滤器.vue计算属性 vue基础-动态class vue基础-动 ...
- Vue基础语法-计算属性
计算属性 * 计算属性 计算属性写法是个方法,但是使用的时候作为属性使用.计算属性中使用到data中的数据只要发生了变化,计算属性就会重新计算.如果两次获取计算属性的时候,里面使用的属性没有发生变化, ...
- python设计一个函数定义计算并返回n价调和函数_音乐编程语言musicpy教程（第三期） musicpy的基础语法（二）...
这个是我在github上给我的项目musicpy写的wiki,分为数据结构,基础语法,实际应用三大部分来为大家讲解这门音乐编程语言,主要是想给大家写一个musicpy的详细的教程与介绍,目前wiki只 ...
- p怎么调用python的实例属性_Python中类的声明,使用,属性,实例属性,计算属性及继承,重写...
Python中的类的定义以及使用: 类的定义: 定义类 在Python中,类的定义使用class关键字来实现 语法如下:classclassName:"类的注释"类的实体 (当没有 ...
- 大学计算机应用基础与计算思维,计算思维在二本院校计算机应用基础课程中应用.doc...
计算思维在二本院校计算机应用基础课程中应用 计算思维在二本院校计算机应用基础课程中应用 [摘 要]针对学生学习网页设计课程中出现的问题,我们提出了一个解决办法:项目驱动加任务驱动的教学方法.通过学生参 ...
- PTA 基础编程题目集 7-11 分段计算居民水费 C语言
PTA 基础编程题目集 7-11 分段计算居民水费 C语言 为鼓励居民节约用水,自来水公司采取按用水量阶梯式计价的办法,居民应交水费y(元)与月用水量x(吨)相关:当x不超过15吨时,y=4x/3:超 ...
- 计算机思维能力培养的核心是什么,计算机基础教学的核心任务是计算思维能力的培养[J]...
中国大学教学 2010年第9期 计算机基础教学的核心任务是计算思维能力的培养 --<九校联盟(C9)计算机基础教学发展战略联合声明>解读 何钦铭 陆汉权 冯博琴 摘 要:大学计算机基础教学 ...
- 1.8编程基础之多维数组 03 计算矩阵边缘元素之和 python
http://noi.openjudge.cn/ch0108/03/ """ 1.8编程基础之多维数组 03 计算矩阵边缘元素之和 http://noi.openjudg ...
最新文章
- Linux 日志管理（RHEL7）
- python序列类型-Python(第八课，序列类型)
- 阿里开源新一代人机对话模型 ESIM：准确率打破世界纪录，提升至 94.1%！
- C#跨线程操作控件的线程安全方法
- 用fft对信号进行频谱分析实验报告_示波器上的频域分析利器，Spectrum View测试分析...
- 九度oj题目1518：反转链表
- 选择排序、插入排序、冒泡排序、希尔排序算法的总结 - 复杂度、实现和稳定性
- 一文带你剖析LiteOS互斥锁Mutex源代码
- 手机电子词典_网易有道入局，「智能化」能拯救电子词典这个「老古董」吗？...
- oracle逗号分隔函数
- 汉堡王，你不要给我们AI泼脏水
- bootstrap 固定最底部_固定在页面顶部或底部的导航栏《 Bootstrap 3 基础 》
- 华为NP课程笔记27-QINQ概述
- hd Aruba wifi ／ honor
- 怎么把证件照压缩在30K之内？教你三秒快速压缩证件照
- 在学校，你需要知道的8种思维导图的类型及其工作方式
- Visual C++6.0画三维立体图形
- python爬取股票信息_利用Python爬取网易上证所有股票数据（代码
- uniapp uview 图片上传
- html 中精灵图使用