vue.js官方给自己的定为是数据模板引擎，并给出了一套渲染数据的指令。本文详细介绍了vue.js的常用指令。
vue.js常用指令
Vue.js使用方式及文本插值
Vue.js 使用了基于 HTML 的模板语法，最简单的使用vue的方式是渲染数据，渲染数据最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue插值</title>
</head>
<body>
<div id="app-01">
{{ message }}
</div>
<!--安装方式一-->
<script src="../../statics/vue.js"></script>
<!--安装方式二-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>-->
<script>
// 原生js
let odiv = document.getElementById("app-01");
odiv.innerText = "Hello Vue!";
// vue的核心之一是允许采用简洁的模板语法来将数据渲染进DOM系统
let app01 = new Vue({
el: "#app-01",
data: {
message: "Hello Vue!"
}
});
</script>
</body>
</html>
|
首先创建一个vue实例，并在创建实例的过程中传入一个对象。
该对象的第一个属性名为el，它的值是我们需要渲染的目标标签，我们通过属性查找定位这个标签。
该对象的第二个属性名为data，里面就是我们要渲染给浏览器标签的数据，另外还有其他属性，我们在后面的章节中一一介绍。
vue.js模板语法之常用指令
看了上面的代码，可能大家觉得vue也不过如此，原生js代码两行就能完成的事情，vue需要6行代码来实现，还是原生js比较简洁，其实，上面的代码只是给大家演示了挂档的技术，究竟是汽车比较快，还是骑马比较好，我们通过后面的不断学习，来解释这个问题。
接下来，我们来介绍踩油门的技术。
上面的代码中，我们演示了如何将数据渲染进DOM标签，vue帮助我们找到标签并且渲染，对于程序员来说，我们不再需要重复的找标签，绑定事件，然后再找标签，再绑定事件这样的工作了，vue帮我们都做好了，我们只需要关注具体的数据，以及业务逻辑。这也是vue给自己的定位，数据模板引擎。
它是引擎，引擎帮助我们驱动数据渲染到模板。
所以，vue的大部分内容，都是为了渲染数据用的，接下来，我们介绍vue中用来渲染数据的常用指令。
常用指令: v-html
双大括号语法无法渲染HTML标签，我们需要使用v-html。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-html</title>
</head>
<body>
<div id="app01">
<div v-html="vue"></div>
</div>
<script src="./vue.js"></script>
<script>
let app01 = new Vue({
el: "#app01",
data: {
vue: '<h1>Hello Vue!</h1>'
}
})
</script>
</body>
</html>
|
常用指令：v-text
类似双大括号语法渲染数据的另一种方式是使用v-text。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-html</title>
</head>
<body>
<div id="app01">
<div v-text="name"></div>
</div>
<script src="./vue.js"></script>
<script>
let app01 = new Vue({
el: "#app01",
data: {
name: "Alex"
}
})
</script>
</body>
</html>
|
常用指令：v-for
接下来，我们看看数组和对象的渲染方式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for</title>
<script src="../vue模板语法之插值/vue.js"></script>
</head>
<body>
<div id="app01">
<h2>alex的爱好</h2>
<ul>
<li v-for="item in qianqian">{{ item }}</li>
</ul>
<h2>学生的爱好</h2>
<ul>
<li v-for="stu in students">{{ stu.name }}的爱好是{{ stu.hobby}}</li>
</ul>
</div>
<script>
let app01 = new Vue({
el: "#app01",
data: {
guniang: [
"学习",
"逛街",
"美甲"
],
students: [
{
name: "alex",
hobby: "girls"
},
{
name: "peiqi",
hobby: "girls"
},
{
name: "pizza",
hobby: "study"
}
]
}
})
</script>
</body>
</html>
|
常用指令：v-if
渲染数据的时候，同样也可以使用条件判断，我们来看看。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app01">
<!--<div v-if="role == 'shanshan'">-->
<!--<h2>欢迎小美女</h2>-->
<!--</div>-->
<!--<div v-if="role == 'longting'">-->
<!--<h2>欢迎小龙女</h2>-->
<!--</div>-->
<!--<div v-if="role == 'alex'">-->
<!--<h2>滚~~~</h2>-->
<!--</div>-->
<div v-if="role == 'shanshan'">
<h2>欢迎小美女</h2>
</div>
<div v-else-if="role == 'longting'">
<h2>欢迎小龙女</h2>
</div>
<div v-else>
<h2>滚~~~</h2>
</div>
</div>
<script>
// 请注意看HTML标签元素，v-if底层使用appendChild实现
let app01 = new Vue({
el: "#app01",
data: {
role: "shanshan"
}
})
</script>
</body>
</html>
|
通过上面的代码我们可以看出，v-if的作用是控制标签的显示，它通过判断添加标签，底层采用的是appendChild来实现的，下面我们来看一个同样也是控制标签显示的另一个指令v-show。
常用指令：v-show
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-show</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app01">
<h1 v-show="isShow">Hello Vue!</h1>
</div>
<script>
// v-show的实现原理是通过控制样式的display
let app01 = new Vue({
el: "#app01",
data: {
isShow: true
}
})
</script>
</body>
</html>
|
与v-if不同的是，v-show通过样式的display控制标签的显示。
v-if和v-show的性能比较
我们简单比较一下二者的区别：
实现方式：v-if底层采用的是appendChild来实现的，v-show通过样式的display控制标签的显示，正因为实现方式上面有差异，导致了他们的加载速度方面产生了差异；
加载性能：v-if加载速度更快，v-show加载速度慢
切换开销：v-if切换开销大，v-show切换开销小
v-if是惰性的，它是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好，如果在运行时条件很少改变，则使用v-if较好。
常用指令：v-bind
绑定属性，不多说了，注意冒号后面跟标签的属性，属性后面的等号指向数据，它可以简写为 :class, :href。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind</title>
<style>
.active {
}
</style>
<script src="./vue.js"></script>
</head>
<body>
<div id="app01">
<a v-bind:href='link' v-bind:class="{active: isActive}">去百度</a>
</div>
<script>
// 绑定属性，简写冒号：
let app01 = new Vue({
el: "#app01",
data: {
// urls: {
// url: "https://www.baidu.com",
// name: "百度"
// },
link: "https://www.baidu.com",
isActive: true
}
})
</script>
</body>
</html>
|
常用指令：v-on
另一个非常重要的指令是v-on，使用v-on我们可以在标签上面绑定事件，注意我们新建的vue实例app01中多了一个属性，methods，在methods中，是我们具体事件的实现方式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-on</title>
<style>
</style>
<script src="./vue.js"></script>
</head>
<body>
<div id="app01">
<!--方式一-->
<a v-bind:href='link'
v-bind:class="{active: isActive}"
v-on:click="myClick"
v-on:mouseenter="mouseEnter"
@mouseleave="mouseLeave">去百度</a>
<!--方式二-->
<button v-on="{click: myClick,
mouseenter: mouseEnter,
mouseleave: mouseLeave}">
点我今晚吃鸡~~~
</button>
</div>
<script>
// 绑定属性，简写冒号：
let app01 = new Vue({
el: "#app01",
data: {
// urls: {
// url: "https://www.baidu.com",
// name: "百度"
// },
link: "https://www.baidu.com",
isActive: false
},
methods: {
myClick: function () {
// this.isActive = true;
console.log("大吉大利，今晚吃鸡~~~")
},
mouseEnter: function () {
console.log("鼠标来了~~~");
},
mouseLeave: function () {
console.log("鼠标走了~~~");
}
}
})
</script>
</body>
</html>
|
常用指令：v-model
上面演示的是通过vue实例将数据渲染进模板，并且在控制台，我们修改数据之后，修改后的数据能够及时（官方称之为响应式）的渲染到模板层，那么，如果有这样的需求，比如有一个input标签，当用户修改渲染的原始数据后，打印修改后的数据，简单说，我们需要vue实例可以帮我们渲染数据并响应式的监听数据修改，同时我们还需要监听用户行为，如果用户在标签上面修改了数据（之前的修改，指的是通过vue实例app01进行的数据修改），我们需要获取到数据，针对这个需求，我们可以使用v-mode指令。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model</title>
</head>
<body>
<div id="app01">
<p>请选择你的性别</p>
<br>
<input v-model="name"/>
<p><input type="text" v-model="name"/></p>
<p>
<input type="checkbox" value="男" v-model="gender"/>
<input type="checkbox" value="女" v-model="gender"/>
</p>
<br>
{{ name }}
{{ gender }}
<p>请选择你的女朋友</p>
<select name="" id="" v-model="girlFriends">
<option>alex</option>
<option>pizza</option>
<option>peiqi</option>
</select>
<br>
{{ girlFriends }}
<p>
<textarea v-model="article"></textarea>
</p>
<br>
{{ article }}
</div>
<script src="./vue.js"></script>
<script>
let app01 = new Vue({
el: "#app01",
data: {
name: "alex",
gender: [],
girlFriends: [],
article: "这是一篇文章",
}
})
</script>
</body>
</html>
|
常用指令：指令修饰符
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app01">
<table border="1">
<thead>
<tr>
<th>学科</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>Python基础</td>
<td><input type="text" v-model.number="python"/></td>
</tr>
<tr>
<td>前端</td>
<td><input type="text" v-model.number="web"/></td>
</tr>
<tr>
<td>Django</td>
<td><input type="text" v-model.number="django"/></td>
</tr>
</tbody>
</table>
</div>
<script>
let app01 = new Vue({
el: "#app01",
data: {
python: 75,
web: 98,
django: 88
}
})
</script>
</body>
</html>
|
常用指令：计算属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app01">
<table border="1">
<thead>
<tr>
<th>学科</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>Python基础</td>
<td><input type="text" v-model.number="python"/></td>
</tr>
<tr>
<td>前端</td>
<td><input type="text" v-model.number="web"/></td>
</tr>
<tr>
<td>Django</td>
<td><input type="text" v-model.number="django"/></td>
</tr>
<tr>
<td>总分</td>
<td>{{ python + web + django }}</td>
</tr>
<tr>
<td>平均分</td>
<td>{{ avgScore }}</td>
</tr>
</tbody>
</table>
</div>
<script>
// 计算属性放在缓存当中，只有数据修改时才重新计算
let app01 = new Vue({
el: "#app01",
data: {
python: 75,
web: 98,
django: 88
},
computed: {
sumScore: function () {
return this.python + this.web + this.django;
},
avgScore: function () {
return this.sumScore/3;
}
}
})
</script>
</body>
</html>
|
常用指令：自定义指令
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义属性</title>
<style>
.box {
width: 100px;
height: 100px;
border: 1px;
}
</style>
<script src="./vue.js"></script>
</head>
<body>
<div id="app01" class="box" v-pos.left.bottom="post">
</div>
<script>
Vue.directive("pos", function (el, bindding) {
console.log(el);
console.log(bindding);
let decorators = bindding.modifiers;
if (bindding.value) {
// el.style.position = "fixed";
// el.style['right'] = 0;
// el.style['top'] = 0;
el.style['position'] = 'fixed';
// el.style['right'] = 0;
// el.style['top'] = 0;
for (let key in decorators) {
// console.log(el.style);
// console.log(typeof el.style);
el.style[key] = 0;
}
} else {
el.style.position = "static";
}
});
// 自定义属性
let app01 = new Vue({
el: "#app01",
data: {
post: true
}
})
</script>
</body>
</html>
|
常用指令：获取DOM元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取DOM</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app01">
<div ref="myBox">alex</div>
<button v-on:click="myAlex">点击alex变红</button>
</div>
<script>
// 错误实例button放在div外面
let app01 = new Vue({
el: "#app01",
methods: {
myAlex: function () {
this.$refs.myBox.style.color = "red";
}
}
})
</script>
</body>
</html>
|
项目：todoList版本一
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<script src="./vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 480px;
margin: 20px 400px;
}
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}
</style>
</head>
<body>
<div id="todolist">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>TodoList</span>
<input id="waitInput" v-on:keyup.enter="todoEnter"
style="margin-left: 20px; width: 250px;"
v-model="waitInput"
placeholder="请输入待办事项"
/>
<el-button
style="float: right;
padding: 3px 0"
type="text"
v-on:click="todoEnter">添加待办
</el-button>
</div>
<div class="left">
<div style="text-align: center; margin-bottom: 10px; color: red;">待办</div>
<div v-for="(todo, index) in todoThings" class="text item">
<input v-on:click="addDone(index)"
style="margin-right: 15px;"
type="checkbox"
v-model="currentThing"
/>{{ todo }}
<img v-on:click="delThing(index)"
style="width: 30px; height: 20px; float: right;
margin-right: 30px"
src="./delete.png"/>
</div>
</div>
<div class="right">
<div style="text-align: center; margin-bottom: 10px; color: green;">已办</div>
<div v-for="(done, index) in doneThings" class="text item">
<input v-on:click="delDone(index)"
style="margin-right: 15px;"
type="checkbox"
/>{{ done }}
<img v-on:click="delThing(index)"
style="width: 30px; height: 20px; float: right;
margin-right: 30px"
src="./delete.png"/>
</div>
</div>
</el-card>
</div>
<script>
new Vue({
el: "#todolist",
data: {
waitInput: "",
currentThing: "",
checked: true,
todoThings: ['写代码', '五道口吃火锅', '超市买鸡蛋', '图书馆看书', '看电影', '看演唱会', '游泳', '跑步'],
doneThings: ['看书', '写博客', '散步', '与朋友聊天', '打电话给父母']
},
methods: {
todoEnter: function () {
if ( this.waitInput ) {
this.todoThings.push(this.waitInput);
this.waitInput = "";
}
},
addDone: function (index) {
event.currentTarget.checked = false;
let done = this.todoThings[index];
this.todoThings.splice(index, 1);
this.doneThings.push(done);
},
delDone: function (index) {
let notDone = this.doneThings[index];
this.doneThings.splice(index, 1);
this.todoThings.push(notDone);
},
delThing: function (index, currentlist) {
if ( currentlist === this.todoThings ) {
this.todoThings.splice(index, 1);
} else {
this.doneThings.splice(index, 1);
}
}
}
})
</script>
</body>
</html>
|
项目：todoList版本二
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<script src="./vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 480px;
margin: 20px 400px;
}
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}
</style>
</head>
<body>
<div id="todolist">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>TodoList</span>
<input id="waitInput" v-on:keyup.enter="todoEnter"
style="margin-left: 20px; width: 250px;"
v-model="waitInput"
placeholder="请输入待办事项"
/>
<el-button
style="float: right;
padding: 3px 0"
type="text"
v-on:click="todoEnter">添加待办
</el-button>
</div>
<div class="left">
<div style="text-align: center; margin-bottom: 10px; color: red;">待办</div>
<div v-for="(todo, index) in todoThings" class="text item">
<input v-on:click="moveThings(index, todoThings)"
style="margin-right: 15px;"
type="checkbox"
v-model="currentThing"
/>{{ todo }}
<img v-on:click="delThing(index, todoThings)"
style="width: 30px; height: 20px; float: right;
margin-right: 30px"
src="./delete.png"/>
</div>
</div>
<div class="right">
<div style="text-align: center; margin-bottom: 10px; color: green;">已办</div>
<div v-for="(done, index) in doneThings" class="text item">
<input v-on:click="moveThings(index, doneThings)"
style="margin-right: 15px;"
type="checkbox"
/>{{ done }}
<img v-on:click="delThing(index, doneThings)"
style="width: 30px; height: 20px; float: right;
margin-right: 30px"
src="./delete.png"/>
</div>
</div>
</el-card>
</div>
<script>
new Vue({
el: "#todolist",
data: {
waitInput: "",
currentThing: "",
checked: true,
todoThings: ['写代码', '五道口吃火锅', '超市买鸡蛋', '图书馆看书', '看电影', '看演唱会', '游泳', '跑步'],
doneThings: ['看书', '写博客', '散步', '与朋友聊天', '打电话给父母']
},
methods: {
todoEnter: function () {
if ( this.waitInput ) {
this.todoThings.push(this.waitInput);
this.waitInput = "";
}
},
moveThings: function (index, currentlist) {
event.currentTarget.checked = false;
let spliceList = currentlist === this.todoThings ? this.todoThings : this.doneThings;
let pushList = spliceList === this.todoThings ? this.doneThings : this.todoThings;
let thing = currentlist[index];
spliceList.splice(index, 1);
pushList.push(thing);
},
delThing: function (index, currentlist) {
if ( currentlist === this.todoThings ) {
this.todoThings.splice(index, 1);
} else {
this.doneThings.splice(index, 1);
}
}
}
})
</script>
</body>
</html>
|
- 02: vue.js常用指令
目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...
- Vue - vue.js 常用指令
Vue - vue.js 常用指令 目录: 一. vuejs模板语法之常用指令 1. 常用指令: v-html 2. 常用指令: v-text 3. 常用指令: v-for 4. 常用指令: v-if ...
- vue.js常用指令
本文摘自:http://www.cnblogs.com/rik28/p/6024425.html Vue.js的常用指令 上面用到的v-model是Vue.js常用的一个指令,那么指令是什么呢? Vu ...
- 【Vue】vue.js常用指令
http://www.cnblogs.com/rik28/p/6024425.html Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会 ...
- 新人成长之入门Vue.js常用指令介绍（一）
写在前面 作为一个刚步入职场工作的新人,对于公司中所用的技术和框架基本上不懂,只能从最基础的开始做起,进入公司接触的第一个框架就是前端框架Vue.js,几个功能做下来,觉得Vue.js首先学习起来真的 ...
- Angular JS - 7 - Angular JS 常用指令2
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Angular JS - 6 - Angular JS 常用指令
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- vue.eslintrc.js常用配置
vue.eslintrc.js module.exports = { root: true, env: { node: true }, extends: [ "plugin:vue/esse ...
- vue.config.js常用配置
使用vue-cli3.0搭建项目比之前更简洁,没有了build和config文件夹. vue-cli3的一些服务配置都迁移到CLI Service里面了,对于一些基础配置和一些扩展配置需要在根目录新建 ...
随机推荐
- 三、ReactJS、jsx、 Component 特性
reactjs特性: 基于组件(Component)化思考 用 JSX 进行声明式(Declarative)UI 设计 使用 Virtual DOM Component PropType 错误校对机制 ...
- ThinkPHP 5.0远程命令执行漏洞分析与复现
0x00 前言 ThinkPHP官方2018年12月9日发布重要的安全更新,修复了一个严重的远程代码执行漏洞.该更新主要涉及一个安全更新,由于框架对控制器名没有进行足够的检测会导致在没有开启强制路由的 ...
- 14 ~ express ~ 显示用户数据
一,router/admin.js var express = require('express') var router = express.Router() var User = require( ...
- Vulkan SDK 之 Device
Enumerate Physical Devices Vulkan instance创建完成之后,vulkan loader是知道你有几个物理设备(显卡),但是程序不知道,需要通过 相关接口获取设备 ...
- 【5分钟+】计算机系统结构：CPU性能公式
计算机系统结构:CPU性能公式 基础知识 CPU 时间:一个程序在 CPU 上运行的时间.(不包括I/O时间) 主频.时钟频率:CPU 内部主时钟的频率,表示1秒可以完成多少个周期. 例如,主频为 4 ...
- Python Learning Day6
selenium操作 点击.清除操作 from selenium import webdriver from selenium.webdriver.common.keys import Keys im ...
- C语言-字符类型
C语言-字符类型 char不仅是一种整数,也是一种特殊的类型:字符(character). 常用单引号表示字符的字面量,如'a', '1'. 单引号''也是一个字符,printf和scanf里用的%c ...
- UVA 10054 The Necklace 转化成欧拉回路
题意比较简单,给你n个项链碎片,每个碎片的两半各有一种颜色,最后要把这n个碎片串成一个项链,要求就是相邻碎片必须是同种颜色挨着. 看了下碎片总共有1000个,颜色有50种,瞬间觉得普通方法是无法在可控 ...
- 利用IIS6提权获得管理员权限
IIS6也是一个比较古老的提权EXP了,是通过利用WMI的权限来执行命令. 目标机:漏洞巨多的Win2003 下面说一下通过IIS6在已用菜刀连接上的服务器上运用IIS6获得管理员权限的过程. 1.将 ...
- 读书笔记 - js高级程序设计 - 第六章 面向对象的程序设计
EcmaScript有两种属性 数据属性 和 访问器属性 数据属性有4个特性 Configurable Enumerable Writable Value 前三个值的默认值都为false ...
