什么是vue指令？
vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头。每个指令, 都有独立的作用。
v-bind指令
- 语法：
v-bind:属性名="vue变量" - 简写：
:属性名="vue变量" - 作用：
给属性动态赋值
<!-- vue指令-v-bind属性动态赋值 -->
<a v-bind:href="url">我是a标签</a>
<img :src="imgSrc">
<!--url、imgSrc是vue的变量 -->
v-on指令
-
语法：
- v-on:事件名="要执行的==少量代码=="
- v-on:事件名="methods中的函数"
- v-on:事件名="methods中的函数(实参)"
-
简写: @事件名="methods中的函数"
-
作用：给标签绑定事件
<!-- vue指令: v-on事件绑定-->
<p>你要买商品的数量: {{count}}</p>
<button v-on:click="count++">增加1</button>
<button v-on:click="addFn">增加1个</button>
<button v-on:click="addCountFn(5)">一次加5件</button>
<button @click="subFn">减少1</button>
<script>
export default {
data(){
return {
count:0
}
}
methods: {
addFn(){ // this代表export default后面的组件对象(下属有data里return出来的属性)
this.count++
},
//事件函数可以传递参数
//每次单击增加5
addCountFn(num){
this.count += num
},
//每次单击减少1
subFn(){
this.count--
}
}
}
</script>
v-on指令修饰符
-
语法:
-
@事件名.修饰符="methods里函数"
- .stop ： 阻止事件冒泡
- .prevent ： 阻止默认行为
- .once -：程序运行期间, 只触发一次事件处理函数
-
<template>
<div @click="fatherFn">
<button @click.stop="btn">.stop阻止事件冒泡</button>
<a href="http://www.baidu.com" @click.prevent="btn">.prevent阻止默认行为</a>
<button @click.once="btn">.once程序运行期间, 只触发一次事件处理函数</button>
</div>
</template>
<script>
export default {
methods: {
fatherFn(){
console.log("father被触发");
},
btn(){
console.log(1);
}
}
}
</script>
v-model指令
-
语法: v-model="vue数据变量"
-
双向数据绑定
- 数据变化 -> 视图自动同步
- 视图变化 -> 数据自动同步 -作用：把value属性和vue数据变量, 双向绑定到一起
<template>
<div>
<!--
v-model:是实现vuejs变量和表单标签value属性, 双向绑定的指令
-->
<div>
<span>用户名:</span>
<input type="text" v-model="username" />
</div>
<div>
<span>密码:</span>
<input type="password" v-model="pass" />
</div>
<div>
<span>来自于: </span>
<!-- 下拉菜单要绑定在select上 -->
<select v-model="from">
<option value="北京市">北京</option>
<option value="南京市">南京</option>
<option value="天津市">天津</option>
</select>
</div>
<div>
<!-- (重要)
遇到复选框, v-model的变量值
非数组 - 关联的是复选框的checked属性
数组 - 关联的是复选框的value属性
-->
<span>爱好: </span>
<input type="checkbox" v-model="hobby" value="抽烟">抽烟
<input type="checkbox" v-model="hobby" value="喝酒">喝酒
<input type="checkbox" v-model="hobby" value="写代码">写代码
</div>
<div>
<span>性别: </span>
<input type="radio" value="男" name="sex" v-model="gender">男
<input type="radio" value="女" name="sex" v-model="gender">女
</div>
<div>
<span>自我介绍</span>
<textarea v-model="intro"></textarea>
</div>
</div>
</template>
<script>
export default {
data() {
return {
username: "",
pass: "",
from: "",
hobby: [],
sex: "",
intro: "",
};
// 总结:
// 特别注意: v-model, 在复选框时的变量是什么数据类型
// 变量为非数组, 则绑定的是checked的属性(true/false) - 常用于: 单个绑定使用
// 变量为数组, 则绑定的是他们的value属性里的值 - 常用于: 收集勾选了哪些值
}
};
</script>
v-model指令的修饰符
-
语法:
-
v-model.修饰符="vue数据变量"
- .number ：以parseFloat转成数字类型
- .trim ：去除首尾空白字符
- .lazy： 在change时触发而非inupt时。相当于是标签绑定的是change事件。
-
v-text和v-html指令
-
语法:
- v-text="vue数据变量"
- v-html="vue数据变量"
-
注意: 会覆盖插值表达式
-
区别：跟innerText和innerHTML一样，也是是否能解析标签
<template>
<div>
<p v-text="str"></p>
<!-- <span>标签不会被解析出来 -->
<p v-html="str"></p>
</div>
</template>
<script>
export default {
data() {
return {
str: "<span>我是一个span标签</span>"
}
}
}
</script>
v-show和v-if指令
-
作用：控制标签的显示或隐藏
-
语法:
- v-show="vue变量"
- v-if="vue变量"
- 变量是一个布尔值
-
原理
- v-show ：用的display:none隐藏 (频繁切换使用)
- v-if ：直接从DOM树上移除
-
高级
- v-else使用
<template>
<div>
<h1 v-show="isOk">v-show的盒子</h1>
<h1 v-if="isOk">v-if的盒子</h1>
<div>
<p v-if="age > 18">我成年了</p>
<p v-else>还得多吃饭</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isOk: true,
age: 15
}
}
}
</script>
v-for指令
-
语法
- v-for="(值, 索引) in 目标结构"
- v-for="值 in 目标结构"
-
目标结构:
- 可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)
-
注意:
v-for的临时变量名不能用到v-for范围外
<template>
<div>
<!-- 遍历数组 -->
<ul>
<li v-for="(item,index) in arr" :key="item">{{item}}-{{index}}</li>
</ul>
<!-- 遍历对象 -->
<!--
(item , k ,index) in obj
值 键 索引
-->
<ul>
<li v-for="(item , k ,index) in obj" :key="item">{{item}}-{{k}}-{{index}}</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
arr:['a','b','c','d','e'],
obj:{
name:'cyl',
age:18
}
}
}
}
</script>
<style>
</style>
