--- highlight: atom-one-dark --- # Vue2 基础用法全面总结 ## 安装 ```html ``` ## 基本实例 ```html

``` 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的： ```JavaScript var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) ``` 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。 ### 数据与方法当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。 > 这里唯一的例外是使用Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。 ```JavaScript var obj = { foo: 'bar' } Object.freeze(obj) new Vue({ el: '#app', data: obj }) ``` 除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。例如： ```JavaScript var data = { a: 1 } var vm = new Vue({ el: '#example', data: data }) vm.$data === data // => true vm.$el === document.getElementById('example') // => true ``` ### 实例生命周期钩子每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。 > 不要在选项 property 或回调上==使用箭头函数==，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError 错误。 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/11bc763b20624125a8fc541a1ac6f0a9~tplv-k3u1fbpfcp-zoom-1.image) ## 模板语法 Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。如果熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。 ### 插值数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值： ```html Message: {{ msg }} ``` Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。通过使用 `v-once` 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定： ```html 这个将不会改变: {{ msg }} ``` #### 原始HTML 双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，需要使用 `v-html` 指令： ```html

Using mustaches: {{ rawHtml }}

Using v-html directive:

``` 这个 span 的内容将会被替换成为 property 值 ==rawHtml==，直接作为 HTML——会忽略解析 property 值中的数据绑定。注意，你不能使用 `v-html` 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位。 > 站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。尽量只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。 #### Attribute Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 `v-bind` 指令： ```html

``` 对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中： ```html ``` 如果 isButtonDisabled 的值是 `null`、`undefined` 或 `false`，则 disabled attribute 甚至不会被包含在渲染出来的 `

Vue is awesome!

Vue is awesome!

Oh no 😢

Title

Hello!

{{ title }}

{{ title }}

{{ title }}

{{ title }}

{{ post.title }}

{{ post.title }}