Vue学习笔记一

2018-07-16

Vue 实例

创建一个 Vue 实例

所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)并提供相同的生命周期钩子。

1
2
3

var vm = new Vue({
  // 选项
})

数据与方法

Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有属性。属性的值发生改变，视图也会跟着发生改变。

// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

值得注意的是，只有当实例被创建时 data 中存在的属性才是响应式的。也就是说如果你添加一个新的属性，vm.b ，那么 b 的改动将不会触发任何视图的更新，所以如果你需要在后面使用到该属性，需要在 data 设置初始值。
还有一个例外是使用 Object.freeze() ，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。例如：

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})

<div id="app">
  <p>{{ foo }}</p>
  <!-- 这里的 `foo` 不会更新！ -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>

除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

实例生命周期钩子

生命周期图例
注意：不要在选项属性或回调上使用箭头函数，比如 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 之类的错误。

模版语法

插值

文本

数据绑定使用“Mustache”语法 (双大括号), 绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新：

1	<span>Message: {{ msg }}</span>

使用 v-once 指令，你也能执行一次性地插值，当数据改变时，内容不会改变，该节点上的数据也不会发生变化：

1	<span v-once>这个将不会改变: {{ msg }}</span>

原始HTML

使用 v-html 指令：

1	<p>Using v-html directive: <span v-html="rawHtml"></span></p>

注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

特性

作用于 HTML 特性上，使用 v-bind 指令：

1
2
3

<div v-bind:id="dynamicId"></div>
<!-- 缩写 -->
<a :id="dynamicId">...</a>

布尔特性的情况下，它们的存在即暗示为 true:

1	<button v-bind:disabled="isButtonDisabled">Button</button>

如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 特性甚至不会被包含在渲染出来的

使用 JavaScript 表达式

Vue.js 支持 JavaScript 表达式，只能包含单个表达式。

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。

指令

指令 (Directives) 是带有 v- 前缀的特殊特性，指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

1	<p v-if="seen">现在你看到我了</p>

v-if 指令将根据表达式 seen 的值的真假来插入/移除

元素。

参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。

<!-- 参数是元素的特性 -->
<a v-bind:href="url">...</a>

<!-- 参数是监听的事件名 -->
<a v-on:click="doSomething">...</a>

修饰符

修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

1	<form v-on:submit.prevent="onSubmit">...</form>