框架学习之vue.js

直接<script>引入

直接下载 vue.js 文件并用<script>标签引入，Vue 会被注册为一个全局变量。

vue 实例

1.初始化
由 Vue 函数创建一个实例：

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

2.数据与方法
当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
注意：只有当实例被创建时 data 中存在的属性是响应式的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 数据对象
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 属性，Vue 实例暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：

1
2
3
4
5
6
7
8
9
10
11
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 钩子可以用来在一个实例被创建之后执行代码：

1
2
3
4
5
6
7
8
9
10
new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

还有其他一些函数，如：如 mounted、updated、destroyed。钩子的 this 指向调用它的 Vue 实例。

注意：不要在选项属性或回调上使用箭头函数，比如created: () => console.log(this.a)或vm.$watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例，且 this.a 或 this.myMethod 也会是未定义的。

模板语法

1、文本
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

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

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。一旦绑定的数据对象上 msg 属性发生了改变，插值处的内容就会更新。

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定：

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

2、原始 HTML
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML ，你需要使用 v-html 指令：

1
<div v-html="rawHtml"></div>

这个 div 的内容将会被替换成为属性值 rawHtml，直接作为 HTML——会忽略解析属性值中的数据绑定。

3、特性
Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：

1
<div v-bind:id="dynamicId"></div>

4、使用 JavaScript 表达式
迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

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

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

1
2
3
4
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

5、指令
指令 (Directives) 是带有 v- 前缀的特殊属性。如：

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

这里v-if指令将根据表达式 seen 的值的真假来插入/移除<p>元素。

1
2
3
<a v-bind:href="url"></a>
<!--缩写-->
<a :href="url"></a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
另一个例子是 v-on 指令，它用于监听 DOM 事件：

1
2
3
<a v-on:click="doSomething"></a>
<!--缩写-->
<a @click="doSomething"></a>

在这里参数是监听的事件名。
另外，可以用.指明的特殊后缀，指出一个指令应该以某种特殊方式绑定。

绑定 Class 和 Style

1、v-bind:class
动态切换 class ：

1
<div v-bind:class="{ active: isActive }"></div>

若 isActive 的值为 true 或数据类型转化成 Boolean 后为 true（如非0数字、非空字符串、{}、[]、new Date()、Infinity、-Infinity），则添加名为 active 这个 class。
若 isActive 的值为 false 或数据类型转化成 Boolean 后为 false（如0、””、null、undefined、NaN），则不添加名为 active 这个 class。

v-bind:class指令也可以与普通的 class 属性共存。当有如下模板:

1
2
3
<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

和如下 data：

1
2
3
4
data: {
  isActive: true,
  hasError: false
}

结果渲染为：

1
<div class="static active"></div>

当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 true，class 列表将变为 “static active text-danger”。
绑定的数据对象不必内联定义在模板里：

1
<div v-bind:class="classObject"></div>

1
2
3
4
5
6
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

渲染的结果和上面一样。我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：

1
<div v-bind:class="classObject"></div>

1
2
3
4
5
6
7
8
9
10
11
12
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

用数组传递一个 class 列表：

1
<div v-bind:class="[activeClass, errorClass]"></div>

1
2
3
4
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为：

1
<div class="active text-danger"></div>

条件切换 class 可以用对象语法：

1
<div class="[{ active: isActive },errorClass]"></div>

这样写将始终添加 errorClass，但是只有在 isActive 是 true 时才添加 activeClass。

当在一个自定义组件上使用 class 属性时，这些类将被添加到根元素上面。这个元素上已经存在的类不会被覆盖。例如：

1
2
3
Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

然后在使用它的时候添加一些 class：

1
<my-component class="baz boo"></my-component>

HTML 将被渲染为:

1
2
3
4
5
<p class="foo bar baz boo">Hi</p>
//对于带数据绑定 class 也同样适用
<my-component v-bind:class="{ active: isActive }"></my-component>
//当 isActive 为真值时，HTML 将被渲染成为：
<p class="foo bar active">Hi</p>

2、v-bind:style
CSS 属性名可以用 驼峰式 或 短横线 分隔 (记得用单引号括起来) 来命名。建议直接绑定到一个样式对象通常更好，这会让模板更清晰：

1
<div v-bind:style="styleObject"></div>

1
2
3
4
5
6
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

同样的，对象语法常常结合返回对象的计算属性使用。

1
<div v-bind:style="styleObject"></div>

1
2
3
4
5
6
7
8
9
10
11
12
data: {
  activeColor: 'red',
  fontSize: 30
},
computed: {
	styleObject: function() {
		return {
			color: this.activeColor,
			fontSize: this.fontSize
		}
	}
}

同样，v-bind:style也支持用数组给出 style 列表。

注意：当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

在 2.3.0+ 版本中，支持 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

1
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。