版权声明:需要引用、发表的朋友请与本人联系 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>