我从未见过如此简洁易懂的Vue教程
这是一篇长文，按照我自己的逻辑重新整理一下,包含所有Vue的基础知识点。
但是我更建议你先简略的阅读官方的文档，因为本文具有一定的阅读门槛，同时我也竭尽所能把这门槛降到最低，同样你也可以把本文作为快速回忆教程。
发挥100%的专注力，调动体内所有的热情，你将做到很多令人惊叹的事情
什么是MVVM ？
对比以前的mvc或者mvp，就是把C或者p替换成vm。
vm就是上图，请仔细看一些细节，vm监听DOM，当数据改变的时候，vm会去自动更新视图。
面向未来的组件系统
实现了一些未来的w3c规范(暂不赘述)
Web 组件规范
Slot API
根 vue 实例
let viewModel = new Vue({
// 包含数据、模板、挂载元素、方法、生命周期钩子等选项
})
Hello Wrold 例子
Hello {{ name }}!
// 这是我们的 Model
var model = {
name: 'Vue.js'
}
// 创建一个 Vue 实例或 "viewModel"
// 它连接 View 与 Model
var viewModel = new Vue({
el: '#app',
data: model
})
组件 Component 构造器
vue.extend()返回的只是一个构造器，我们需要通过vue.extend()的返回值和new关键字创建实例。
当我们注册为组件的时候，内部就已经帮我们创建好了实例。
Tip： 如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
let Footer = vue.extend({
template: '
我是页脚组件
'
})
// 注册为全局组件
Vue.component('v-footer', MyComponent)
// 创建根实例
new Vue({
el: '#app'
})
生命周期
上图的就是ViewModel的生命周期，仔细的看其实并不难。目前先了解一下。
在传统软件工程中，特别是QT类桌面端软件，都有软件的生命周期，还有比如Android的生命周期，React的生命周期。
目前的前端趋势正在向此方面靠近。
流程大致像这样
created()->beforeCompile()->compiled()->ready()
->attached()->detached()->beforeDestroy()->destroyed()
绑定
简单的理解就是模板字符串功能，放心的在任何你想用的地方去用，假如错了vue会给你提示。
定界符都是可以修改的
// 模板定界符
Vue.config.delimiters = ['{{', '}}']
// html模板定界符
Vue.config.unsafeDelimiters = ["{{{", "}}}"]
数据的绑定
消息: {{ msg }}
他将永不会改变: {{* msg }}
{{{ raw_html }}}
表达的绑定
不可使用，var/let关键字声明变量，也不能使用if/for流程控制。
{{ number + 1 }} // 做简单的运算
{{ ok ? 'YES' : 'NO' }} // 三元表达式
{{ message.split('').reverse().join('') }} // 调用该对象上的方法
过滤器
对数据进行相应的处理，message为第一个参数、filter为要执行的函数。
{{ message | filter }}
{{ message | filterA | filterB }} // filterB(filterA(message))
{{ message | filterA 'arg1' arg2 }}
// arg2是一个表达式(假设是1+2) filterA(message,arg1,3)
指令
当其表达式的值改变时把某些特殊的行为应用到 DOM 上。
Hello!
v-bind 缩写
计算属性
a={{ a }}, b={{ b }}
var vm = new Vue({
el: '#example',
data: {
a: 1
},
computed: {
// 一个计算属性的 getter
b: function () {
// `this` 指向 vm 实例
return this.a + 1
}
}
})
给计算属性设置setter
computed: {
fullname: {
get: function() {
return this.firstName + ' ' + this.lastName
},
set: function() {
let names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
$watch
通常更优的做法是使用computed计算属性
{{ fullname }}
let vm = new Vue({
data: {
firstName: 'C',
lastName: 'O',
fullName: 'CO'
}
})
vm.$watch('firstname', funciton(val){
this.fullname = val + ' ' + this.lastName
})
vm.$watch('lastname', funciton(val){
this.fullname = this.firstName + ' ' + val
})
// 等价于
let vm = new Vue({
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function(){
return this.firstName + ' ' + this.lastName
}
}
})
Class 与 Style 绑定
vue特意增强了他们，支持对象和数组绑定
Class 对象绑定
data: {
isA: true,
isB: false
}
data: {
classObject: {
'class-a': true
'class-b': false
}
}
//渲染之后
Class 数组语法
data: {
classA: 'class-a'
classB: 'class-b'
}
// 渲染为
// 始终添加classA对应的类名，根据isB的值确认是否添加classB对应的值。
// 在1.0.19+之后，为了更明了的写法，支持数组里面嵌套对象语法
Style 对象语法
CSS 属性名可以用驼峰式(camelCase)或短横分隔命名(kebab-case),自动添加浏览器的前缀。
data: {
activeColor: 'red',
fontSize: 30
}
data = {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
Style 数组语法
data = {
styleObjectA: {
fontSize: '15px'
}
}
条件渲染
** Tip: v-else 元素必须立即跟在 v-if 或 v-show 元素的后面——否则它不能被识别。**
v-if
yes
no
Title
Paragraph 1
Paragraph 2
v-show
不支持 template 元素包裹
Hello!
// 在组件上不能使用 v-else
这可能也是一个组件
if 与 show 之间的战争
如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。
列表渲染
{{ item.message }}
var vm = new Vue({
el: '#list',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar'}
]
}
})
通过$index可以访问索引，且在v-for块内可以访问的到其他属性。
{{ parentMessage }} - {{ $index }} - {{ item.message }}
var vm = new Vue({
el: '#list',
data: {
parentMessage: 'Parent',
items: [
{message: 'Foo'},
{message: 'Bar'}
]
}
})
为索引设置一个别名，且 1.0.17+ 之后可以使用 for of
// 使用一层 template 包裹
{{ item.id }}
{{ item.content }}
数组变动检测
以下是vue提供的一些数组上的方法，能触发视图更新。
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
替换数组
当我们使用一些不改变数组本身的方法的时候(纯函数)，我们可以直接赋值给自身，虽然替换了原始的数组，但是vue不会重新渲染所有，他会去进行对比。
track-by
通过此选项设置参考特征，用特征对比，一样就进行复用
{
items: [
{_uid: '339a99', ... }
{_uid: '2r9c92', ... }
]
}
// _uid 就说明可以复用
track-by="$index"
这样让数据替换高效，此时DOM节点不再映射数组顺序变化，不能同步临时状态。
v-for 包含 元素或者子组件，要小心使用
更新问题
vue不能检测下面数组的变化
直接用索引设置元素，如 vm.items[0] = {}；
修改数据的长度，如 vm.items.length = 0。
(1) 解决方法
vm.items.$set(0, {})
(2) 解决方法
vm.items = []
对象v-for
{{ $key }} : {{ value }}
{{ n }}
方法与事件处理
Greet
let vm = new Vue({
el: '#example',
data: {
name: 'Vue.js'
},
methods: {
greet: function(event) {
alert('hello'+this.name+'!')
console.log(event.target.tagName)
}
}
})
Say Hi
Say What
new Vue({
el: '#example',
methods: {
say: function(msg) {
alert(msg)
}
}
})
事件修饰符
在事件处理器中经常需要调用event.preventDefault 或 event.stopPropagation
// 阻止单击事件冒泡
// 提交事件不再重载页面
// 修饰符可以串联
// 只有修饰符
按键修饰符
enter
tab
delete
esc
space
up
down
left
right
自定义按键别名
// 可以使用 @keyup.f1
Vue.directive('on').keyCodes.f1 = 112
扫一扫
527
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
