书本信息:
<< Vue.js 实战 >> 作者: 梁灏
学习笔记 部分内容摘自书 非原创 侵删
第二章 数据绑定
2.1.4 过滤器
推荐用 computed 来实现
在 {{}} 插值尾部添加一个管道运行算符 | 对数据进行过滤
{{ data | formatDate }
- 串联
{{ message | filterA | filterB }}
- 接收参数
{{ message | filterA('arg1', 'arg2') }}
第三章 计算属性
3.2 计算属性用法
每一个计算属性都包含一个 gettter 和一个 setter, 在我们需要时, 可以提供一个 setter 函数, 当手动修改计算属性的值就行修改一个普通数据那样时, 就会触发 setter 函数, 执行一些自定义的函数
姓名: {{ fullName }}
当执行 app.fullName = 'John Doe'; 时, setter 就会被调用, 数据 firstName 和 'lastName' 都会相对更新, 视图也会更新.
第五章 内置指令
5.1.2 v-once
v-once 不需要表达式, 定义它的组件或组件只渲染一次, 包括元素或组件的所有子节点
首次渲染后, 不再岁数据的变化重新渲染, 将被视为静态内容
{{ message }}
5.2.1 key 属性 元素复用
Vue 在渲染元素时出于效率考虑, 会尽可能的复用已有元素而非重新渲染
如果你不希望这样, 可以使用 key 属性, 可以让你自己决定是否要复用元素, key 的值必须唯一
5.3 列表渲染 v-for
- 数组
{{ index }} - {{ book.name }}
- 对象
{{ index }} - {{ key }}: {{ value }}
- 整数
{{ n }}
结果是 1 2 ...... 10
5.3.2 数组更新
Vue 的核心是数据与视图的双向绑定, 当我们修改数组时, Vue 会检测到数据变化, 所以用 v-for 渲染的也会立即更新. Vue 包含了一组观察数组变异的方法, 使用它们改变数组也会触发视图更新.
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
使用以上方法会改变这些方法调用的原始数组, 有些方法不会改变原始数组
- filter()
- concat()
- slice()
它们返回的是一个新数组, 在使用这些非变异方法时, 可以用新数组来替换原始数组
app.books = app.books.filter(function (item) {
return item.name.match(/JavaScript/);
// 对 books 数组做 filter 返回带有 JavaScript 的项
})
Vue 在检测到数组变化时, 并不是直接重新渲染整个列表, 而是最大化地复用 DOM 元素, 替换的数组中, 含有相同元素的项不会被重新渲染, 因此可以大胆地用新数组来替换旧数组, 不用担心性能问题.
需要注意的是, 以下变动的数组中, Vue 是不能检测到的, 也不会触发视图更新
- 通过索引直接设置项, 比如 `app.books[3] = {...}
- 修改数组长度, 比如 `app.books.length = 1
解决第一个问题可以用两种方法
- 用
set方法
Vue.set(app.books, 3, {
name: 'changedName'
});
// webpack app.&set
this.&set(app.books, 3, {
name: 'changedName'
})
- 用 splice
app.books.splice(3, 1, {
name: 'changedName'
})
第二个问题也可以直接用 splice 来解决
app.books.splice(1);
5.4.2 修饰符
在@绑定的事件后加小圆点 ".", 再更一个后缀来使用修饰符
- .stop
- .prevent
- .capture
- .self
- .once
具体用法
// 阻止单击事件冒泡
// 提交事件不再重载页面
// 修饰符可以串联
// 只有修饰符
// 添加事件侦听器时使用事件捕获模式
// 只当事件在该元素本身(而不是子元素)触发时触发回调
// 只触发一次, 组件同样适用
在表单元素上监听键盘事件时, 还可以使用按键修饰符, 比如按下某个键时猜调用方法
// 只有在 keyCode 是13时代用 submit()
也可以自己配置具体按键
Vue.config.keyCodes.f1 = 112;
// 全局定义后, 就可以使用 @keyup.f1
除了具体的某个 keyCode, 还提供了一些快捷名称
- .enter
- .tab
- .delete (删除和退格)
- .esc
- .space
- .up
- .down
- .left
- .right
这些按键修饰符也可以组合使用, 或者和鼠标一起配合使用
- .ctrl
- .alt
- .shift
- .meta ( Mac 下是 Command, Windows 下是窗口键)
第六章 表单与 v-model
6.3 修饰符
.lazy: 懒加载
在输入框中, v-model 默认实在 input 事件中同步输入框的数据 (除了中文输入法输入的时候), 使用修饰符 .lazy 会转变为在 change 事件中同步
.number: 将输入的 String 转换为 Number
使用
.number可以将输入转换为 Number 类型, 否则虽然你输入的是数字, 但是它的类型其实是 String, 在输入输入框中比较有用
.trim: 自动过滤输入的首尾空格
第七章 组件详解
7.1.2 is 属性挂载组件
Vue 组件的模板在某些情况下会受到 HTML 的限制, 比如
| , | 等这些表格元素, 所以直接在 7.2.3 数据验证 props在组件中, 使用选项 props 来声明需要从父级接收的数据, props 的值可以是两种, 一种是字符串数组, 一种是对象 验证的 type 类型可以是:
type 也可以是一个自定义构造器, 使用 7.3.1 自定义事件 v-on .native 监听原生事件, 监听的是该组件的根元素当给一个 Vue 组件绑定事件的时候需要加上 7..3.2 自定义组件使用
|
|---|