Vue2基础-指令语法合集（HTML版）

---

一、v-bind指令

给标签属性设置vue变量的值，多用于设置href、style等HTML属性

• 语法：v-bind:属性名 = “vue变量”
• 简写：属性名= “vue变量”

代码片段

	<a v-bind:href="school.url.toUpperCase()">点我去{{school.name}}学习1</a>
	<a :style="blackColor">动态设置css背景颜色</a>
	// isMarkRed可以动态设置class样式是否添加，其他地方使用也可如此
	<div :class="{active,markRed:isMarkRed}">设置激活和背景色</div> 
	<script>	
		const app = new Vue({
		    el:"#app",
		    data():{
		        return {
		            isMarkRed:false
		        }
		    }
		})
	</script>

二、v-on指令

给DOM元素添加事件

• 语法: v-on:事件名 = “xxx”。xxx可以写入少量js代码，也可以写入methods函数或methods函数(参数)的形式
• 简写: @事件名 = “xxx”

当事件传递的函数没有传参时和传递$event时

  此时获取的是$event事件对象。

	<!-- 准备好一个容器-->
	<div id="root">
		<button @click="showInfo1">点我提示信息1（不传参）</button>
		<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
	</div>
	<script type="text/javascript">
		const vm = new Vue({
			el:'#root',
			methods:{
				showInfo1(event){
					// console.log(event.target.innerText)
					// console.log(this) //此处的this是vm
					alert('同学你好！')
				},
				showInfo2(event,number){
					console.log(event,number)
					// console.log(event.target.innerText)
					// console.log(this) //此处的this是vm
					alert('同学你好！！')
				}
			}
		})
	</script>

v-on:事件名.修饰符的使用

1. prevent：阻止默认事件（常用）；
2. stop：阻止事件冒泡（常用）；
3. once：事件只触发一次（常用）；
4. capture：使用事件的捕获模式；
5. self：只有event.target是当前操作的元素时才触发事件；
6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

	<div id="root">
		<!-- 阻止默认事件（常用） -->
		<a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
	
		<!-- 阻止事件冒泡（常用） -->
		<div class="demo1" @click="showInfo">
			<button @click.stop="showInfo">点我提示信息</button>
			<!-- 修饰符可以连续写 -->
			<!-- <a href="http://www.baidu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
		</div>
	
		<!-- 事件只触发一次（常用） -->
		<button @click.once="showInfo">点我提示信息</button>
	
		<!-- 使用事件的捕获模式 -->
		<!-- js默认分为捕获阶段和冒泡阶段， -->
		<!-- 捕获阶段：从外向内；冒泡阶段：从内向往 -->
		<!-- capture：让事件在捕获阶段就执行，事件默认是冒泡阶段执行。 -->
		<div class="box1" @click.capture="showMsg(1)">
			div1
			<div class="box2" @click="showMsg(2)">
				div2
			</div>
		</div>
	
		<!-- 只有点击当前元素才会触发，只有event.target是当前操作的元素时才触发事件； -->
		<!-- 冒泡阶段：冒泡上去的DOM元素始终是点击的DOM元素，并不会改变。 -->
		<div class="demo1" @click.self="showInfo">
			<button @click="showInfo">点我提示信息</button>
		</div>
	
		<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
		<ul @wheel.passive="demo" class="list">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
	</div>

v-on:按键事件.按键修饰符的使用

按键修饰符可以是按键keyCode也可以是特定单词，可加也可不加，加则具体到某个按键，不加则全部按键。想了解所有按键的keyCode，请点击此处。

	<input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">
	...
	showInfo(e){
		// console.log(e.key,e.keyCode)
		console.log(e.target.value)
	}
	...

三、v-model

把value属性和vue数据变量, 双向绑定到一起

• 语法: v-model=“vue数据变量”

	<div id="root">
		<!-- 简写 -->
		单向数据绑定：<input type="text" :value="name"><br/>
		双向数据绑定：<input type="text" v-model="name"><br/>
	</div>	
	<script type="text/javascript">
		new Vue({
			el:'#root',
			data:{
				name:'请输入文本'
			}
		})
	</script>
	

v-model.修饰符的使用

• number：以parseFloat转成数字类型
• trim：去除首尾空白字符
• lazy：在change时触发而非inupt时

代码示例：

    <div id="root">
        <form @submit.prevent="demo">
			账号：<input type="text" v-model.trim="userInfo.account">
			年龄：<input type="number" v-model.number="userInfo.age">
			其他信息：<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
            <button>提交</button>
        </form>
    </div>

	<script type="text/javascript">
	    Vue.config.productionTip = false
	
	    new Vue({
	        el: '#root',
	        data: {
	            userInfo: {
	                account: '',
	                age: 18,
	                agree: ''
	            }
	        }
	    })
	</script>

四、v-text和v-html

更新DOM对象的innerText/innerHTML

• v-text

  1. 语法：v-text=“vue数据变量”
  2. 作用：向其所在的节点中渲染文本内容。
  3. 与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

• v-html

  1. 语法：v-html=“vue数据变量”
  2. 作用：向指定节点中渲染包含html结构的内容。
  3. 与插值语法的区别：
     1. v-html会替换掉节点中所有的内容，{{xx}}则不会。
     2. v-html可以识别html结构。
  4. 严重注意：v-html有安全性问题！！！！
  5. 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
  6. 一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

• 注意：

  1. 会覆盖插值表达式
  2. v-text把值当成普通字符串显示, v-html把值当做html解析

示例代码：

	<div id="root">
		<div v-text="name"></div>
		<div v-html="str"></div>
	</div>
	<script type="text/javascript">
		new Vue({
			el:'#root',
			data:{
				name: '张三',
				str:'<h3>你好啊！</h3>'
			}
		})
	</script>

五、v-show和v-if

控制标签的隐藏或出现

• v-if

  1. 写法：
     1. v-if=“表达式”
     2. v-else-if=“表达式”
     3. v-else=“表达式”
  2. 适用于：切换频率较低的场景。
  3. 特点：不展示的DOM元素直接被移除。
  4. 注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

• v-show

  1. 写法：v-show=“表达式”
  2. 适用于：切换频率较高的场景。
  3. 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

• 备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

代码示例：

	<div id="root">
		<!-- 使用v-show做条件渲染 -->
		<!-- <h2 v-show="false">欢迎学习Vue</h2> -->
		<!-- <h2 v-show="1 === 1">欢迎学习Vue</h2> -->

		<!-- 使用v-if做条件渲染 -->
		<!-- <h2 v-if="false">欢迎学习Vue</h2> -->
		<!-- <h2 v-if="1 === 1">欢迎学习Vue</h2> -->
	</div>
	<script type="text/javascript">
		const vm = new Vue({
			el:'#root',
		})
	</script>

六、v-for

1. 用于展示列表数据
2. 语法：v-for=“(item, index) in xxx” :key=“yyy”
3. 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

• 注意：v-for的临时变量名不能用到v-for范围外

代码示例：

	<!-- 准备好一个容器-->
	<div id="root">
		<!-- 遍历数组 -->
		<h2>人员列表（遍历数组）</h2>
		<ul>
			<li v-for="(p,index) in persons" :key="index">
				{{p.name}}-{{p.age}}
			</li>
		</ul>

		<!-- 遍历对象 -->
		<h2>汽车信息（遍历对象）</h2>
		<ul>
			<li v-for="(value,k) of car" :key="k">
				{{k}}-{{value}}
			</li>
		</ul>

		<!-- 遍历字符串 -->
		<h2>测试遍历字符串（用得少）</h2>
		<ul>
			<li v-for="(char,index) of str" :key="index">
				{{char}}-{{index}}
			</li>
		</ul>
		
		<!-- 遍历指定次数 -->
		<h2>测试遍历指定次数（用得少）</h2>
		<ul>
			<li v-for="(number,index) of 5" :key="index">
				{{index}}-{{number}}
			</li>
		</ul>
	</div>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		new Vue({
			el:'#root',
			data:{
				persons:[
					{id:'001',name:'张三',age:18},
					{id:'002',name:'李四',age:19},
					{id:'003',name:'王五',age:20}
				],
				car:{
					name:'奥迪A8',
					price:'70万',
					color:'黑色'
				},
				str: "hello"
			}
		})
	</script>

参考博客：vue 指令语法总结