Vue.js 官方文档阅读笔记

2021-03-14 201 阅读1分钟

基础

声明式渲染

指令带有前缀v-, 它们会在渲染的DOM上应用特殊的响应式行为。
```
 <div id="app-2">
     <span v-bind:title="message">
     鼠标悬停几秒钟查看此处动态绑定的提示信息！
     </span>
 </div>
```
```
var app2 = new Vue({
    el: '#app-2',
    data: {
    message: '页面加载于 ' + new Date().toLocaleString()
    }
})
```
在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。

如果你再次打开浏览器的 JavaScript 控制台，输入 app2.message = '新消息'，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。
v-for指令可以绑定数组的数据来渲染一个项目列表
v-model可以实现表单输入和应用状态之间的双向绑定

组件化应用构建

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例

Vue 实例

实例生命周期钩子

生命周期钩子的 this 上下文指向调用它的 Vue 实例。
不要在选项 property 或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止