vue常用指令
1、插值表达式2、绑定数据和元素属性 v-bind3、v-on绑定事件4、处理时间对象e5、v-on事件修饰符6、v-on按键修饰符7、v-model 双向事件绑定8、v-model的修饰符9、v-text和v-html10、v-show和v-if11、v-for12、v-for更新检测13、动态class14、动态style15、过滤器16、计算属性 computed17、侦听器18、侦听器深度
目录
1、插值表达式
- 案例:在dom标签中,直接插入vue数据变量,将vue数据变量直接显示在标签内
- 又称:声明式渲染/文本插值
- 语法:{{表达式}}
- msg和obj是vue数据变量
- 要在js中data函数里声明
<template>
<div>
<h1>{{ msg }}</h1> // 可以写普通变量
<h2>{{ obj.name }}</h2> // 也可以写对象
<h3>{{ obj.age >18 ?'成年':'未成年'}}</h3> // 也可以写判断条件
</div>
</template>
<script>
export default {
data() {
return {
msg: "hello vue",
obj: {
name: "小vue",
age: 5
}
}
}
}
</script>
2、绑定数据和元素属性 v-bind
作用:给标签属性设置Vue变量的值
v-bind语法和简写:
- 语法:v-bind:属性名="vue变量"
- 简写::属性名="vue变量"
<a v-bind:href="url">我是a标签</a>
<img :src="imgSrc">
<template>
<div>
<!-- 语法:v-bind:原生属性名="vue变量" -->
<a v-bind:href="url"></a>
<!-- 语法::原生属性名="vue变量" -->
<img :src="imgUrl">
</div>
</template>
<script>
export default{
// 准备变量
data(){
return{
url: 'http://www.baidu.com',
imgUrl: 'http://www.baidutupian.com'
}
}
}
</script>
3、v-on绑定事件
语法:
- v-on:事件名="要执行的少量代码"
- v-on:事件名="methods中的函数名"
- v-on:事件名="methods中的函数名(实参)"
<p>你要买商品的数量:{{count}}</p>
<button v-on:click="count = count + 1">增加1</button>
<button v-on:click="addFn">增加1个</button>
<button v-on:click="addCountFn(5)">一次加5个</button>
v-on也可以简写成@
语法:
- @事件名= "methods中的函数"
4、处理时间对象e
语法:
- 无传参,通过形参直接接收
- 传参,通过$event指代时间对象传给时间处理函数
<template>
<div>
<a @click="one" href="http://www.baidu.com">阻止百度</a>
<hr>
<a @click="two(10, $event)" href="http://www.baidu.com">阻止去百度</a>
</div>
</template>
<script>
export default{
methods:{
one(e){
e.preventDafault()
},
two(num,e){
e.preventDafault()
}
}
}
</script>
5、v-on事件修饰符
语法:
- @事件名.修饰符="methods里的函数"
修饰符列表:
- .stop :阻止事件冒泡
- .prevent :阻止默认行为
- .once :程序运行期间,只触发一次时间处理函数
<template>
<div @click="fatherFn">
<!-- vue对事件进行了修饰符设置,在事件后面.修饰符名即可使用更多的功能 -->
<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>
6、v-on按键修饰符
语法:
- @keyup.enter:监测回车按键
- @keyup.esc:监测返回按键
<template>
<div>
<input type="text" @keydown.enter="enterFn">
<hr>
<input type="text" @keydown.esc="escFn">
</div>
</template>
<script>
export default {
data() {
return {
msg: "hello vue",
obj: {
name: "小vue",
age: 20
}
}
},
methods:{
enterFn(){
console.log("用户按下了回车键")
},
escFn(){
console.log("用户按下了返回键")
}
}
}
</script>
7、v-model 双向事件绑定
语法:
- v-model="Vue数据变量"
双向数据绑定:
- 变量变化->视图自动同步
- 视图变化->变量自动同步
例:注册表单,了解v-model在各种表单标签如何使用
<template>
<div>
<span>用户名:</span>
<input type="text" v-model="username">
<br>
<span>密码:</span>
<input type="password" v-model="password">
<br>
<!-- 下拉菜单,v-model需要写在select标签上 -->
<span>来自于:</span>
<select v-model="from">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select>
<br>
<!--
遇到复选框,v-model的变量值
非数组:关联的是复选框的checked属性
数组:关联的是复选框的value属性
-->
<span>爱好:</span>
<input type="checkbox" value="篮球" v-model="hobby">篮球
<input type="checkbox" value="足球" v-model="hobby">足球
<input type="checkbox" value="羽毛球" v-model="hobby">羽毛球
<br>
<span>性别:</span>
<input type="radio" value="男" name="sex" v-model="gender">男
<input type="radio" value="女" name="sex" v-model="gender">女
</div>
</template>
<script>
export default {
data() {
return {
username: "",
password: "",
from: "",
// 如果是非数组hobby:"",则关联的是checked属性 false或者true
hobby: [],
gender:""
}
}
}
</script>
注意点:
- v-model是写在select,value在option上
- v-model用在复选框时,非数组关联的是checkd属性,数组关联的是value属性
- vue变量初始值会影响表单的默认状态,因为双向数据绑定是互相影响的
8、v-model的修饰符
语法:v-model.修饰符 = "Vue数据变量"
- .number:以parseFloat抓成数字类型候,把值赋予给Vue数据变量
- .trim:去除首尾空白字符后,把值赋予给Vue数据变量
- .lazy:在change时触发而非input时,等表单失去焦点时把值赋予给Vue数据变量
<template>
<div>
<!-- .trim修饰符,会去掉首尾空白字符 -->
<span>姓名:</span>
<input type="text" v-model.trim="name">
<br>
<!-- .number修饰符,以parseFloat抓成数字类型 -->
<span>年龄:</span>
<input type="text" v-model.number ="age">
<br>
<!-- .lazy修饰符在change时触发而非input时,
在此处表现为失去焦点时把内容同步给v-model的变量 -->
<span>个人介绍:</span>
<input type="text" v-model.lazy ="intro">
</div>
</template>
<script>
export default {
data(){
return{
name:"",
age:"",
intro:""
}
}
}
</script>
9、v-text和v-html
语法:
- v-text="Vue数据变量"
- v-html="Vue数据变量"
<template>
<div>
<p v-text="str"></p>
<p v-html="str">{{10 + 20}}</p>
<!-- 注意:v-text或v-html会覆盖插值表达式 -->
</div>
</template>
<script>
export default {
data(){
return{
str:"<span>我是一个span标签</span>"
}
}
}
</script>
注意点:
- v-text或v-html会覆盖插值表达式
10、v-show和v-if
作用:控制标签的隐藏和出现
语法:
- v-show="Vue变量"
- v-if="Vue变量"
原理:
- v-show用的display:none隐藏(频繁切换使用)
- v-if直接从DOM树上移除
高级:
- v-else的使用
<template>
<div>
<!--
v-show隐藏:采用display:none // 频繁切换
v-if隐藏:采用从DOM树直接移除 // 移除
-->
<h1 v-show="isShow">我是h1</h1>
<h2 v-if="isIf">我是h2</h2>
<!-- v-if和v-else的使用 -->
<p v-if="age >= 18">成年了</p>
<p v-else>未成年</p>
</div>
</template>
<script>
export default {
data(){
return{
isShow:false,
isIf:false,
age:16
}
}
}
</script>
11、v-for
作用:列表渲染,所在标签结构,按照数据数量,循环生成
语法:
- v-for="(值变量,索引变量)in 目标结构"
- v-for="值变量 in 目标结构"
目标结构:
- 可以遍历数组/对象/数字
<template>
<div>
<ul>
<!--
v-for="(值变量,索引变量)in 目标结构
口诀:想要谁遍历就放到谁身上
-->
<li v-for="(item,index) in arr" :key=index>
{{item}}
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return{
arr:["小明","小刚","小亮","小杰"]
}
}
}
</script>
12、v-for更新检测
情况1:数组翻转
情况2:数组截取
情况3:更新值
口诀:
- 数组变更方法,就会导致v-for更新,页面更新(比如:push,pop,shift,unshift,splice,sort,reverse)
- 数组非变更方法,返回新数组,就不会导致v-for更新,可采用覆盖数组或this.$set(比如:filter,concat,slice)
<template>
<div>
<ul>
<li v-for="(val,index) in arr" :key=index>
{{val}}
</li>
</ul>
<button @click="revBtn">数组翻转</button><br>
<button @click="sliceBtn">截取前3个字符(1)</button><br>
<button @click="updateBtn">更新第1个值(1)</button><br>
<button @click="fugaiBtn">截取前3个字符(2)</button><br>
<button @click="thisSetBtn">更新第1个值(2)</button><br>
</div>
</template>
<script>
export default {
data(){
return{
arr:[1,2,3,4,5]
}
},
methods:{
revBtn(){
// 1.数组翻转可以让v-for更新
this.arr.reverse()
},
sliceBtn(){
// 2.数组slice方法不会造成v-for更新
this.arr.slice(0,3)
},
updateBtn(){
// 3.更新某个值的时候,v-for是检测不到的
this.arr[0] = 1000
},
// 数组非变更方法如果想要返回新数组,使得v-for更新,可采用覆盖数组或this.$set
fugaiBtn(){
// 解决v-for更新 - 覆盖原始数组
let newArr = this.arr.slice(0,3)
this.arr = newArr
},
thisSetBtn(){
// 解决v-for更新 - this.$set()
// 参数1:更新目标结构
// 参数2:更新位置
// 参数3:更新值
this.$set(this.arr, 0, 1000)
}
}
}
</script>
13、动态class
作用:给标签class设置动态的值
语法:
- :class="{类名:布尔值}" // true使用,false不使用
<template>
<div>
<!--
语法::class="{类名:布尔值}"
使用场景:vue变量控制标签是否应该有类名
-->
<p :class="{red_str: bool}">动态class</p>
</div>
</template>
<script>
export default {
data(){
return{
bool: true
}
}
}
</script>
<style>
.red_str{
color: red;
}
</style>
14、动态style
作用:给标签动态设置style的值
语法:
- :style="{css属性名:值}"
<template>
<div>
<!--
动态style语法:
:style="{css属性名:值}"
-->
<p :style="{color: textColor}">动态style</p>
</div>
</template>
<script>
export default {
data(){
return{
textColor :'red'
}
}
}
</script>
15、过滤器
作用:转换格式,过滤器就是一个函数,传入值返回处理后的值
使用场景:
- 字符串翻转,输入“hello,world”,输出“dlrow,olleh”
- 字母转大写,输入“hello”,输出“HELLO”
语法:
- Vue.filter("过滤器名", (值) => {return "返回处理后的值"})
- filter:{过滤器名: (值) => {return "返回处理后的值"}}
(1)全局过滤器
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
// 方式1:全局过滤器
// 任意的.vue文件内“直接”使用
// 语法:Vue.filter("过滤器名": 值 => 处理结果)
Vue.filter("reverse" , val => val.split("").reverse().join(""))
new Vue({
render: h => h(App),
}).$mount('#app')
App.vue
<template>
<div>
<p>原来的样子{{msg}}</p>
<!-- 2. 过滤器的使用
语法:{{ 值 | 过滤器名字 }}
-->
<p>翻转后的样子:{{ msg | reverse}}</p>
</div>
</template>
<script>
export default {
data(){
return{
msg : "hello,world"
}
}
}
</script>
<style>
</style>
(2)局部过滤器
<template>
<div>
<p>原来的样子{{msg}}</p>
<!-- 2. 过滤器的使用
语法:{{ 值 | 过滤器名字 }}
-->
<p>翻转后的样子:{{ msg | reverse}}</p>
<p :title="msg | toUp">鼠标长停</p>
</div>
</template>
<script>
export default {
data(){
return{
msg : "hello,world"
}
},
methods:{},
// 方式2:局部过滤器
// 只能在vue文件中使用
/*
语法:
filter: {
过滤器名字 (val) {
return 处理后的值
}
}
*/
filters: {
toUp(val) {
return val.toUpperCase
}
}
};
</script>
<style>
</style>
(3)多过滤器
作用:可同时使用多个过滤器,或者给过滤器传参
语法:
- 过滤器传参:vue变量 | 过滤器(实参)
- 多个过滤器:vue变量 | 过滤器1 | 过滤器2
<template>
<div>
<!-- 1.给过滤器传参
语法:vue变量 | 过滤器名(值)
-->
<p>使用翻转过滤器:{{msg | reverse('-')}}</p>
<!-- 2. 多个过滤器使用
语法:vue变量 | 过滤器1 | 过滤器2
-->
<p :title="msg | toUp | reverse('-')">鼠标长停</p>
</div>
</template>
16、计算属性 computed
(1)简单写法
使用场景:一个变量的值,依赖另外一些数据计算而来的结果
语法:
computed: {
"计算属性名" (){
return "值"
}
}
<template>
<div>
<p>和为:{{ num }}</p>
</div>
</template>
<script>
export default {
data(){
return{
a:10,
b:20
}
},
// 计算属性:
// 场景:一个变量,需要用另外的变量计算而来
/*
语法:
computed:{
计算属性名(){
return 值
}
}
*/
// 注意:计算属性和data属性都是变量-不能重名
computed:{
num(){
return this.a + this.b
}
}
}
</script>
注意点:
- 计算属性和data属性都是变量-不能重名
- 计算属性是有缓存的,只要依赖项不变,都直接从缓存中取。依赖项改变函数自动执行并重新缓存
(2)完整写法
17、侦听器
作用:可以侦听data/computed属性值的改变
语法:
watch: {
"被侦听的属性名" (newVal, oldVal) {
}
}
例:侦听输入框中输入的内容
<template>
<div>
<input type="text" v-model = "name">
</div>
</template>
<script>
export default {
data(){
return{
name:""
}
},
// 侦听到name值的改变
/* 语法:
watch:{
name(newVal, oldVal){
// 变量名对应值改变这里自动触发
}
}
*/
watch:{
name(newVal, oldVal){
console.log(newVal, oldVal)
}
}
}
</script>
18、侦听器深度执行和立即执行
作用:侦听复杂类型,或者立即执行侦听函数
语法:
watch: {
"要侦听的属性名":{
immediate: true, // 立即执行
deep: true, // 深度侦听复杂类型内变化
handler(newVal, oldVal) {
}
}
}
<template>
<div>
<input type="text" v-model="user.name">
<input type="text" v-model="user.age">
</div>
</template>
<script>
export default {
data(){
return{
user:{
name:"",
age:""
}
}
},
watch:{
user:{
immediate: true, // 深度侦听(对象里的值改变)
deep: true, // 立即正厅(网页打开时hanler就执行一次)
handler(newVal, oldVal) {
// user里的对象
console.log(newVal, oldVal)
}
}
}
}
</script>
更多推荐
所有评论(0)