常用指令
概念:vue 会根据不同的指令,针对标签(即 <>
里面的内容)实现不同的功能
v-html
-
作用:设置元素的 innerHTML
-
示例代码如下:
<div id="app">
<div v-html="msg"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
msg: `
<a href="http://www.baidu.com">
百度
</a>
`
}
})
</script>
v-if
- 作用:控制元素显示隐藏
- 特点:不展示的 DOM 元素直接被移除
v-show
- 作用:控制元素显示隐藏
- 特点:不展示的 DOM 元素未被移除,仅仅是使用样式隐藏
- 示例代码如下:
<div id="app">
<div v-show="flag" class="box">我是v-show控制的盒子</div>
<div v-if="flag" class="box">我是v-if控制的盒子</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
flag: false
}
})
</script>
v-eles
需要紧挨着 v-if
一起使用,示例代码如下:
<div id="app">
<p v-if="gender === 1">性别:♂ 男</p>
<p v-else>性别:♀ 女</p>
<hr>
<p v-if="score >= 90">成绩评定A:奖励电脑一台</p>
<p v-else-if="score >= 70">成绩评定B:奖励周末郊游</p>
<p v-else-if="score >= 60">成绩评定C:奖励零食礼包</p>
<p v-else>成绩评定D:惩罚一周不能玩手机</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
gender: 2,
score: 95
}
})
</script>
v-on
- 作用:注册事件,并提供处理逻辑
- 语法:
v-on:事件名 = "内联语句"
v-on:事件名 = "methods 中的函数名"
- 简写:
v-on:事件名
可以简写为@事件名
@click="demo($event)
,$event
代表事件对象- 示例代码如下:
<div id="app">
<button @click="count--">-</button>
<span>{{ count }}</span>
<button v-on:click="count++">+</button>
<button @click="fn">切换显示隐藏</button>
<h1 v-show="isShow">程序员校花</h1>
<button @click="buy(10)">咖啡10元</button>
<button @click="buy(8)">牛奶8元</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
count: 100,
isShow: true
},
methods: {
fn() {
// this 指向 Vue 实例
console.log(this === app) // true
this.isShow = !this.isShow
},
buy(price) {
}
}
})
</script>
知识加油站 ⛽
ES 6 的对象方法简写,用于在对象中定义方法的一种简化写法,可以在对象字面量中,直接使用函数名来定义方法,而无需写冒号和 function
关键字,示例代码如下:
// 在 ES5 及之前的版本中,我们定义对象方法的常规写法是:
const obj = {
methodName: function() {
// 方法体
}
}
// --------------------------
//而在 ES6+ 中,对象方法简写让我们可以更简洁地定义对象的方法,只需写函数名即可:
const obj = {
methodName() {
// 方法体
}
}
v-for
- 作用:用于循环渲染元素,可遍历数组、对象、字符串(用的很少)
- 遍历数组语法:
v-for = "(item, index) in 数组"
- item:每一项
- index(可选):下标
key
作用:给元素添加唯一标识,便于 Vue 进行列表项的正确排序
示例代码如下:
<div id="app">
<h3>小黑的书架</h3>
<ul>
<li v-for="(item, index) in booksList" :key="item.id">
<span> {{item.name}} </span>
<span> {{item.author}} </span>
<button @click="del(item.id)">删除</button>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
booksList: [
{id: 1, name: '《红楼梦》', author: '曹雪芹'},
{id: 2, name: '《西游记》', author: '吴承恩'},
{id: 3, name: '《水浒传》', author: '施耐庵'},
{id: 4, name: '《三国演义》', author: '罗贯中'}
]
},
methods: {
del(id) {
this.booksList = this.booksList.filter(i => i.id !== id)
}
}
})
</script>
v-bind
绑定属性值
- 作用: 动态的设置 html 的标签属性值,例如 src、url、title
- 语法:
v-bind:属性名="表达式"
,可简写为:属性名="表达式"
- 单向绑定:数据只能从 Vue 实例流向视图,而无法从视图反向影响 Vue 实例中的数据
示例代码如下:
<div id="app">
<!-- v-bind:src => :src -->
<img v-bind:src="imgUrl" v-bind:title="msg" alt="aa">
<img :src="imgUrl" :title="msg" alt="">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
imgUrl: './imgs/10-02.png',
msg: 'hello 波仔'
}
})
</script>
绑定样式
v-bind
可以以对 class 类名 和 style 行内样式 进行控制- class 类名
- 语法:
:class = "对象/数组"
- 对象:键就是类名,值是布尔值。如果值为 true,有这个类,否则没有这个类
- 数组:数组中所有的类,都会添加到盒子上,本质就是一个 class 列表
- 语法:
- style 行内样式
- 语法:
:style = "样式对象"
- 例如:
<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>
- 语法:
示例代码如下:
<style>
.box {
width: 200px;
height: 200px;
border: 3px solid #000;
font-size: 30px;
margin-top: 10px;
}
.pink {
background-color: pink;
}
.big {
width: 300px;
height: 300px;
}
</style>
<div id="app">
<div class="box" :class="{pink: true, big: true}">程序员校花</div>
<div class="box" :class="['pink', 'big']">程序员校花</div>
<div class="box" :style="{width: '100px', height: '100px'}">程序员校花</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
v-model
- 作用:给表单元素使用,实现双向数据绑定,可以快速 获取 或 设置 表单元素内容
- 数据变化 → 视图自动更新
- 视图变化 → 数据自动更新
- 示例代码如下:
<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 src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
username: '',
password: ''
},
methods: {
login () {
console.log(this.username, this.password)
},
reset () {
this.username = ''
this.password = ''
}
}
})
</script>
其它表单
- 常见的表单元素都可以用
v-model
绑定关联,用于快速 获取 或 设置 表单元素的值,它会自动识别表单元素- 输入框
input:text
→ value - 文本域
textarea
→ value - 复选框
input:checkbox
→ checked - 单选框
input:radio
→ checked - 下拉菜单
select
→ value
- 输入框
- 示例代码如下:
<div id="app">
<h3>小黑学习网</h3>
姓名:
<input type="text" v-model="username">
<br><br>
是否单身:
<input type="checkbox" v-model="isSingle">
<br><br>
<!--
前置理解:
1. name: 给单选框加上 name 属性 可以分组 → 同一组互相会互斥
2. value: 给单选框加上 value 属性,用于提交给后台的数据
结合 Vue 使用 → v-model
-->
性别:
<input v-model="gender" type="radio" name="gender" value="1">男
<input v-model="gender" type="radio" name="gender" value="2">女
<br><br>
<!--
前置理解:
1. option 需要设置 value 值,提交给后台
2. select 的 value 值,关联了选中的 option 的 value 值
结合 Vue 使用 → v-model
-->
所在城市:
<select v-model="cityId">
<option value="101">北京</option>
<option value="102">上海</option>
<option value="103">成都</option>
<option value="104">南京</option>
</select>
<br><br>
自我描述:
<textarea v-model="desc"></textarea>
<button>立即注册</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
username: '',
isSingle: true,
gender: 3,
cityId: 102,
desc: '',
}
})
</script>
指令修饰符
通过 .
指明一些指令后缀,不同后缀封装了不同的处理操作,用来简化代码,例如:
- 键盘事件修饰符
@keyup.enter
:键盘回车监听
v-model
修饰符v-model.trim
:去除首尾空格v-model.number
:转数字
- 事件修饰符
@事件名.stop
:阻止冒泡@事件名.prevent
:阻止默认行为
示例代码如下:
<div id="app">
<h3>v-model修饰符 .trim .number</h3>
姓名:<input v-model.trim="username" type="text"><br>
年纪:<input v-model.number="age" type="text"><br>
<h3>@事件名.stop → 阻止冒泡</h3>
<div @click="fatherFn" class="father">
<div @click.stop="sonFn" class="son">儿子</div>
</div>
<h3>@事件名.prevent → 阻止默认行为,下面是阻止跳转超链接</h3>
<a @click.prevent href="http://www.baidu.com">阻止默认行为</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
username: '',
age: '',
},
methods: {
fatherFn() {
alert('老父亲被点击了')
},
sonFn() {
alert('儿子被点击了')
}
}
})
</script>
计算属性
基本使用
- 属性:
data
中的叫做属性 - 语法:声明在
computed
配置项中,配合插值表达式使用 - 示例代码如下:
<div id="app">
<h3>小黑的礼物清单</h3>
<table>
<tr>
<th>名字</th>
<th>数量</th>
</tr>
<tr v-for="(item, index) in list" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.num }}个</td>
</tr>
</table>
<!-- 目标:统计求和,求得礼物总数 -->
<p>礼物总数:{{totalCount}} 个</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
// 现有的数据
list: [
{id: 1, name: '篮球', num: 1},
{id: 2, name: '玩具', num: 2},
{id: 3, name: '铅笔', num: 5},
]
},
computed: {
totalCount() {
// 数组求和函数
return this.list.reduce(
(sum, item) => sum + item.num, 0
)
}
}
})
</script>
完整写法
只读不改时可以用简写写法,也就是只有 get()
没有 set(value)
时,要修改的话需要使用完整写法,示例代码如下:
<div id="app">
姓:<input type="text" v-model="firstName"><br>
名:<input type="text" v-model="lastName"><br>
<p>姓名:{{fullName}}</p>
<button @click="changeName">修改姓名</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: '程序员',
lastName: '校花',
},
computed: {
fullName: {
get() {
return this.firstName + this.lastName
},
set(value) {
// 当 fullName 被修改赋值时执行
console.log(value) // 吕小布
this.firstName = value.slice(0, 1)
this.lastName = value.slice(1)
}
}
},
methods: {
changeName() {
this.fullName = '吕小布'
}
}
})
</script>
VS methods
计算属性会对计算出来的结果缓存,再次使用直接读取缓存,性能比 methods 高,适用于封装对数据的处理,返回一个结果
监视器
基本使用
- 作用:监视数据变化,执行一些业务逻辑或异步操作
- 语法:声明在
watch
配置项中 - 示例代码如下:
data: {
words: '苹果',
obj: {
words: '苹果'
}
},
watch: {
// 该方法会在数据变化时,触发执行
数据属性名(newValue, oldValue) {
// 一些业务逻辑 或 异步操作。
},
'对象.属性名'(newValue, oldValue) {
// 一些业务逻辑 或 异步操作。
}
}
完整写法
完整写法需要添加额外的配置项:
deep:true
:对复杂类型进行深度监听immdiate:true
:初始化,立刻执行一次
示例代码如下:
data: {
obj: {
words: '苹果',
lang: 'italy'
},
},
watch: { // watch 完整写法
对象: {
deep: true, // 深度监视
immdiate:true,// 立即执行 handler 函数
handler (newValue) {
console.log(newValue)
}
}
}