- vue实例
- 模板语法
2.1 插值
2.2 指令 - 计算属性和侦听器
- Class 与 Style 绑定
- 条件渲染
- 列表渲染：
v-for
变更检测 - 事件处理
事件修饰符
按键修饰符
自定义事件 - 表单输入绑定
v-model - 组件
DOM 模板解析注意事项
data 必须是函数
组件组合
编写可复用组件 - 过度&动画
- 总结
参考文档
1. vue实例
- 只有当实例被创建时 data 中存在的属性才是响应式的。这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。
- 除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来
- 生命周期：生命周期钩子的 this 上下文指向调用它的 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 绑定
- v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
5. 条件渲染
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
6. 列表渲染：
v-for
- 可对数组和对象进行遍历，在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。
- 默认用“就地复用”策略，所以建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
变更检测
- 由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：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)
- Vue 不能检测对象属性的添加或删除：
7. 事件处理
事件修饰符
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
按键修饰符
有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，它们的内置别名应该是首选。
自定义事件
自定义是指父组件在引用子组件时在其上绑定的事件，其名称由子组件提供，而不是子组件上有个自定义的事件
8.表单输入绑定
v-model
- v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
- 对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用 input 事件。
9. 组件
DOM 模板解析注意事项
Vue 只有在浏览器解析、规范化模板之后才能获取其内容，请尽可能使用字符串模板。
data 必须是函数
如果多个组件实例共享了同一个 data 对象，那么改变一个会影响所有组件
组件组合
- 父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。
- 当使用的不是字符串模板时，camelCase (驼峰式命名) 的 prop 需要转换为相对应的 kebab-case (短横线分隔式命名)
编写可复用组件
可复用组件应当定义一个清晰的公开接口，同时也不要对其使用的外层数据作出任何假设。
Vue 组件的 API 来自三部分——prop、事件和插槽：
- Prop 允许外部环境传递数据给组件；
- 事件允许从组件内触发外部环境的副作用；
- 插槽允许外部环境将额外的内容组合在组件中。
10.过度&动画
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下工具：
- 在 CSS 过渡和动画中自动应用 class
- 可以配合使用第三方 CSS 动画库，如 Animate.css
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库，如 Velocity.js
11. 总结
根据近期的工作实践，以下几点是常常导致项目问题，但容易被使用者忽略的：
- 意识到生命周期的影响：如prop 会在一个组件实例创建之前进行验证，所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的。
- 关注数据流动的方向：所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不建议。这样可以防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
- 同名优先级：对于绝大多数特性来说，从外部提供给组件的值会替换掉组件内部设置好的值。所以如果传入 type="text" 就会替换掉 type="date" 并把它破坏！庆幸的是，class 和 style 特性会稍微智能一些，即两边的值会被合并起来，从而得到最终的值：form-control date-picker-theme-dark。
- 大小写敏感：组件和prop在引用时大写改-,跟组件和 prop 不同，事件名不存在任何自动化的大小写转换，myEvent 不可能被监听到，我们推荐你始终使用 kebab-case 的事件名。
- 各种默认行为，如一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件
- 变化检测：
- Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的
- 添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象，让它包含原对象的属性和新的属性：this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
- 引用型对象的操作，导致的对其他组件的影响
- 命名规范的要求：当注册组件 (或者 prop) 时，可以使用 kebab-case (短横线分隔命名)、camelCase (驼峰式命名) 或 PascalCase (单词首字母大写命名)，在 HTML 模板中，请使用 kebab-case。
参考文档
- https://cn.vuejs.org/v2/guide/syntax.html
- 《Vue.js实战》
网友评论