Vue笔记(一)
来源:互联网 发布:php curl下载远程图片 编辑:程序博客网 时间:2024/05/22 10:34
Vue笔记
v-once:
指令,执行一次性插值,也就是说,在数据改变时,插值内容不会随之更新。但是请牢记,这也将影响到同一节点上的所有绑定:
<span v-once>这里的值永远不会改变:{{ msg }}</span>
v-html:
在网站中动态渲染任意的 HTML 是非常危险的,因为这很容易导致网站受到 XSS 攻击。请只对可信内容使用 HTML 插值,绝对不要对用户提供的内容使用 HTML 插值。
computed 属性:
<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p></div>var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 一个 computed 属性的 getter 函数 reversedMessage: function () { // `this` points to the vm instance return this.message.split('').reverse().join('') } }})
computed VS methods
俩种方法效果相同。然而,细微的差异之处在于,computed 属性会基于它所依赖的数据进行缓存。每个 computed 属性,只有在它所依赖的数据发生变化时,才会重新取值(re-evaluate)。这就意味着,只要 message 没有发生变化,多次访问 computed 属性 reversedMessage,将会立刻返回之前计算过的结果,而不必每次都重新执行函数。
相比之下,每当触发重新渲染(re-render)时,method 调用方式将总是再次执行函数。
为什么我们需要将依赖数据缓存起来?假设一种场景,我们有一个高性能开销(expensive)的 computed 属性 A,在 computed 属性的 getter 函数内部,需要遍历循环一个巨大数组,并进行大量计算。然后还有其他 computed 属性直接或间接依赖于 A。如果没有缓存,我们将不可避免地多次执行 A 的 getter 函数,这远多余实际需要执行的次数!然而在某些场景下,你可能不希望有缓存,请使用 method 方法替代。
computed VS watch
Vue 其实还提供了一种更加通用的方式,来观察和响应 Vue 实例上的数据变化:watch 属性。watch 属性是很吸引人的使用方式,然而,当你有一些数据需要随着另外一些数据变化时,过度滥用 watch 属性会造成一些问题 - 尤其是那些具有 AngularJS 开发背景的开发人员。因此,更推荐的方式是,使用 computed 属性,而不是命令式(imperative)的 watch 回调函数。(PS:优先使用computed)
<div id="demo">{{ fullName }}</div>var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } }})
v-bind:class
<div v-bind:class="{ active: isActive }"></div>
上面的语法表示 classactive 的更新将取决于数据属性 isActive 是否为真值 。
多个绑定的情况:
<div class="static" v-bind:class="{ active: isActive, text-danger: hasError }"></div>
我们可以把一个数组传给 v-bind:class ,以应用一个 class 列表:
<div v-bind:class="[activeClass, errorClass]"></div>data: { activeClass: 'active', errorClass: 'text-danger'}
三元显示法
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
条件渲染
<h1 v-if="ok">Yes</h1><h1 v-else>No</h1>
2.1.0+ 新增 v-else-if
<div v-if="type === 'A'"> A</div><div v-else-if="type === 'B'"> B</div><div v-else-if="type === 'C'"> C</div><div v-else> Not A/B/C</div>
v-for列表渲染
<ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li></ul>var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] }})
v-for组件
<my-component v-for="item in items" :key="item.id"></my-component>
现在,在 2.2.0+ 版本,当对组件使用 v-for 时,必须设置 key 属性。
表单
.lazy
在默认情况下, v-model 在 input 事件中同步输入框的值与数据 (除了 上述 IME 部分),但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:
<!-- 在 "change" 而不是 "input" 事件中更新 --><input v-model.lazy="msg" >
.number
如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值:
<input v-model.number="age" type="number">
这通常很有用,因为在 type=”number” 时 HTML 中输入的值也总是会返回字符串类型。
.trim
如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入:
<input v-model.trim="msg">
- Vue笔记(一)
- Vue学习笔记(一)
- Vue 学习笔记(一)
- vue学习笔记(一)
- vue学习笔记(一)
- vue学习笔记(一)
- 三一、vue笔记--新(一)
- vue学习笔记—vue基础(一)
- Vue.js - 学习笔记 (一)
- Vue.js学习笔记(一)
- vue.js学习笔记(一)
- VUE学习笔记(一)基础
- Vue.js(慕课网学习笔记一)
- Vue.js学习笔记(一)
- 工作笔记--vue相关(一)
- Vue学习笔记(一)
- Vue笔记(一)
- Vue学习笔记一
- yarn-3
- UVA
- spring boot 利用分层结构输出简单的Hello world
- 测试方法总结
- 屏幕亮度调节—基于Android_6.0(代码源于Google)
- Vue笔记(一)
- Beginning Spring学习笔记——第2章(一)Spring IoC容器
- 线性筛法与欧拉函数
- maven与Tomcat包冲突问题
- Binary Tree
- 字符串排序 Java编程练习 学堂在线
- js面试题知识点全解(一原型和原型链1)
- Android-Intent传递数据(Bitmap)闪退问题
- Mysql之Copying to tmp table