1.什么是Vue.js
- Vue,是一套用于构建用户见面的渐进式框架,可以自底向上逐层应用。
- Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
- 当与现代化的工具链以及各种支持类库结合使用时,Vue也完全能偶为复杂的单页应用提供驱动。
2.Vue实例
每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的
var vm=new Vue({
//选项
})
一个Vue应用由一个通过new Vue创建的根Vue实例,以及可选的嵌套的,可复用的组件树组成,所有的Vue组件都是Vue实例,举例,一个todo应用的组件树可以是这样的:
根实例
└─ TodoList
├─ TodoItem
│ ├─ DeleteTodoButton
│ └─ EditTodoButton
└─ TodoListFooter
├─ ClearTodosButton
└─ TodoListStatistics
4.数据与方法
当一个Vue实例被创建时,它将data对象中的所有属性加入到Vue的响应式系统中。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值
// 我们的数据对象
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中存在的属性才是响应式的
这里唯一的例外是使用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>
5.指令
- 带有v-前缀的特殊特性
- 指令特性的值预期是单个JS表达式(v-for是例外)
- 指令的指责是当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM
例如
<p v-if="seen">现在你看到我了</p>
这里v-if指令将根据表达式seen的真假来插入/移除< p >元素
6.使用JS表达式
对所有的数据绑定,Vuw,js都提供了完全的Js表达式支持
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
这些表达式会在所属Vue实例的数据作用域下作为JS被解析,
但是有个限制,每个绑定都只能是单个表达式,所以下面的例子都不会生效
<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}
7.参数
一些指令能够接受一个“参数”,在指令名称之后以 冒号表示
例如,v-bind指令剋有同于响应式地跟新HTML特性
<a v-bind:href="url">...<a/>
在这里href是参数,告知v-bind指令该指令将元素的href特性与表达式url的值绑定
v-on指令同于监听DOM事件
<a v-on:click="doSomthing">...</a>
8.动态参数
从2.6.0开始,可以用方括号括号括起来的JS表达式作为指令的参数
<a v-bind:[attributeName]="url"> ... </a>
如果你的Vue实例有一个data属性attributeName,其值为"href",
那么这个绑定等价于v-bind:href
同样的,可以使用动态参数为一个动态的事件名绑定函数处理
<a v-on:[eventName]="doSomething"> ... </a>
9.计算属性
什么是计算属性
模板内的表达式非常便利,但是设计他们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
计算属性的用法
在一个计算属性里面可以完成各种复杂的逻辑,包括运算,函数调用等,只要最终返回一个结果就可以。
?计算属性的详解
10.条件渲染
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候被渲染
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no ?</h1>
带有v-show的元素始终会被渲染并保留在DOM中,v-show只是简单地切换元素地CSS属性
注意:v-show不支持< template >元素,也不支持v-else
11.变异方法
Vue包含一组 观察数据的变异方法,所以它们也将会触发视图更新
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
非变异方法,这些不会改变原始数组,但总是返回一个新数组,当使用非变异方法时,可以用新数组替换旧数组
- filter()
- contacat()
- slice()
12.由于JS的限制,Vue不能做的事
由于JS限制,Vue不能检测以下变动的数组
- 1.当你利用索引直接设置一个项时,例如
vm.items[indexOfItem] = newValue - 2.当你修改数组的长度时,例如
vm.items.length = newLength