Vue.js开发实践(2)-Vue实例以及插值语法

版权声明：需要引用、发表的朋友请与本人联系 https://blog.csdn.net/pbrlovejava/article/details/84845253

---

更多关于Vue.js的系列文章请点击：Vue.js开发实践(0)-目录页

---

一、Vue实例

1.1、创建实例对象

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

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

每个Vue实例中可以有许多的选项对象，本次涉及到的选项对象就有el，data，template，methods等，它们都各有用处。

1.2、数据关联

当一个 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

当我们不需要数据关联时，可以使用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.js最常用也是最简单的一项，用以对模板中的数据项进行插值操作。

2.1、文本插值

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

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

在这个实例中，el代表的是挂载对象，data表示要传输给挂载对象的数据。

 <div id="vue1">{{ message }}</div>

new Vue({
	el: '#vue1',
	data: {
		message: 'Hello World!'
	}
})

2.2、原始html插值

原始html插值指的是在一个标签中再插入一段html代码，需要使用v-html指令：

 <div id="vue2" v-html="message" > </div>

new Vue({
	el: '#vue2',
	data: {
		message: '<h1>Hello World!</h1>',
	}
})

2.3、属性插值

对于html标签中的属性，如class、id等不能直接使用形如id='{{ message }}'的形式去插值，而是应该使用v-bind指令如：

<div v-bind:id="id"></div>
<div v-bind:class="class"></div>

三、在插值中使用JS表达式

对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持,这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>