PART2 VUE2.x—基础指令

基本使用步骤

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

<div>
	<!--在页面生命一个被vue所控制的dom区域-->
	<div id='app'>{{username}}</div>
	<!--导入vue.js的script脚本文件,需要联网-->
	<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>

指令

内容渲染指令

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>

{{}}—插值表达式

<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>

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: `<h1>HELLO VUE!</h1>`
			}
		})
	</script>
	</script>
</div>

属性绑定指令

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>

事件绑定指令

v-on:click / @click

<div id='app'>
	<p>count的值是:{{count}}</p>
	<div v-on:click='add'>+1</div>
	<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>

事件对象$event

<div id='app'>
	<p>count的值是:{{count}}</p>
	<div v-on:click='add(1,$event)'>+1</div>
	<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>

事件修饰符

<!--不适用事件修饰符-->
<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>

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

双向绑定指令

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>

条件渲染指令

v-if v-show

<div id='app'>
	<!--每次动态创建或移除元素-->
	<p v-if='msg'>v-if控制</p>
	<!--动态添加元素或者移除display: none样式,性能好-->
	<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>

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>

列表渲染指令

v-for

<div id='app'>
	<table class = 'table table-bordered table-hover table-striped'>
		<thead>
			<th>索引</th>
			<th>ID</th>
			<th>姓名</th>
		</thead>
		<tbody>
			<!--key的值字符串或者数字类型,不能重复-->
			<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>