Vue.js 学习笔记
Posted by Mars . Modified at
学习内容:《Vue.js 官方教程》
1. 声明式渲染
通过new Vue()
可声明一个 Vue应用
,其接受一个对象参数,在这个参数中用el
属性标明Vue对象挂载的HTML元素
,用data
属性记载对象的数据值。
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
2. 指令
在Vue应用所绑定的HTML元素上
,添加的带有v-
前缀的属性叫做指令
。
2.1 v-bind 指令
缩写: :
v-bind
指令用于将HTML上元素的某一属性
与Vue应用内的某一属性
绑定在一起(共同变化)。
<div id="app-2">
<span v-bind:style="cssContent">
你看到的我是蓝色的。
</span>
</div>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
cssContent: 'color: blue;'
}
})
</script>
2.2 v-if 指令 (条件渲染)
元素设置了v-if
指令时,只有在v-if
指令表达式返回true
值时,元素才会被渲染,否则将不被渲染。
<div id="if" v-if='show'>看得到吗?</div>
<script>
let iiff = new Vue({
el: '#if',
data: {
show: false
}
});
// 此時看不到#if這個元素。
</script>
2.3 v-else 指令 (条件渲染之后,如果为假则渲染)
v-else
指令表示条件渲染之后,如果为假则渲染此元素。
(v-else
元素必须紧跟在带v-if
或者v-else-if
的元素的后面,否则它将不会被识别。)
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
2.4 v-else-if 指令 (条件渲染之后,继续添加条件渲染块)
表示 v-if
的“else if 块”。可以链式调用。
(v-else-if
元素必须紧跟在带v-if
或者v-else-if
的元素的后面,否则它将不会被识别。)
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
2.5 v-show 指令 (条件显示)
根据v-show
表达式之真假值,切换元素的 display CSS 属性
。
2.6 v-for 指令 (遍历渲染)
v-for
指令表示利用目标元素的可遍历性,遍历多次渲染其每一内部元素。
【接受数据类型】 Array | Object | number | string | Iterable (2.6 新增)
2.6.1 v-for 指令通常用法
使用语法alias in expression
遍历数组内每一元素。
(不能使用在Vue应用绑定的根元素上,必须是内部的子元素)
<div id='app'>
<div v-for='item in list'>
{{ item.content }}
</div>
</div>
<script>
let app = new Vue({
el: '#app',
data:{
list: [{content:1},{content:2},{content:3}]
}
});
</script>
2.6.2 v-for 指令同时遍历数组的内容和索引
可以用一个圆括号内的两个变量
对目标变量进行遍历,其遍历结果第一个为遍历结果本身
,第二个为该遍历结果在原元素内的索引值
。
<div id='app'>
<div v-for='(a,b) in list'>
{{ a }}
</div>
</div>
<script>
let app = new Vue({
el: '#app',
data:{
list: [{content:1},{content:2},{content:3}]
}
});
</script>
显示结果:
{ “content”: “1” }0
{ “content”: “2” }1
{ “content”: “3” }2
2.6.3 v-for 指令遍历对象属性
也可以用 v-for
来遍历一个对象的属性。
可以使用单独的变量来遍历,也可以使用圆括号括着的两个或三个变量来遍历。
当使用一个变量时,遍历结果为每一属性的值;
当使用两个变量时,遍历结果第一个为每一属性的值,第二个为属性的键名;
使用三个变量时,遍历结果第一个为每一属性的值,第二个为属性的键名,第三个为每一属性的索引。
<ul id="v-for-object" class="demo">
<li v-for="(a,b,c) in object">
{{ a }}/{{ b }}/{{ c }}
</li>
</ul>
new Vue({
el: '#v-for-object',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
})
显示结果:
How to do lists in Vue / title / 0
Jane Doe / author / 1
2016-04-10 / publishedAt / 2
2.6.3 v-for 指令渲染结果的更新机制及key属性的必要性
Vue更新使用v-for渲染的元素列表时,采取“就地更新”
的策略。如果数据项的顺序被改变,Vue不会移动DOM来匹配顺序,而是就地更新每个元素,并确保它们在每个索引位置正确地渲染
。
如果想让Vue跟踪每个节点的身份
,当原始数据项更新,想让Vue对现有元素进行重新排序,则需要为每项绑定一个key属性
。
2.7 v-on 指令
缩写: @
接受数据类型: Function | Inline Statement(内联语句) | Object
传入参数: 原生DOM事件event
什么叫内联语句?
内联语句,就是写在HTML部分的JavaScript语句。
什么叫传入参数?
传入参数,也就是跟在指令+冒号(如v-on)后面的语句,与‘指令:’一同组成元素的属性。
修饰符:
.stop
- 调用 event.stopPropagation()。
.prevent
- 调用 event.preventDefault()。
.capture
- 添加事件侦听器时使用 capture 模式。
.self
- 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias}
- 只当事件是从特定键触发时才触发回调。
.native
- 监听组件根元素的原生事件。
.once
- 只触发一次回调。
.left
- (2.2.0) 只当点击鼠标左键时触发。
.right
- (2.2.0) 只当点击鼠标右键时触发。
.middle
- (2.2.0) 只当点击鼠标中键时触发。
.passive
- (2.3.0) 以 { passive: true } 模式添加侦听器
用法说明:
v-on
指令用于绑定事件监听器。
v-on
用在普通元素上时,只能监听原生 DOM 事件
。用在自定义元素组件上时,也可以监听子组件触发的自定义事件
。
在监听原生 DOM 事件时,方法以event
为唯一的参数。如果使用内联语句,语句可以访问一个 $event property
。 如:v-on:click='show('love you',$event)'
v-on
的修饰符如没有可以省略。
从 Vue 2.4.0 开始,v-on
支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时,是不支持任何修饰器
的。
2.8 v-model 指令
功能:在表单元素或者Vue组件上,创建数据双向绑定。
使用元素限制: <input>、<select>、<textarea>、components
修饰符:
.lazy
- 不监听input
,改为监听change
(在change事件之后才进行同步,也就是输入完毕input失去焦点后)。
.number
- 把输入的字符串转为有效的数字。
.trim
- 首尾空格去除。
具体使用情况说明:
v-model绑定参数的类型,应依据 <input>
标签的type属性或不同标签情况进行选择:
- type=’radio’时,应绑定单个字符串或布尔值,该值绑定为所选择元素的value属性(如有),如果没有value属性则绑定选中与否的Truthy值;
- type=’checkbox’,且
<input>
个数为一个时,应绑定一个布尔值,该值绑定为所选择元素的选中情况(Truthy);- type=’checkbox’,且
<input>
个数为多个时,应绑定一个数组,该数组绑定为所选择元素的value属性组成的字符串数组,排列顺序按点击顺序;- type=’range’,应绑定一个字符串,该值绑定为Range中选中的值;
- type=’color’,应绑定一个格式为’#XXXXXX’的字符串,代表初始颜色Rgb值,该值绑定为Color中选中的值;
- 绑定到
<select>
元素且单选时(multiple= ‘false’),应绑定到单个字符串,如果存在value属性,则该值绑定为value属性值,否则该值绑定为所选择<option>
选项的textContent
;- 绑定到
<select>
元素且多选时(multiple= ‘true’),应绑定到一个数组,如果存在value属性,则该值绑定为value属性值,该值绑定为所选择<option>
选项的textContent组成的字符串数组,排列顺序按option排列先后顺序;
2.9 v-slot 指令
待补充
2.10 v-pre 指令
功能:跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的HTML节点可以加快编译。
2.11 v-cloak 指令
功能:用于控制元素在编译完成之前的显示效果。在编译完毕之前,v-cloak
指令一直保持在元素上。一旦编译完毕,这个指令就消失了。
2.12 v-once 指令
功能:配置了v-once
指令的元素,只能被渲染一次。之后的渲染,这一元素或组件被视为静态内容并跳过。
2.13 v-text 指令
功能:修改绑定元素的textContent
(元素内的文本内容)。
2.14 v-html 指令
功能:修改元素的innerHTML
。可以真正地插入HTML内容。Mustache语法
内的HTML内容只会被识别为文本而不会被浏览器编译。