vue2.0常用知识点与实践总结

2018-12-26  本文已影响0人  冬猫咚咚锵
  1. vue实例
  2. 模板语法
    2.1 插值
    2.2 指令
  3. 计算属性和侦听器
  4. Class 与 Style 绑定
  5. 条件渲染
  6. 列表渲染：
    v-for
    变更检测
  7. 事件处理
    事件修饰符
    按键修饰符
    自定义事件
  8. 表单输入绑定
    v-model
  9. 组件
    DOM 模板解析注意事项
    data 必须是函数
    组件组合
    编写可复用组件
  10. 过度&动画
  11. 总结
    参考文档

1. vue实例

不要在选项属性或回调上使用箭头函数,比如 
created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。
因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

2. 模板语法

2.1 插值

文本

<span>Message: {{ msg }}</span>

无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。

原始 HTML

为了输出真正的 HTML，你需要使用 v-html 指令.

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

特性

Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令

使用 JavaScript 表达式

每个绑定都只能包含单个表达式

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

2.2 指令

指令 (Directives) 是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

3. 计算属性和侦听器

当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——通常更好的做法是使用计算属性而不是命令式的 watch 回调

4. Class 与 Style 绑定

5. 条件渲染

如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

6. 列表渲染：

v-for

变更检测

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)


// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

为了解决第二类问题，你可以使用 splice：

example1.items.splice(newLength)

7. 事件处理

事件修饰符

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

按键修饰符

有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，它们的内置别名应该是首选。

自定义事件

自定义是指父组件在引用子组件时在其上绑定的事件，其名称由子组件提供，而不是子组件上有个自定义的事件

8.表单输入绑定

v-model

9. 组件

DOM 模板解析注意事项

Vue 只有在浏览器解析、规范化模板之后才能获取其内容，请尽可能使用字符串模板。

data 必须是函数

如果多个组件实例共享了同一个 data 对象，那么改变一个会影响所有组件

组件组合

编写可复用组件

可复用组件应当定义一个清晰的公开接口，同时也不要对其使用的外层数据作出任何假设。

Vue 组件的 API 来自三部分——prop、事件和插槽：

10.过度&动画

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下工具：

11. 总结

根据近期的工作实践，以下几点是常常导致项目问题，但容易被使用者忽略的：

参考文档

上一篇下一篇

猜你喜欢

热点阅读