{{ message }}
```
```javascript
```
### 数据与方法
通过`data`设置数据
```javascript
data: {
msg: "Hello Vue!",
arr: [1,2,3],
obj: {
a: "a",
b: "b"
}
}
var msg = vm.msg;
vm.arr = [4,5,6];
```
通过`methods`设置方法
```javascript
methods: {
setMessage: function(m){
this.msg = m;
},
getMessage: function(){
return this.msg;
}
}
vm.setMessage("Hello");
var msg = vm.getMessage();
```
还有一些实例数据方法，通过`var vm = new Vue({...})`的返回值来操作
[传送门](https://cn.vuejs.org/v2/api/#%E5%AE%9E%E4%BE%8B%E5%B1%9E%E6%80%A7)
```javascript
//观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。
vm.$watch( expOrFn, callback, [options] );
vm.$watch('obj.a', function (newVal, oldVal) {
console.log("变化前:", oldVal);
console.log("变化后:", newVal);
});
//Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。
vm.$data
//Vue 实例使用的根 DOM 元素。
vm.$el
```
### 生命周期
[传送门](https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90)
### 模板语法，数据绑定
- 文本
数据绑定最常见的形式就是使用`“Mustache”`语法 (双大括号) 的文本插值：
```HTML
Message: {{ msg }}
```
- 原始 HTML
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 `v-html` 指令：
```HTML
Using v-html directive:
``` - 属性 Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 `v-bind` (可简写为`:`) 指令: ```HTML ``` - 使用 `JavaScript` 表达式 迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。 ```javascript {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} ``` 这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。 ```javascript {{ var a = 1 }} {{ if (ok) { return message } }} ``` - 指令 [传送门](https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4) 指令 (Directives) 是带有 v- 前缀的特殊 attribute。 ``` v-text v-html v-show v-if v-else v-else-if v-for v-on(@) v-bind(:) v-model v-slot v-pre v-cloak v-once ``` ### Class 与 Style 绑定 [传送门](https://cn.vuejs.org/v2/guide/class-and-style.html) 操作元素的 `class` 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 `v-bind` 用于 `class` 和 `style` 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是**`对象`**或**`数组`**。 - **`class`**对象语法 我们可以传给 v-bind:class 一个对象，以动态地切换 class： ```HTML ``` - **`class`**数组语法 我们可以把一个数组传给 v-bind:class，以应用一个 class 列表： ```HTML ``` - **`style`**对象语法 v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用**`引号`**括起来) 来命名： ```HTML ``` - **`style`**数组语法 v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上： ```HTML ``` ### 条件渲染 [传送门](https://cn.vuejs.org/v2/guide/conditional.html) - v-if v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 ```HTML
A
B
C
Not A/B/C
```
- 在 `` 元素上使用 v-if 条件渲染分组
因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 `` 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 `` 元素。
```HTML
Title
Paragraph 1
Paragraph 2
``` - v-show 另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样： ```HTMLHello!
``` > 注意: v-show 不支持 `` 元素，也不支持 v-else。 - v-if vs v-show 1. v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 2. v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 3. 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS（属性 display）进行切换。 4. 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。 ### 列表渲染 [传送门](https://cn.vuejs.org/v2/guide/list.html) - v-for 渲染列表 我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。 ```HTML- {{ parentMessage }} - {{ index }} - {{ item.message }}
{{ index }}. {{ name }}: {{ value }}
- {{ item.msg }}
- {{ todo }}
{{ todo }}
``` ### 事件绑定 [传送门](https://cn.vuejs.org/v2/guide/events.html) 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 ```HTMLThe button above has been clicked {{ counter }} times.
...
...
```
### 表单输入绑定
[传送门](https://cn.vuejs.org/v2/guide/forms.html)
你可以用 `v-model` 指令在表单 ``、`
```
### 组件
[Vue指令及组件](https://blog.itmtr.cn/archives/vue-component)
[官方传送门](https://cn.vuejs.org/v2/guide/components.html)