Vue.js 是什么?
Vue (读音 /vju ː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
Vue 实例
每个 Vue 应用都是通过用 Vue
函数创建一个新的 Vue 实例开始的。
var vm = new Vue({
//选项
})
数据与方法
当一个 Vue 实例被创建时,它就向 Vue 的相应系统中加入了 data 对象,当 data 对象中的属性值发生改变时,视图也会发生“响应”,匹配更新的 data 对象属性值。
var vm = new Vue({
el:"#app",
data:{
message:'Hello Vue!',
title:'this is title'
}
})
当在浏览器控制台输入 vm.message = "Hello World"
时,视图也会被重新渲染。所以 data 中存在的属性是响应式的。
不过例外的是,如果使用的是 Object.freeze()
这会阻止修改现有的属性,也意味着响应系统无法再追踪变化。
var obj = {
foo:'bar'
}
Object.freeze(obj)
new Vue({
el:'#app',
data:obj
})
Vue 生命周期
- 生命周期钩子
有四个:created
,mounted
,updated
和destroyed
。生命周期钩子的this
上下文指向调用它的 Vue 实例
var vm = new Vue({
data:{
a:1
},
created:function(){
// this指向vm实例
console.log('a is:'+this.a);
}
})
- 生命周期图示
模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。(当然后期可以直接写渲染函数 render 来代替)
插值
- 普通文本插值
数据绑定最常见的形式就是使用双大括号的文本插值。
<span>Message:{{ msg }}</span>
当然这里的指令是响应式的,你可以用 v-once
来让插值处的内容不被更新。
<span v-once>这个将不会被改变:{{ msg }}</span>
注意:Vue 也支持完全的 javascript 表达式
{{ number+1 }}
{{ ok ? 'YES' : 'NO'}}
<div v-bind:id="'list-' + id"></div>
- HTML 插值
双大括号只会将数据解释为普通文本,而无法解释为 HTML 代码,如果想插入 HTML 代码的值,需要使用v-html
指令。
<p>用双大括号:{{ rawHtml }}</p>
<p>用v-html指令:<span v-html="rawHtml"></span></p>
=============
rawHtml => <span style="color:red">这里是红色</span>
- 特性
双大括号语法不能作用在 HTML 的特性上,这是就需要使用v-bind
指令。
<button v-bind:disabled="isDisabled">Button</button>
这里如果 isDisabled
为 true 则会显示 Button,否则不显示,当 isDisabled=null
时 button 则没有 disabled 特性
指令
指令是带有 v-
前缀的一些特殊特性,指令一般作用于当个 javascript 表达式(除 v-for
例外),指令的职责是当表达式的值改变时,响应式的作用于 DOM。
<p v-if="seen">现在你可以看到我</p>
- 参数
一些指令能够接收一个"参数",在指令 名称后以:
表示,例如v-bind
可以用于响应式的更新 HTML 特性.
<a v-bind:href="url">...</a>
这里的 href
是参数,v-bind
将 href
特性与表达式 url
绑定.
- 修饰符
修饰符是以半角符号.
指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如:.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
<form v-on:submit.prevent="onSubmit">...</form>
- 缩写
v-bind
的缩写为 :
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
v-on
的缩写为 @
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
计算属性与监听器
为什么要有计算属性
模板内的表达式设计初衷是用于简单运算,如果在模板中放入太多的逻辑会让模板过重且难以维护。在这种使用复杂逻辑的情况下都应该使用 计算属性。
如下:
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
举个栗子
<div id="app">
<p>原始Message:"{{message}}"</p>
<p>反转后的Message:"{{reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
计算属性与方法、侦听属性的比较
- 计算属性 vs 方法
// 在组件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
其实两者执行结果是一样的。但是不同的是,method 在每次触发时都会被调用执行。而计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。
- 计算属性 vs 侦听属性
++ 侦听属性 ++:Vue 提供的一种来观察和响应 Vue 实例上数据变动的一种属性。watch
其实侦听属性相比较于计算属性是重复的,如下栗子:
侦听属性:
<div id="demo">{{fullName}}</div>
var vm = new Vue({
el:'#demo',
data:{
firstName:'Foo',
lastName:'Bar',
fullName:'Foo Bar'
},
watch:{
firstName:function(val){
this.fullName = val+' '+this.lastName
},
lastName:function(val){
this.fullName = this.firstName+' '+val
}
}
})
计算属性:
varr vm = new Vue({
el:'#demo',
data:{
firstName:'Foo',
lastName:'Bar'
},
computed:{
fullName:function(){
return this.firstName+' '+this.lastNAme
}
}
})
注:计算属性默认只有 getter,当如果要 setter 时则需要如下操作
// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// ...
侦听器
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。这里就不再举栗了。
条件渲染和列表渲染
条件渲染 -
v-if
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
列表渲染 -
v-for
我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名。
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
也可以直接使用键值的形式来直接获取属性
<div v-for="(value, key) in object">
{{ key }}: {{ value }}
</div>
第三个参数 index 为索引
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
数组更新
- 变异方法
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
- 替换数组
变异方法 (mutation method),顾名思义,会改变被这些方法调用的原始数组。相比之下,也有非变异 (non-mutating method) 方法,例如:filter(), concat() 和 slice() 。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组:
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})
-
注意事项
由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
1.当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
2.当你修改数组的长度时,例如:vm.items.length = newLength
举个栗子:
var vm = new Vue({ data: { items: ['a', 'b', 'c'] }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
```
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于