PART2 VUE2.x—基础指令

基本使用步骤

1. 导入vue.js的script脚本文件
2. 在页面中声明一个将要被vue控制的DOM区域
3. 创建vm实例对象(vue实例对象)

<div>
	
	<div id='app'>{{username}}div>
	
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js">script>
	<script>
		//创建vm实例对象(vue实例对象)
		const vm = new Vue({
			//指定当前vm实例要控制页面的哪个区域
			el: '#app',
			//指定Model数据源
			data: {
				username: 'zs'
			}
		})
	script>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

指令

内容渲染指令

v-text

<div id='app'>
	<p v-text='username'>p>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js">script>
	<script>
		const vm = new Vue({
			el: '#app',
			data: {
				username: 'zs'
			}
		})
	script>
div>
1
2
3
4
5
6
7
8
9
10
11
12

{{}}—插值表达式

<div id='app'>
	<div>{{username}}div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js">script>
	<script>
		const vm = new Vue({
			el: '#app',
			data: {
				username: 'zs'
			}
		})
	script>
	script>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13

v-html

<div id='app'>
	<div v-html='info'>div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js">script>
	<script>
		const vm = new Vue({
			el: '#app',
			data: {
				info: `
HELLO VUE!`
			}
		})
	script>
	script>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13

属性绑定指令

v-bind / :

<div id='app'>
	<input type='input' v-bind:placeholder='tips'>input>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js">script>
	<script>
		const vm = new Vue({
			el: '#app',
			data: {
				tips: '请输入用户名'
			}
		})
	script>
	script>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13

事件绑定指令

v-on:click / @click

<div id='app'>
	<p>count的值是:{{count}}p>
	<div v-on:click='add'>+1div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js">script>
	<script>
		const vm = new Vue({
			el: '#app',
			data: {
				count: 0
			},
			methods: {
				add: function(){
					this.count+ = 1
				}
			}
		})
	script>
	script>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

事件对象$event

<div id='app'>
	<p>count的值是:{{count}}p>
	<div v-on:click='add(1,$event)'>+1div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js">script>
	<script>
		const vm = new Vue({
			el: '#app',
			data: {
				count: 0
			},
			methods: {
				add(n,e){
					this.count += n
				}
				if(this.count % 2 === 0){
					e.target.style.backgroundColor = 'red'
				}else{
					e.target.style.backgroundColor = ''
				}
			}
		})
	script>
	script>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

事件修饰符

<div id='app'>
	<a href='https://www.baidu.com' @click='show'>报读一下a>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js">script>
	<script>
		const vm = new Vue({
			el: '#app',
			data: {},
			methods: {
				show(e){
					//原生不跳转页面
					e.preventDefault()
				}
			}
		})
	script>
	script>
div>


<div id='app'>
	<a href='https://www.baidu.com' @click.prevent>报读一下a>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js">script>
	<script>
		const vm = new Vue({
			el: '#app',
			data: {},
			methods: {}
			}
		})
	script>
	script>
div>
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

其他修饰符与点击修饰符用法一样

双向绑定指令

v-model

<div id='app'>
	<p>用户的名字是: {{username}}p>
	<input type='text' v-model='username'>input>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js">script>
	<script>
		const vm = new Vue({
			el: '#app',
			data: {
				username: 'mz'
			}
		})
	script>
	script>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

条件渲染指令

v-if v-show

<div id='app'>
	
	<p v-if='msg'>v-if控制p>
	
	<p v-show='msg'>v-show控制p>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js">script>
	<script>
		const vm = new Vue({
			el: '#app',
			data: {
				msg: true
			}
		})
	script>
	script>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

v-if v-else-if v-else

<div id='app'>
	<div v-if='type === "A"'>优秀div>
	<div v-else-if='type === "B"'>良好div>
	<div v-else-if='type === "C"'>一般div>
	<div v-else>差div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js">script>
	<script>
		const vm = new Vue({
			el: '#app',
			data: {
				type: 'A'
			}
		})
	script>
	script>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

列表渲染指令

v-for

<div id='app'>
	<table class = 'table table-bordered table-hover table-striped'>
		<thead>
			<th>索引th>
			<th>IDth>
			<th>姓名th>
		thead>
		<tbody>
			
			<tr v-for='(item,index) in list' :key='item.id'>
				<td>{{index}}td>
				<td>{{item.id}}td>
				<td>{{item.name}}td>
			tr>
		tbody>
	table>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js">script>
	<script>
		const vm = new Vue({
			el: '#app',
			data: {
				list: [
					{id: 1,name: '张三'},
					{id: 2,name: '历史'}
				]
			}
		})
	script>
	script>
div>
		tr>
		tbody>
	table>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js">script>
	<script>
		const vm = new Vue({
			el: '#app',
			data: {
				list: [
					{id: 1,name: '张三'},
					{id: 2,name: '历史'}
				]
			}
		})
	script>
	script>
div>
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