常用js框架之vue.js(深入二:杂项)
来源:互联网 发布:linux离线下载软件 编辑:程序博客网 时间:2024/06/09 19:05
妈蛋,写了一大半给弄没了,又重写。
1.数据绑定语法。
前面用过{{}},可以替换文本,也可以替换属性值中的文本比如<input id = "{{id}}">
{{{}}}三重花括号则可以替换html,有点6啊。
也可以插入表达式{{a+1}}
过滤器我们前面用过了{{value|filter1|filter2}},同时也可以带参数{{ message | filterA ‘arg1’ arg2 }}
指令、参数、修饰符 <a v-bind:href.literal="/a/b/c"></a>
。v-bind是指令表示执行什么操作,href是参数表明要操作的对象,literal是修饰符表名操作限制。
指令也可以缩写 v-bind:href 可以写作:href v-on:click可以缩写成@click
2.计算属性。
前面用过表达式{{a+1}},当我们的表达式没这么简单,比如计算一个位置在球面的坐标,一行代码搞不定,这时候就要用到计算属性。
两种方式:
一是使用vue基类的watch方法
var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }})vm.$watch('firstName', function (val) { this.fullName = val + ' ' + this.lastName})
此时watch监听data属性中的firstname字段,当其有变化时自动执行后面的方法,val代表firstname当前值。
二是使用vue基类的computed:{}属性
var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } }})
3.Class 与 Style 绑定
vue模板也可以用作样式绑定。还记得外部样式class和内部样式style吗?
绑定class时使用 v-bind:class,分为对象绑定和数组绑定
<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>data: { isA: true, isB: false}//渲染为:<div class="static class-a"></div>//当 isA 和 isB 变化时,class 列表将相应地更新。例如,如果 isB 变为 true,class 列表将变为<div class="static class-a class-b"></div>//你也可以直接绑定数据里的一个对象:<div v-bind:class="classObject"></div>data: { classObject: { 'class-a': true, 'class-b': false }}
此为对象绑定,是动态切换样式的好办法。数组样式v-bind:class=”[classObject1,classObject2]”很明显可以组合不同样式
绑定style时使用 v-bind:style,也是分为对象绑定和数组绑定
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>data: { activeColor: 'red', fontSize: 30}//直接绑定到一个样式对象通常更好,让模板更清晰:<div v-bind:style="styleObject"></div>data: { styleObject: { color: 'red', fontSize: '13px' }}
数组绑定类似class的用法
4.条件渲染不说了 v-if v-else v-show前面都用过了
5.列表渲染v-for也用过了,适用于单个li的模板,如果是多个li,就使用template v-for
<ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider"></li> </template></ul>
列表模板经常要对其数据进行操作,考虑以下vue实例
var vm = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] }})
对数组items进行操作的方式很多,还记得原生js的数组操作吗?这里类似,不过有所区别。
vue提供了某些操作的变异方法,这些变异方法直接修改了原数组,让页面实时刷新。
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
也有非变异方法:
如 filter(), concat() 和 slice(),不会修改原始数组而是返回一个新数组。在使用非变异方法时,可以直接用新数组替换旧数组:
example2.items = example2.items.filter(function (item) { return item.message.match(/Foo/)})
可能你觉得这将导致 Vue.js 弃用已有 DOM 并重新渲染整个列表——幸运的是并非如此。 Vue.js 实现了一些启发算法,以最大化复用 DOM 元素,因而用另一个数组替换数组是一个非常高效的操作。
还有track-by,注意刚才我们看到vue对列表渲染是有做优化的,尽可能的复用,track-by也是出于这个考虑的,意思是根据什么特征来进行复用。
例如,假定数据为:{ items: [ { _uid: '88f869d', ... }, { _uid: '7496c10', ... } ]}然后可以这样给出提示:<div v-for="item in items" track-by="_uid"> <!-- content --></div>然后在替换数组 items 时,如果 Vue.js 遇到一个包含 _uid: '88f869d' 的新对象,它知道它可以复用这个已有对象的作用域与 DOM 元素。
同时,还记得v-for里面可以使用$index吗?所以track-by="$index"
也是可以的,简单地以对应索引的新值刷新。据说也有坑,暂时还没体验到。
6.方法与事件处理器
方法处理器v-on:click=”say(‘hi’)” 前面用过了,不多说。
有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法:
<button v-on:click="say('hello!', $event)">Submit</button>// ...methods: { say: function (msg, event) { // 现在我们可以访问原生事件对象 event.preventDefault() }}
虽然这样可以写dom事件,但是将dom事件跟业务逻辑混在一起是很蛋疼的,有没办法分开?
有,事件修饰符。Vue.js 为 v-on 提供两个 事件修饰符:.prevent 与 .stop
所以以上代码完全可以改写为:v-on:click.prevent=”say(‘hello!’)”
event.preventDefault() 或 event.stopPropagation()可以分别用.prevent 与 .stop修饰符改写。
1.0.16 添加了两个额外的修饰符:
<!-- 添加事件侦听器时使用 capture 模式 --><div v-on:click.capture="doThis">...</div><!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 --><div v-on:click.self="doThat">...</div>
也有按键修饰符
记住所有的 keyCode 比较困难,Vue.js 为最常用的按键提供别名:
<!-- 同上 --><input v-on:keyup.enter="submit"><!-- 缩写语法 --><input @keyup.enter="submit">全部的按键别名:
enter
tab
delete
esc
space
up
down
left
right
使用 v-on 有几个好处:
a.扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
b.因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。
c.当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。
7.表单控件绑定vue,这里不多说,大概讲的是各种表单控件如何绑定vue,好处是表单控件的值被模板化后动态更新。
- 常用js框架之vue.js(深入二:杂项)
- 常用js框架之vue.js(深入一:Vue实例)
- 常用js框架之vue.js(深入三:组件1)
- 常用js框架之vue.js入门
- 常用js框架之vue.js(深入四:组件2,slot内容分发,编译作用域,动态切换组件)
- Vue.js常用的语法(二)
- 前端之js框架-vue
- Vue.js学习系列(十九)--常用指令(二)
- Vue.js入门(二)——常用指令
- Vue.js 学习(二)
- vue.js学习(二)
- Vue.js 实用技巧(二)
- Vue.js 实用技巧(二)
- Vue.js 实用技巧(二)
- vue.js入门(二)
- node.js 之 express框架+MongoDB(前端使用vue)
- 前端框架之Vue.js学习总结
- Vue.js框架练习之购物车
- android open failed: EACCES (Permission denied)
- android MediaScanner 详解
- python 中对配置文件的解析 ConfigParser & ConfigObj
- NE
- Unity3D自学笔记——脚本生命周期
- 常用js框架之vue.js(深入二:杂项)
- linux系统下修改文件夹目录权限FTP服务器搭建
- PHP开启opcache方法
- java NIO-短笔记
- 产品经理(PM)素质与技能初总结
- 究竟怎样写代码才算是好代码
- opengl环境在 vs2015和win10中的环境配置
- Ubuntu16.04安装配置JDK1.8
- Android简易闹钟实现