Vue学习笔记
目录
一. 模板语法:
1.插值
1.1文本
1.2.原始 HTML
1.3.使用javascript表达式
2.指令
2.1.指令参数
2.2.缩写
二. 计算属性和侦听器
2.1计算属性:
解释:
2.2计算属性缓存vs方法
2.3.计算属性(computed) vs 侦听属性(watch)
2.4计算属性 computed
2.5.计算属性的setter
三. Class 与 Style 绑定
3.1:绑定 HTML Class
四. 条件渲染
4.1.元素上使用 v-if 条件渲染分组
4.1.1.在 template 元素上使用v-if条件渲染分组
4.1.2.v-else
4.1.3.v-else-if
4.1.4.用 key 管理可复用的元素
4.2.v-show
4.3.v-if vs v-show( v-if 与 v-show比较)
4.4:v-if 与 v-for 一起使用
五. 列表渲染
5.1:数组的 v-for
5.1.1: 用 v-for 指令根据一组数组的选项列表进行渲染。
5.1.2: 在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。
5.2:对象的 v-for
5.2.1:可以用 v-for 通过一个对象属性来迭代
5.3: key
5.4:数据更新与检测
5.4.1:变异方法
5.4.2.替换数组
5.5: 对象更改检测注意事项
5.6显示过滤/排序结果
5.7 一段取值范围的 v-for
5.8:v-for on a
一. 模板语法:
1.插值
1.1文本
1.1.1数据绑定使用 :Mustache(胡子语法/双花括号)文本插值
注意:
双大括号会将数据解释为普通文本，而非 HTML 代码
输出html 文本 需要使用v-html指令
Using mustaches: {{ rawHtml }}
Using v-html directive:
1.1.2.标签将会被替代为对应数据对象上 msg 属性的值。
1.1.3.一次性插值 : v-once 指令
当数据改变时，插值处的内容不会更新,
注意:使用 v-once 一次数据绑定 会影响该节点上其他数据
这个将不会改变: {{ msg }}1.2.原始 HTML
使用 v-html 指令 输出 原始html
Using mustaches: {{ rawHtml }}
Using v-html directive:
注意:
直接作为 HTML——会忽略解析属性值中的数据绑定。
Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：
1.3.使用javascript表达式
{{ number + 1 }} //可以算数计算
{{ ok ? 'YES' : 'NO' }} //三木运算
{{ message.split('').reverse().join('') }} //jsAPI 的使用 处理字符串
//字符串 和 变量拼接
2.指令
指令是带有 v- 前缀的特殊属性
指令属性 的 预期值 是 单个 JavaScript 表达式(v-for 是个例外情况)
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
例子如下:
{{msg}}
2.1.指令参数
一些指令能够接收一个“参数”，在指令名称之后以冒号表示
如:
2.1.1.v-bind 属性可以响应式的更新html属性
去往天桥在这里 href 是参数, 告知v-bind 指令 将该元素的 href 属性与 表达式url 的值进行绑定
2.1.2.v-on 指令，它用于监听 DOM 事件
...
2.2.缩写
v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性
当使用 Vue.js 为现有标签添加动态行为时，v- 前缀很有帮助
在构建由 Vue.js 管理所有模板的单页面应用程序 时，v- 前缀也变得没那么重要了
2.2.1:v-bind 缩写
<--! 完整语法 -->
百度
<--! 缩写 -->
百度 2.2.2:v-on 缩写
<--! 完整语法 -->
随便干点啥
<--! 缩写 -->
随便干点啥
二. 计算属性和侦听器
2.1计算属性:
解释:
对于任何复杂逻辑，都应当使用计算属性
基础例子
Original message: "{{ message }}"
computed reverse message: "{{ reversedMessage }}
2.2计算属性缓存vs方法
计算属性是基于它们的依赖进行缓存的,计算属性只有在它的相关依赖发生改变时才会重新求值,
这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，
而不必再次执行函数
下面计算属性将不再更新
computed: {
now: function() {
return Date.now();
}
}
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数
不希望有缓存，用方法来替代
2.3.计算属性(computed) vs 侦听属性(watch)
观察和响应 Vue 实例上的数据变动 使用 侦听属性(不要乱用 watch)
监听属性 watch
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
}
}
})上面代码是命令式且重复的。将它与计算属性的版本进行比较：
2.4计算属性 computed
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName
}
}
})2.5.计算属性的setter
计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
{{fullName}}
现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。
侦听属性:
Ask a yes/no question
answer:{{answer}}
在这个示例中，
1.使用 watch 选项允许我们执行异步操作 (访问一个 API)，
2.限制执行该操作的频率，
3.并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
4.除了 watch 选项之外，您还可以使用命令式的 vm.$watch API。
三. Class 与 Style 绑定
元素的 class 和 style 都是属性 在数据绑定时 用 v-bind 处理它们,只需要通过表达式计算出字符串结果即可,
将 v-bind 用于 class 和 style 时表达式结果的类型除了字符串之外，还可以是对象或数组。
3.1:绑定 HTML Class
对象语法
我们可以传给 v-bind:class 一个对象，以动态地切换 class：
四. 条件渲染
4.1.元素上使用 v-if 条件渲染分组
在 Vue 中，我们使用 v-if 指令实现条件渲染功能
Yes
Yes
No
4.1.1.在 template 元素上使用v-if条件渲染分组
4.1.1.1.因为 v-if 是一个指令，所以必须将它添加到一个元素上。
4.1.1.2.v-if添加在父元素上 父元素包裹的子元素将一并渲染在页面上
Title
Paragraph 1
Paragraph 2
4.1.2.v-else
使用 v-else 指令表示 v-if 的 "else块"
now you see me
now you don't
注意:v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
4.1.3.v-else-if
v-else-if，充当 v-if 的“else-if 块”，可以连续使用
A
B
C
not A/B/C注意: 类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
4.1.4.用 key 管理可复用的元素
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染.
1.允许用户在不同的登录方式之间切换 并且 loginType 将不会清除用户已经输入的内容
UserName
Email
2. toggle loginType 这两个元素是完全独立的，不要复用它们,只需添加一个具有唯一值的 key 属性即可
UserName
Email
注意:
4.2.v-show
用于根据条件展示元素的选项是 v-show 指令
Hello!
相比不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。
v-show 只是简单地切换元素的 CSS 属性 display。
注意 : v-show 不支持 元素，也不支持 v-else。
4.3.v-if vs v-show( v-if 与 v-show比较)
4.3.1.v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
4.3.2.v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
4.3.3.v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
4.3.4: v-show 与 v-if 的适用性
v-if 有更高的切换开销，如果在运行时条件很少改变，则使用 v-if 较好。
v-show 有更高的初始渲染开销。如果需要非常频繁地切换，则使用 v-show 较好
4.4:v-if 与 v-for 一起使用
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
五. 列表渲染
5.1:数组的 v-for
5.1.1: 用 v-for 指令根据一组数组的选项列表进行渲染。
v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。
- {{ item.message }}
5.1.2: 在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。
- {{ parentMessage }} - {{ index }} - {{ item.message }}
可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法
5.2:对象的 v-for
5.2.1:可以用 v-for 通过一个对象属性来迭代
- {{ value }}
5.2.2:可以提供第二个的参数为键名
{{ key }}: {{ value }}
5.2.3:第三个参数为索引
{{ index }}. {{ key }}: {{ value }}
注意: 在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。
5.3: key
1.当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略.
2.如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，
而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
3.这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
4.为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。
5.理想的 key 值是每项都有的且唯一的 id。但它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值 (在这里使用简写)：
5.4:数据更新与检测
5.4.1:变异方法
变异方法 会改变被这些方法调用的原始数组。
Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
push()
打开控制台，然后用前面例子的 items 数组调用变异方法：vm2.items.push({ message: 'Baz' }) 。
pop()
vm2.items.pop({ message: 'Baz' })
shift()
vm2.itmes.shift() //把数组的第一个元素从其中删除，并返回第一个元素的值。
unshift()
vm2.itmes.unshift() //把数组的最后一个元素从其中删除 并返回最后一个元素的值
splice()
vm2.itmes.splice(1,1) //替换数组的第二个元素
sort()
//数组排序
reverse()
//数组反转
5.4.2.替换数组
1.非变异方法
filter()
concat()
slice()
2.这些不会改变原始数组，但总是返回一个新数组。
3.使用非变异方法时，可以用新数组替换旧数组：
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})
4.用一个含有相同元素的数组去替换原来的数组是非常高效的操作,Vue不会丢弃现有 DOM 重新渲染整个列表。
3.注意事项
1.由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
example:
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
2.解决上诉问题
两种方式可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：
1.解决利用索引直接设置一个项时 不会触发状态更新问题
1.Vue.set
Vue.set(vm.items, indexOfItem, newValue)
Vue.set(vm.items, 1, "hoa")
也可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名
vm.$set(vm.items, indexOfItem, newValue)
2.Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
vm1.items.splice(3,1,'dddd') //该方法会返回修改之前的数组
2.解决修改数组的长度时 不会触发状态更新 可以使用 splice
vm.items.splice(newLength)
vm1.items.splice(3) //返回 被切掉的数组元素组成的新数组
5.5: 对象更改检测注意事项
5.5.1:由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的
5.5.2:对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。
可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。
var vm = new Vue({
data : {
userProfile:{
name : 'Anika'
}
}
})
添加一个新的 age 属性到嵌套的 userProfile 对象：
vm.$set(vm.userProfile,'age',27)
5.5.3:为已有对象赋予多个新属性
使用 Object.assign() 或 _.extend() 添加响应式属性
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
5.6显示过滤/排序结果
1.显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。(可以创建返回过滤或排序数组的计算属性)
- {{n}}
2.在计算属性不适用的情况下可以 使用methods方法 ex:如下实例
- {{n}}
5.7 一段取值范围的 v-for
v-for 也可以取整数 在这种情况下，它将重复多次模板
{{n}}
5.8:v-for on a
类似于 v-if，你也可以利用带有 v-for 的 渲染多个元素。
- {{ item.msg }}
- dingidng
5.9:v-优先for with v-if
当 v-for 与 v-if 处于同一个节点时 v-for 的优先级比 v-if 的优先级要高
5.10: 一个组件的 v-for
1. 在自定义组件里，你可以像任何普通元素一样用 v-for
2. 在 Vue.js 2.2.0+ 的版本里，在组件中使用 v-for 时，key 现在是必须的。
3. 任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要用 props
六. 事件处理
6.1事件监听
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
The button above has been clicked {{ count }} times.
6.2: 事件处理方法
v-on 还可以接收一个需要调用的方法名称。
6.3: 内联处理器中的方法
除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：
6.4:事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
Vue.js 为 v-on 提供了事件修饰符 修饰符是由点开头的指令后缀来表示的。
.stop
.prevent
.capture
.self
.once
案例:
...
...
Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。
...
这个 .passive 修饰符尤其能够提升移动端的性能。
注意:
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
.once 修饰符还能被用到自定义的组件事件上,不像其它只能对原生的 DOM 事件起作用的修饰符。
不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为
(5) 按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
Vue 为最常用的按键提供了别名：
全部的按键别名：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
七. 表单输入绑定
你可以用 v-model 指令在表单 及
7.3:多个复选框，绑定到同一个数组
checkNames:{{checkNames}}
7.4单选按钮
选择性别
gender : {{gender}}
7.5 用 v-for 渲染的动态选项：
select:{{ selected }}
八. 组件
组件可以扩展 HTML 元素，封装可重用的代码。
组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素
所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子
注意: 在初始化根实例之前注册组件
8.1:使用组件
8.1.1注册全局组件
8.1.2注册局部组件
通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件
这种封装也适用于其它可注册的 Vue 功能，比如指令
8.1.3: DOM 模板解析注意事项
在特殊的标签当中 使用 is 特性
8.1.4 data 必须是函数
在组件实例中 data 必须是一个函数(不可以是对象)
示例:
Vue.component('my-component', {
template: '{{ message }}',
data: {
message: 'hello'
}
})此时data是一个对象会导致vue停止运行 (控制台发出警告)※在vue组件实例中data选项必须是函数
把一个 prop 的所有对象进行传递 可以通过 v-bind 而不是 v-bind:prop-name
例如: 有一个todo 对象
todo: {
text: 'Learn Vue',
isComplete: false
}然后：
8.2.4:字面量语法 vs 动态语法
错误 : 使用字面量语法传递数值
原因 : 因为它是一个字面量 prop，它的值是字符串 "1" 而不是一个数值
正确 : 如果想传递一个真正的 JavaScript 数值，则需要使用 v-bind，从而让它的值被当作 JavaScript 表达式计算
8.2.5:单项数据流
Prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会(防止子组件无意间修改了父组件的状态,造成误解)
每次父组件更新时，子组件的所有 prop 都会更新为最新值,不应该在子组件内部改变 prop,如果修改了prop vue 会发出警告
问题 : 在两种情况下，我们很容易忍不住想去修改 prop 中数据：
1.Prop 作为初始值传入后，子组件想把它当作局部数据来用；
2.Prop 作为原始数据传入，由子组件处理成其它数据输出。解决办法：
第一个问题:
定义一个局部变量，并用 prop 的值初始化它：
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}第二个问题:
定义一个计算属性，处理 prop 的值并返回：
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}注意: 注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。
8.2.6: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
8.2.7:非 Prop 特性
所谓非 prop 特性，就是指它可以直接传入组件，而不需要定义相应的 prop。
8.3:子组件与父组件通信
8.3.1.使用 v-on 绑定自定义事件
父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
不能用 $on 监听子组件释放的事件，而必须在模板里直接用 v-on 绑定，
{{ total }}