Vue根据不同的指令，针对标签实现不同的功能
指令：带有v-前缀的特殊的标签属性
<!-- Vue指令-->
<div v-html="str"></div>
<!-- 普通标签属性 -->
<div class="box"></div>目录
v-html
v-show
v-if
v-else和v-else-if
v-on
事件处理
监听事件
事件处理方法
内联处理器中的方法
内联处理器中访问Dom原生事件
事件修饰符
v-bind
v-for
key
v-model
v-html
作用：设置元素的innerHTML
语法：v-html="表达式"
错误分析：双大括号会将数据解释为普通文本，而非 HTML 代码。
为了输出真正的 HTML，你需要使用v-html ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>004Vue指令v-html</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-html="msg"></div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
msg:
'<a href="https://v2.cn.vuejs.org/v2/guide/">Vue2 API</a>'
}
})
</script>
</body>
</html>
v-show
作用：控制元素显示、隐藏
语法：v-show="表达式" 表达式值为true则显示，为false则隐藏
底层原理：切换css的display:none 来控制显示隐藏，元素始终保留在Dom中
应用场景：频繁切换显示隐藏的场景
v-if
作用：控制元素显示、隐藏
语法：v-if="表达式" 表达式值为true则显示，为false则隐藏
底层原理：根据判断条件控制元素的创建与移除（条件渲染）
应用场景：或显示，或隐藏，不频繁切换的场景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>005Vue指令v-show和v-if</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-show="flag">Hello v-show!</h1>
<h1 v-if="flag">Hello v-if!</h1>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
flag: false
}
})
</script>
</body>
</html>
v-else和v-else-if
作用：辅助v-if进行判断渲染
语法：v-else="表达式" v-else-if="表达式"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>006Vue指令v-else和v-else-if</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-if="gender===0">性别：男</p>
<p v-else>性别：女</p>
<p v-if="score>=90">等级：A</p>
<p v-else-if="score>=80">等级：B</p>
<p v-else-if="score>=70">等级：C</p>
<p v-else-if="score>=60">等级：D</p>
<p v-else>等级：E</p>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
gender: 1,
score: 95
}
})
</script>
</body>
</html>v-on
作用：注册事件 = 添加监听 + 提供处理逻辑
语法：
- v-on:事件名="内联语句"
- v-on:事件名="methods中的函数名"
缩写：@事件名
事件处理
监听事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>007Vue指令v-on监听事件</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="count--">-</button>
<span>{{count}}</span>
<button @click="count++">+</button>
<hr>
<button @click="count1-=2">-2</button>
<span>{{count1}}</span>
<button @click="count1-=2">+2</button>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
count: 100,
count1: 200
}
})
</script>
</body>
</html> 
事件处理方法
许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>008Vue指令v-on事件处理方法</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">Greet</button>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
name: 'Vue2'
},
methods: {
greet: function (event) {
//`this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
//`event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
</script>
</body>
</html>
内联处理器中的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>009Vue指令v-on内联处理器中的方法</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
<script>
const vm = new Vue({
el: '#app',
methods: {
say: function (message) {
alert(message)
}
}
})
</script>
</body>
</html>
内联处理器中访问Dom原生事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>010Vue指令v-on内联处理器中访问原始Dom事件</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
</div>
<script>
const vm = new Vue({
el: '#app',
methods: {
warn: function (message, event) {
// 现在我们可以访问原生事件对象
if (event) {
event.preventDefault()
}
alert(message)
}
}
})
</script>
</body>
</html>
事件修饰符
- .stop
- .prevent
- .capture
- .self
- .once
- .passive
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>v-bind
作用：动态的设置html的标签属性
语法：v-bind:属性名="表达式"
缩写是 “:”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>012Vue指令v-bind</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<img v-bind:src="imgUrl" v-bind:title="msg" alt="">
<img :src="imgUrl" :title="msg" alt="">
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
imgUrl: 'https://v2.cn.vuejs.org/images/logo.svg',
msg: 'Vue'
}
})
</script>
</body>
</html>
v-for
作用：基于数据循环，多次渲染整个元素
遍历数组语法：v-for="(item, index) in 数组"
item为数组中的项，index为数组下标
省略index： v-for="item in 数组"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>014Vue指令v-for</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h3>前端学习</h3>
<ul>
<li v-for="(item,index) in list">
{{item}}-{{index}}
</li>
</ul>
<ul>
<li v-for="item in list">
{{item}}
</li>
</ul>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
list: ['HTML', 'CSS', 'JavaScript', 'Vue']
}
})
</script>
</body>
</html>
key
作用：给元素添加唯一标识，便于Vue进行列表项的正确排序使用
注意点：
- key的值只能是字符串或数字类型
- key的值必须具有唯一性
- 推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）
语法： :key="唯一值"
v-model
作用：给表单元素使用，双向数据绑定，可以快速获取或设置表单元素内容
- 数据变化，视图自动更新
- 视图变化，数据自动更新
语法：v-model='变量'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>016Vue指令v-model</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
账户：<input type="text" v-model="username"><br><br>
密码：<input type="password" v-model="password"><br><br>
<button @click="login">登录</button>
<button @click="reset">重置</button>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
username: '',
password: ''
},
methods: {
login() {
console.log(this.username, this.password)
},
reset() {
this.username = ''
this.password = ''
}
}
})
</script>
</body>
</html>
