title: vue.js学习笔记(一)
date: 2018-03-28 19:09:16
tags:
- vue.js
- 前端
- javascript
指令
指令(Directives)是带有v-前缀的特殊属性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。
v-if条件判断
Title
Paragraph 1
Paragraph 2
元素当做不可见的包裹元素
A
B
Not A/B/C
v-if是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-show显示判断
Hello!
与v-if不同，v-show只是进行CSS的变换。
v-bind属性绑定
...
绑定url到href，当url有变化可响应dom重渲染，可缩写成
...
v-on事件绑定
...
绑定doSomething函数到a标签的点击事件，可缩写成
...
v-for循环
可循环渲染动态选项，数组形式
与react不同，react需要使用map方法遍历返回组件，vue直接把循环挂在标签属性上。
对象形式
data: {
options: {
jock: '佐客',
tom: '汤姆',
miko: '咪口'
}
}
修饰符
修饰符(Modifiers)是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent修饰符告诉v-on指令对于触发的事件调用 event.preventDefault()：
事件修饰符
-
.prevent=>event.preventDefault() -
.stop=>event.stopPropagation() -
.capture使用事件捕获 -
.self只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的 -
.once事件只触发一次
按键修饰符
全部的按键别名：
- .enter
- .tab
- .delete (捕获“删除”和“退格”键)
- .esc
- .space
- .up
- .down
- .left
- .right
系统修饰键
- .ctrl
- .alt
- .shift
- .meta
在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。
.exact 修饰符
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
鼠标按钮修饰符
- .left
- .right
- .middle
这些修饰符会限制处理函数仅响应特定的鼠标按钮。
计算属性computed
基础例子如下
Original message: "{{ message }}"
Computed reversed message: "{{ reversedMessage }}"
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed:{
reversedMessage:function(){
return this.message.spilt('').reverse().join('')
}
}
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
computed下的reversedMessage方法依赖data下的变量message，当message发生变量，reversedMessage会重新计算结果，与mobx中的computed的作用相同。
以上例子也可通过method属性完成，如下
Reversed message: "{{ reversedMessage() }}"
// 在组件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
不同的是计算属性是基于它们的依赖进行缓存的。
计算属性computed也可同时设置setter和getter方法取代直接写funciton，如下：
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
new Vue({
data: {
watchData: ''
},
watch: {
watchData: function (newData, oldData) {
// doSomething
}
}
})
Class与Style
class的对象形式，与classnames模块类似
class数组形式
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
class对象与数组混合使用
在组件上使用
Vue.component('my-component', {
template: ''
})
结果为：
style对象形式
data: {
activeColor: 'red',
fontSize: 30
}
style数组形式
表单输入绑定
v-model指令在表单input及textarea元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值。
如:
Message is: {{ message }}
多行文本
Multiline message is:
{{ message }}
.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：
.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
组件
组件 (Component) 是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用is特性进行了扩展的原生 HTML 元素。
请注意，对于自定义标签的命名Vue.js不强制遵循W3C规则 (小写，并且包含一个短杠)，尽管这被认为是最佳实践。
全局注册组件
Vue.component('my-component', {
// 选项
})
局部注册组件
var Child = {
template: 'A custom component!'
}
new Vue({
// ...
components: {
// 将只在父组件模板中可用
'my-component': Child
}
})
由于html元素之间不能随意嵌套，如table、ul、ol，所以在自定义组件中使用这些受限制的元素时会导致一些问题，例如：
...
自定义组件is特性：
但是如果代码来自以下字符串模板，则没有这个限制：