一.Vue 介绍
Vue (读音 /vjuː/,相似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不一样的是,Vue 被设计为能够自底向上逐层应用。Vue 的核心库只关注视图层,不只易于上手,还便于与第三方库或既有项目整合。 另外一方面,当与现代化的工具链以及各类支持类库结合使用时,Vue 也彻底可以为复杂的单页应用提供驱动。javascript
二.使用方法
下载到本地引用:css
在线引用:vue
npm安装:java
// 最新稳定版
npm install vue
// 安装vue-cli脚手架构建工具
npm install --global vue-cli
三.vue入门指令
vue实例建立
{{msg}}
// 建立 vue 实例
new Vue({
// el 表明的是 页面中的 id值
el: '#app',
// data 是数据 ,与json数据同样
data: {
msg: "hello vue",
}
})
// 在页面就会显示 hello vue
注意:vue 表达式语法是两个花括号{{msg}} 里面写实例中对应的数据名,数据名必须在对应的vue实例之下。github
在写实例vue时 要注意 属性和 属性名之间的空格vue-cli
指令
本质就是自定义属性
Vue中指令都是以 v- 开头
v-text指令
{{msg}}
// 在写实例vue时 要注意 属性和 属性名之间的空格
new Vue({
el: '#app',
data: {
msg: "v-text 测试"
}
})
v-html指令
用法和v-text 类似 可是他能够将HTML片断填充到标签中npm
可能有安全问题, 通常只在可信任内容上使用 v-html,永不用在用户提交的内容上
它与v-text区别在于v-text输出的是纯文本,浏览器不会对其再进行html解析,但v-html会将其当html标签解析后输出。
{{msg}}
let app = new Vue({
el: "#app",
data: {
msg: "普通双标签不会解析span标签",
html: "v-html指令能够渲染解析标签",
text: "v-text 不会解析 标签 跟双花括号同样"
}
})
v-text 和 v-html至关于原生js中的 .text 和 .html 相同 是同样的性质
v-pre指令
显示原始信息跳过编译过程
跳过这个元素和它的子元素的编译过程。
一些静态的内容不须要编译加这个指令能够加快渲染
{{msg}}
new Vue({
el: "#app",
data: {
msg: "v-pre 指令会使该语法表达式不会被识别"
}
})
v-model指令
v-model是一个指令,限制在 、、、components中使用
v-model是一个双向数据绑定指令
双向数据绑定
当数据发生变化的时候,视图也就发生变化
当视图发生变化的时候,数据也会跟着同步变化
{{msg}}
let app = new Vue({
el: "#app",
data: {
msg: "v-model指令测试"
}
})
v-once指令
{{msg}}
new Vue({
el: "#app",
data: {
msg: "v-pre 指令会使该语法表达式不会被识别"
}
})
mvvm概念
MVC 是后端的分层开发概念; MVVM是前端视图层的概念,主要关注于 视图层分离,也就是说:MVVM把前端的视图层,分为了 三部分 Model, View , VM ViewModel
m model
数据层 Vue 中 数据层 都放在 data 里面
v view 视图
Vue 中 view 即 咱们的HTML页面
vm (view-model) 控制器 将数据和视图层创建联系
vm 即 Vue 的实例 就是 vm
v-on指令
{{num}}
普通点击
点击
带参点击
new Vue({
el: "#app",
data: {
num: 0
},
methods: { // methods 存放调用的方法
handlel: function(event) {
console.log(event.target.innerHTML)
console.log(event.target.name)
},
handlel2: function(p, p1, event) {
console.log(p, p1)
console.log(event.target.innerHTML)
// this的指向为当前vue实例 this.num++ 就是将num的值++
this.num++;
}
}
})
拓展:$event 通过对参数的对比,发现 该event传入的是当前标签的对象,咱们可使用该对象获取参数类如获取文本内容 event.target.innerHTML 或者event.target.name
按键修饰符
在作项目中有时会用到键盘事件,在监听键盘事件时,咱们常常须要检查详细的按键。Vue 容许为 v-on 在监听键盘事件时添加按键修饰符
new Vue({
el: "#app",
data: {
},
methods: {
submit: function(event) {
console.log(event.target.value);
},
mouseup: function(event) {
console.log(event.target.value);
}
}
})
自定义按键别名
在Vue中能够经过config.keyCodes自定义按键修饰符别名
我是自定义按键
// 将 a 的 键值自定义成fn ,而后在控件中直接使用fn 通常状况下不会这样使用
Vue.config.keyCodes.fn = 65;
new Vue({
el: "#app",
methods: {
prompt: function(event) {
alert(event.target.value);
}
}
})
keyCode值一览表
虚拟键
十六进制值
十进制值
相应键盘或鼠标键
VK_LBUTTON
01
1
鼠标左键
VK_RBUTTON
02
2
鼠标右键
VK_CANCEL
03
3
Ctrl-Break键
VK_MBUTTON
04
4
鼠标中键
VK_BACK
08
8
Backspace键
VK_TAB
09
9
Tab键
VK_CLEAR
0C
12
Clear键
VK_RETURN
0D
13
Enter键
VK_SHIFT
10
16
Shift键
VK_CONTROL
11
17
Ctrl键
VK_MENU
12
18
Alt键
VK_PAUSE
13
19
Pause键
VK_CAPITAL
14
20
Caps Lock键
VK_ESCAPE
1B
27
Esc键
VK_SPACE
20
32
Space键
VK_PRIOR
21
33
Page Up键
VK_NEXT
22
34
Page Down键
VK_END
23
35
End键
VK_HOME
24
36
Home键
VK_LEFT
25
37
←键
VK_UP
26
38
↑键
VK_RIGHT
27
39
→键
VK_DOWN
28
40
↓键
VK_SELECT
29
41
Select键
VK_PRINT
2A
42
Print键
VK_EXECUTE
2B
43
Execute键
VK_SNAPSHOT
2C
44
Print Screen键
VK_INSERT
2D
45
Ins键
VK_DELETE
2E
46
Del键
VK_HELP
2F
47
Help键
VK_0
0x30
48
0键
VK_1
0x 31
49
1键
VK_2
0x 32
50
2键
VK_3
0x 33
51
3键
VK_4
0x 34
52
4键
VK_5
0x 35
53
5键
VK_6
0x 36
54
6键
VK_7
0x 37
55
7键
VK_8
0x 38
56
8键
VK_9
0x 39
57
9键
VK_A
41
65
A键
VK_B
42
66
B键
VK_C
43
67
C键
VK_D
44
68
D键
VK_E
45
69
E键
VK_F
46
70
F键
VK_G
47
71
G键
VK_H
48
72
H键
VK_I
49
73
I键
VK_J
4A
74
J键
VK_K
4B
75
K键
VK_L
4C
76
L键
VK_M
4D
77
M键
VK_N
4E
78
N键
VK_O
4F
79
O键
VK_P
50
80
P键
VK_Q
51
81
Q键
VK_R
52
82
R键
VK_S
53
83
S键
VK_T
54
84
T键
VK_U
55
85
U键
VK_V
56
86
V键
VK_W
57
87
W键
VK_X
58
88
X键
VK_Y
59
89
Y键
VK_Z
5A
90
Z键
VK_LWIN
5B
91
左Windows键
VK_RWIN
5C
92
右Windows键
VK_APPS
5D
93
应用程序键
VK_SLEEP
5F
95
休眠键
VK_NUMPAD0
60
96
小数字键盘0键
VK_NUMPAD1
61
97
小数字键盘1键
VK_NUMPAD2
62
98
小数字键盘2键
VK_NUMPAD3
63
99
小数字键盘3键
VK_NUMPAD4
64
100
小数字键盘4键
VK_NUMPAD5
65
101
小数字键盘5键
VK_NUMPAD6
66
102
小数字键盘6键
VK_NUMPAD7
67
103
小数字键盘7键
VK_NUMPAD8
68
104
小数字键盘8键
VK_NUMPAD9
69
105
小数字键盘9键
VK_MULTIPLY
6A
106
乘号键
VK_ADD
6B
107
加号键
VK_SEPARATOR
6C
108
分割键
VK_SUBSTRACT
6D
109
减号键
VK_DECIMAL
6E
110
小数点键
VK_DIVIDE
6F
111
除号键
VK_F1
70
112
F1键
VK_F2
71
113
F2键
VK_F3
72
114
F3键
VK_F4
73
115
F4键
VK_F5
74
116
F5键
VK_F6
75
117
F6键
VK_F7
76
118
F7键
VK_F8
77
119
F8键
VK_F9
78
120
F9键
VK_F10
79
121
F10键
VK_F11
7A
122
F11键
VK_F12
7B
123
F12键
VK_F13
7C
124
F13键
VK_F14
7D
125
F14键
VK_F15
7E
126
F15键
VK_F16
7F
127
F16键
VK_F17
80
128
F17键
VK_F18
81
129
F18键
VK_F19
82
130
F19键
VK_F20
83
131
F20键
VK_F21
84
132
F21键
VK_F22
85
133
F22键
VK_F23
86
134
F23键
VK_F24
87
135
F24键
VK_NUMLOCK
90
144
Num Lock键
VK_SCROLL
91
45
Scroll Lock键
VK_LSHIFT
A0
160
左Shift键
VK_RSHIFT
A1
161
右Shift键
VK_LCONTROL
A2
162
左Ctrl键
VK_RCONTROL
A3
163
右Ctrl键
VK_LMENU
A4
164
左Alt键
VK_RMENU
A5
165
右Alt键
v-bind指令
v-bind 指令被用来响应地更新 HTML 属性
/* 定义几组样式 */
.p1Color {
color: blue;
}
.p2Color {
color: darkred;
}
.p1Text {
font-size: 18px;
}
.p1Text {
font-size: 10px;
}
学习 v-bind 指令
{{chgColor}}
new Vue({
el: "#app",
data: {
isColor: true,
isText: true,
color: "yellow",
size: "14px",
chgColor: "关闭样式"
},
methods: {
changeColor: function() {
// 点击事件 关闭开启 p标签的样式
if (this.isColor === true) {
this.isColor = false;
this.chgColor = "开启样式"
} else {
this.isColor = true;
this.chgColor = "关闭样式"
}
}
}
})
v-bind绑定class
/* 定义几组样式 */
.p1Color {
color: blue;
}
.p2Color {
color: darkred;
}
.p1Text {
font-size: 18px;
}
.p1Text {
font-size: 10px;
}
学习 v-bind 指令
{{chgColor}}
学习 v-bind 指令绑定 class
{{chgColor}}
new Vue({
el: "#app",
data: {
colorA: "p1Color",
colorB: 'p2Color',
textA: 'p1Text',
textB: 'p2Text',
chgColor: "切换样式"
},
/*定义 两个 方法切换样式 */
methods: {
changeAColor: function() {
if ("p1Color" === this.colorA) {
this.colorA = 'p2Color';
} else {
this.colorA = 'p1Color';
}
},
changeBColor: function() {
if ("p2Color" === this.colorB) {
this.colorB = 'p1Color';
} else {
this.colorB = 'p2Color';
}
}
}
})
绑定对象和绑定数组 的区别
绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据
绑定数组的时候数组里面存的是data 中的数据
绑定style v-bind:style
v-bind:style 样式绑定 内联样式
v-bind:style 样式绑定 数组绑定
new Vue({
el: "#app",
data: {
/* 在data里面定义几组 样式数据 */
styleObject: {
color: "green",
fontSize: "18px"
},
colorB:"green",
fontSize:"18px",
styleA: {
color: "red"
},
styleB: {
fontSize: "28px"
}
}
})
分支循环
v-if指令
{{msg}}
{{msg2}}
点我
new Vue({
el: "#app",
data: {
flag: true, // 设置标志 为true 用于页面判断
msg: "我出来了",
msg2: "我消失了"
},
methods: {
changeClick: function() {
if (this.flag === true) {
this.flag = false;
} else {
this.flag = true;
}
}
}
})
v-show指令
v-show判断为true时我显示了
v-show为flase时我隐藏
{{msg}}
{{msg2}}
点我
new Vue({
el: "#app",
data: {
flag: true, // 设置标志 为true 用于页面判断
msg: "我出来了",
msg2: "我消失了"
},
methods: {
changeClick: function() {
if (this.flag === true) {
this.flag = false;
} else {
this.flag = true;
}
}
}
})
v-show 和 v-if的区别
v-show本质就是标签display设置为none,控制隐藏
v-show只编译一次,后面其实就是控制css,而v-if不停的销毁和建立,故v-show性能更好一点。
v-if是动态的向DOM树内添加或者删除DOM元素
v-if切换有一个局部编译/卸载的过程,切换过程当中合适地销毁和重建内部的事件监听和子组件
v-for循环指令
id: {{item.id}}
name: {{item.name}}
age: {{item.age}}
new Vue({
el: "#app",
// 准备 循环模拟数据
data: {
items: [{
id: 1,
name: "李四",
age: 20
},
{
id: 2,
name: "王五",
age: 19
},
{
id: 3,
name: "张飞",
age: 33
},
]
}
})
注意点:
不推荐同时使用 v-if 和 v-for
当 v-if 与 v-for 一块儿使用时,v-for 具备比 v-if 更高的优先级。
"="和""和"="的区别
我是双等于 双等于 不严谨 普通的数字1能够等于字符串"1"
我是双等于 双等于 不严谨 普通的数字1能够等于字符串"1"
new Vue({
el: "#app",
data: {
// 定义一个普通的1 一个字符类型的1
num: 1,
strNum: '1'
},
})
四.Vue选项卡案例
{{title.title}}
new Vue({
el: "#app",
// 定义图片样式
data: {
flagId: 1,
showImg: "display: block;",
tableLists: [{
id: 1,
title: "选项卡1",
path: "img/3Dbg01.jpg"
}, {
id: 2,
title: "选项卡2",
path: "img/3Dbg02.jpg"
}, {
id: 3,
title: "选项卡3",
path: "img/3Dbg03.jpg"
}, ]
},
methods: {
// 每点击一次修改flagId的值为传入的值
change: function(titleId) {
this.flagId = titleId;
}
}
})
参考demo