一边看官网,一边记录注意点,详细地还是看官网
- Vue数据所有东西都是响应式的。我们要怎么确认呢?打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 app.message 的值
- app.todos.push({ text: ‘新项目’ }),你会发现列表todos最后添加了一个新项目
- 只有当实例被创建时 data 中存在的属性才是响应式的,所以一开始不能凭空vm.属性,要在当前模块data下声明
- 使用 Object.freeze(),这会阻止修改现有的属性,也意味着响应系统无法再追踪变化
var obj = {
foo: 'bar'
}
Object.freeze(obj)
new Vue({
el: '#app',
data: obj
})
- 除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来,例如 $data $watch $el…
- 不要在选项属性或回调上使用箭头函数,比如 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 之类的错误
<span v-once>这个将不会改变: {{ msg }}</span> // 一次性插值
- 你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值(v-html),绝不要对用户提供的内容使用插值
- Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是,每个绑定都只能包含单个表达式。比如运算逻辑,三元,数据处理等等
<a v-bind:[attributeName]="url"> ... </a>
attributeName 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用。例如,如果你的 Vue 实例有一个 data 属性 attributeName,其值为 “href”,那么这个绑定将等价于 v-bind:href- 模板中放入太多的逻辑会让模板过重且难以维护,就用到计算属性
<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: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
//
<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
- 两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。
- watch 监听器一次单独只能检测一个属性变化,当然多个的话,并列写,所以计算属性会好点,但为什么还要用watch,因为当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
- class
Vue.component('my-component', { template: '<p class="foo bar">Hi</p>' })
<my-component class="baz boo"></my-component>
等价于 <p class="foo bar baz boo">Hi</p>
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
- 用 key 管理可复用的元素
Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外,还有其它一些好处。例如,如果你允许用户在不同的登录方式之间切换:
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素, 不会被替换掉——仅仅是替换了它的 placeholder。即在一个input中写,切换另一个input,内容是一样的。input需要加 key
- v-for 具有比 v-if 更高的优先级
- 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如:vm.items.length = newLength,不能检测此类动态数组 - 事件修饰符可以串联,但位置要注意
- 当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何清理它们。
- 单选和多选,可以自己获取boolean和文本 多选multiple 还有一些input修饰符
- 元素加一个特殊的 is 特性来实现
- Tab页面,官网有,用到:is 动态组件
- slot 插槽 和 具名插槽
- 全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生
- 你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名,当然如果是模拟字符串,就无所谓。
- prop 验证类型
- 自定义事件名 建议全用 kebab-case 的事件名,因为大小写不敏感
- < keep-alive >
- 异步组件 :Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数,且会把结果缓存起来供未来重渲染。
Vue.component(
'async-webpack-example',
// 这个 `import` 函数会返回一个 `Promise` 对象。
() => import('./my-async-component')
)
new Vue({
// ...
components: {
'my-component': () => import('./my-async-component')
}
})
- 处理组件加载
const AsyncComponent = () => ({
// 需要加载的组件 (应该是一个 `Promise` 对象)
component: import('./MyComponent.vue'),
// 异步组件加载时使用的组件
loading: LoadingComponent,
// 加载失败时使用的组件
error: ErrorComponent,
// 展示加载时组件的延时时间。默认值是 200 (毫秒)
delay: 200,
// 如果提供了超时时间且组件加载也超时了,
// 则使用加载失败时使用的组件。默认值是:`Infinity`
timeout: 3000
})
- $listener
- 访问元素组件 $root $parent