java vk减号_Vue入门经常使用指令
一.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
java vk减号_Vue入门经常使用指令相关推荐
- java vk减号_[原]在全局鼠标钩子中模拟鼠标右键单击
//bSwap:BOOL型 //为TRUE为切换左右键功能,为FALSE为恢复原左右键功能 ::SwapMouseButton(bSwap); 可以使用RegisterHotKey()注册一个热键,在 ...
- JVM从入门到精通（五）： Java运行时数据区和常用指令
JVM Runtime Data Area and JVM Instructions Java运行时数据区以及JVM指令 i=i++结果为8 i=++i结果为9 一个class的生命周期 以下面的规范 ...
- 尚硅谷Java零基础极速入门七天版笔记
Java零基础极速入门 文章目录 Java零基础极速入门 1 Java快速入门 1.1计算机语言 1.2 Java语言 1.3 JVM 1.4 环境配置 2 基础语法 2.1 变量 2.2 标识符 2 ...
- Java学习路线从入门到入土
Java学习路线从入门到入土 Java学习路线从入门到入土 Java学习路线从入门到入土 简介 Java基础课程 第一阶段 第一部分:Java开发介绍 第二部分:Java数组 第三部分:Java面向对 ...
- java和php哪个运行更快,java和php哪个入门快？-php教程
跟着互联网的高速倒退,愈来愈多的人开端抉择处置较量争论机行业,而想要处置相干工作的话,理解相干编程言语也是必备的一项技艺.可是有不少冤家正在抉择要学习的编程言语时就被难到了,想晓得哪一种言语入门更快, ...
- 《Java 2D游戏编程入门》—— 1.5 创建一个主动渲染的窗口
本节书摘来异步社区<Java 2D游戏编程入门>一书中的第1章,第1.5节,作者:[美]Timothy Wright(莱特),更多章节内容可以访问云栖社区"异步社区"公 ...
- java消息头,Java网络编程从入门到精通：HTTP消息头字段
Java网络编程从入门到精通:HTTP消息头字段 一.通用头字段 1. Connection 这个字段只在HTTP1.1协议中存在.它决定了客户端和服务器进行了一次会话后, 服务器是否立即关闭网络连接 ...
- JSOUP 教程—— Java爬虫，简易入门，秒杀htmlparser
转载自 JSOUP 教程-- Java爬虫,简易入门,秒杀htmlparser 关于爬虫,之前一直用做第一个站的时候,记得那时候写的 爬虫 是爬sina 的数据,用的就是 htmlparser 可 ...
- （免费领取名企Java面试题）volatile作用，指令重排相关
(免费领取名企Java面试题)volatile作用,指令重排相关 Java是当下最热门的编程语言,越来越多的年轻人开始从事Java方面的工作,高就业率,高薪水的岗位,是吸引他们的原因.每个行业都有三六 ...
最新文章
- 《Python数据科学指南》——1.16 使用lambda创造匿名函数
- python编码转换语句_好程序员Python教程之字符串编码知识小结
- MacOS中使用QT开发iOS应用
- Mockito教程：使用Mockito进行测试和模拟
- 三通道的黑白图（不同于单通道的普通的黑白图片）
- bigdecimal 加法_巧用加法的运算律，简化有理数的加法运算
- linux 引导管理器,linux系统引导管理器GRUB
- TreeSet集合为什么要实现Comparable？
- 【leetcode】复写零
- 虚幻4UE4使用PS4 DualShock4手柄ProController Switch手柄
- 新手必看：PS修图的基本步骤
- OSChina 周三乱弹 —— 东京不热，北海道有点热
- 最清晰易懂的MinMax算法和Alpha-Beta剪枝详解
- JAVA毕业设计公交线路查询系统计算机源码+lw文档+系统+调试部署+数据库
- 介绍几款不是太有名的固态硬盘产品
- IMX6ULL - 移植uboot-imx_v2020.04_5.4.70_2.3.0
- word表格跨页多出一根线（三线表）
- 《左耳听风》-ARTS-打卡记录-第二十五周
- 全网最硬核 JVM TLAB 分析 6. TLAB 相关热门QA汇总
- mini2440的LEDS驱动程序和测试程序详解