这篇文章你将看到以下内容：
- 一个iOS开发视角学习Vue需要学习的一些知识点
Vue实例结构
var vm = new Vue({
//样式表名
el: '#example',
//属性
data: {
message: 'Hello'
},
//计算属性
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]
}
}
},
//属性观察
watch: {
// 如果 `question` 发生改变，这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.getAnswer()
}
},
//实例函数
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
Vue监听实例
Ask a yes/no question:
{{ answer }}
Vue实例生命周期
beforeCreate->created->beforeMount->mounted->beforeUpdate->updated->beforeDestroy->destryed
v-bind
绑定标签字段与Vue对应关系
...
...
v-on
绑定事件与Vue对应关系
...
...
Vue组件
Vue.component('my-component', {
template: ''
})
Class绑定
普通
数组
HTML：
JS：
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
条件
Style绑定
HTML:
JS:
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
v-if
关于是否显示，v-show同样可以达到相同效果，不同的是
v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
注意，v-show 不支持 元素，也不支持 v-else。
v-if 与v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
v-for
HTML:
-
{{ parentMessage }} - {{ index }} - {{ item.message }}
JS:
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
对于对象同样可以使用v-for语法
HTML:
{{ index }}. {{ key }}: {{ value }}
JS:
new Vue({
el: '#v-for-object',
data: {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
当v-for配合v-if同时使用时，相当于在for循环中添加if判断。
2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。
eg.:
TODO LIST的完成例子
HTML:
JS:
Vue.component('todo-item', {
template: '\
\
{{ title }}\
\
\
',
props: ['title']
})
new Vue({
el: '#todo-list-example',
data: {
newTodoText: '',
todos: [
{
id: 1,
title: 'Do the dishes',
},
{
id: 2,
title: 'Take out the trash',
},
{
id: 3,
title: 'Mow the lawn'
}
],
nextTodoId: 4
},
methods: {
addNewTodo: function () {
this.todos.push({
id: this.nextTodoId++,
title: this.newTodoText
})
this.newTodoText = ''
}
}
})
关于数组
Vue为数组提供了很多变异方法，一边观察数组的变化从而更新试图：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
同时，Vue也提供了一些非变异方法，他们不会改变原数组的值而是返回一个新的数组：
- filter()
- concat()
- slice()
在使用上，我们可以用一个新数组替换旧数组，Vue内部做了优化，提高渲染效率。
值得注意的是，由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
应对第一种问题我们可以使用以下三种方式进行值得替换：
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
// Vue.set的全局缩写
vm.$set(vm.items, indexOfItem, newValue)
第二种问题解决方案：
vm.items.splice(newLength)
不仅是数组，对象同样会有Vue检测不到的变化：
Vue 不能检测对象属性的添加或删除
为了解决这个问题我呢们可以调用以下函数：
添加
Vue.set(vm.userProfile, 'age', 27)
vm.$set(vm.userProfile, 'age', 27)
添加多个值时请使用新对象替换就对象的方式：
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
关于Vue中的事件绑定
v-on可以用于给事件绑定回调，回调可以是一个表达式：
HTML:
The button above has been clicked {{ counter }} times.
JS:
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
同样可以是一个方法：
HTML:
JS:
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
另外，greet方法是可以以JS形势直接调用的
example2.greet()
由于此种特性，事件绑定还有一种变形：
HTML:
JS:
new Vue({
el: '#example-3',
methods: {
say: function (message) {
alert(message)
}
}
})
此外，Vue为v-on提供了一系列事件修饰符，用来定制事件的传递
...
...
...
按键修饰符
- .enter
- .tab
- .delete (捕获“删除”和“退格”键)
- .esc
- .space
- .up
- .down
- .left
- .right
v-model
输入框
HTML:
Multiline message is:
{{ message }}
JS:
var app8 = new Vue({
el: '.app-8',
data: {
message: 'Hello Vue!'
}
})
复选框(单个)：
HTML:
JS:
var app9 = new Vue({
el: '.app-9',
data: {
checked: true
}
})
复选框(多个):
HTML:
Checked names: {{ checkedNames }}
JS:
var app10 = new Vue({
el: '.app-10',
data: {
checkedNames: []
}
})
单选框：
HTML:
Picked: {{ picked }}
JS:
var app11 = new Vue({
el: '.app-11',
data: {
picked:""
}
})
选择框：
HTML:
Selected: {{ selected }}
JS:
new Vue({
el: '#app-12',
data: {
selected: ''
}
})
如果 v-model 表达式的初始值未能匹配任何选项，
上述选择也可以用v-for来动态创建
HTML:
Selected: {{ selected }}
JS:
new Vue({
el: '.app-13',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
动态绑定的value值：
修饰符
.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：
.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。
.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
组件
Vue注册全局组件
Vue.component('my-component', {
// 选项
template: 'A custom component!'
})
组件在注册之后，便可以作为自定义元素
HTML:
//(此处需要有根实例引用)
局部注册
你不必把每个组件都注册到全局。你可以通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件：
var Child = {
template: 'A custom component!'
}
new Vue({
// ...
components: {
// 将只在父组件模板中可用
'my-component': Child
}
})
data 必须是函数
构造 Vue 实例时传入的各种选项大多数都可以在组件里使用。只有一个例外：data 必须是函数。
HTML:
使用Prop传递数据
组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。
子组件要显式地用 props 选项声明它预期的数据：
HTML:
关于data与Prop
Prop更像是对外属性，外界可以使用，而data中的字段只能作为私有属性供组件自身使用。
动态Prop绑定
HTML:
单向数据流
Prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。
另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。
在两种情况下，我们很容易忍不住想去修改 prop 中数据：
Prop 作为初始值传入后，子组件想把它当作局部数据来用；
Prop 作为原始数据传入，由子组件处理成其它数据输出。
对这两种情况，正确的应对方式是：
1.定义一个局部变量，并用 prop 的值初始化它：
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}
2.定义一个计算属性，处理 prop 的值并返回：
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。
Prop验证
我们可以为组件的 prop 指定验证规则。如果传入的数据不符合要求，Vue 会发出警告。这对于开发给他人使用的组件非常有用。
要指定验证规则，需要用对象的形式来定义 prop，而不能用字符串数组：
Vue.component('example', {
props: {
// 基础类型检测 (`null` 指允许任何类型)
propA: Number,
// 可能是多种类型
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true
},
// 数值且有默认值
propD: {
type: Number,
default: 100
},
// 数组/对象的默认值应当由一个工厂函数返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
}
}
})
type 可以是下面原生构造器：
- String
- Number
- Boolean
- Function
- Object
- Array
- Symbol
type 也可以是一个自定义构造器函数，使用 instanceof 检测。
当 prop 验证失败，Vue 会抛出警告 (如果使用的是开发版本)。注意 prop 会在组件实例创建之前进行校验，所以在 default 或 validator 函数里，诸如 data、computed 或 methods 等实例属性还无法使用。
非Prop特性
尽管为组件定义明确的 prop 是推荐的传参方式，组件的作者却并不总能预见到组件被使用的场景。所以，组件可以接收任意传入的特性，这些特性都会被添加到组件的根元素上。
添加属性 data-3d-date-picker="true" 之后，它会被自动添加到 bs-date-input 的根元素上。
自定义事件
父控件通过Prop向子控件传递数据，那么子控件又如何与父控件通信呢？
我们可以通过父控件监听子控件事件来实现这一需求，那么就要借助事件接口：
- 使用 $on(eventName) 监听事件
- 使用 $emit(eventName, optionalPayload) 触发事件
eg.:
HTML:
{{ total }}
非父子组件间通信
事实上$emit和$on只是向我们提供了事件监听的接口，并没有将范围限制在父子控件间，在简单的场景下，可以使用一个空的 Vue 实例作为事件总线：
var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
// ...
})
好的，今天的内容就到这里了，有什么问题可以来老司机的个人博客、GitHub或者邮件我。