自学内容网 自学内容网
自学内容网 > 正文

二、vue指令

🕗 发布于 2024-11-18 01:57 vue.js  javascript  前端  

1、v-bind

⽬标 : 给标签属性设置 vue 变量的值
vue 指令 , 实质上就是特殊的 html 标签属性 , 特点 : v- 开头
每个指令 , 都有独⽴的作⽤
语法： v-bind:属性名="vue变量"
简写： : 属性名="vue变量"
<!-- vue 指令 -v-bind 属性动态赋值 -->
<a v-bind:href = "url" > 我是 a 标签 </a>
<img :src = "imgSrc" >
总结 : 把 vue 变量的值 , 赋予给 dom 属性上 , 影响标签显⽰效果

2、v-on

⽬标 : 给标签绑定事件
语法
v-on: 事件名 =" 要执⾏的 == 少量代码 =="
v-on: 事件名 ="methods 中的函数 "
<!-- vue 指令 -v-bind 属性动态赋值 -->
<a v-bind:href = "url" > 我是 a 标签 </a>
<img :src = "imgSrc" > v-on: 事件名 ="methods 中的函数 ( 实参 )"
简写 : @ 事件名 ="methods 中的函数 "
<!-- vue 指令 : v-on 事件绑定 -->
<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>
<button @click = "subFn" > 减少 </button>
<script>
export default {
// ... 其他省略
methods : {
addFn (){ // this 代表 export default 后⾯的组件对象 ( 下属有 data ⾥ return 出来的属性 )
this . count ++
},
addCountFn ( num ){
this . count += num
},
subFn (){
this . count --
}
}
}
</script>
总结 : 常⽤ @ 事件名 , 给 dom 标签绑定事件 , 以及 = 右侧事件处理函数

3、v-on事件对象

⽬标 : vue 事件处理函数中 , 拿到事件对象
语法:
⽆传参 , 通过形参直接接收
传参 , 通过 $event 指代事件对象传给事件处理函数
<!-- vue 指令 : v-on 事件绑定 -->
<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>
<button @click = "subFn" > 减少 </button>
<script>
export default {
// ... 其他省略
methods : {
addFn (){ // this 代表 export default 后⾯的组件对象 ( 下属有 data ⾥ return 出来的属性 )
this . count ++
},
addCountFn ( num ){
this . count += num
},
subFn (){
this . count --
}
}
}
</script>
<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 . preventDefault ()
},
two ( num , e ){
e . preventDefault ()
}
}
}
</script>

4、vue指令-v-on修饰符

⽬的: 在事件后⾯ . 修饰符名 - 给事件带来更强⼤的功能
语法:
@ 事件名 . 修饰符 ="methods ⾥函数 "
.stop - 阻⽌事件冒泡
.prevent - 阻⽌默认⾏为
.once - 程序运⾏期间 , 只触发⼀次事件处理函数
总结 : 修饰符给事件扩展额外功能
methods : {
one ( e ){
e . preventDefault ()
},
two ( num , e ){
e . preventDefault ()
}
}
}
</script>
<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>
<script>
export default {
methods : {
fatherFn (){
console . log ( "father 被触发 " );
},
btn (){
console . log ( 1 );
}
}
}
</script>

5、vue指令-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 {
methods : {
enterFn (){
console . log ( "enter 回⻋按键了 " );
},
escFn (){
console . log ( "esc 按键了 " );
}
}
}
</script>
总结 : 多使⽤事件修饰符 , 可以提⾼开发效率 , 少去⾃⼰判断过程
练习
<template>
<div>
<h1> {{ message }} </h1>
<button @click = "btn" > 逆转世界 </button>
</div>
</template>
<script>
export default {
data () {
return {
message : "HELLO, WORLD" ,
};
},
methods : {
btn (){
this . message = this . message . split ( "" ). reverse (). join ( "" )
}
}
};
</script>

6、vue指令 v-model

⽬标 : 把 value 属性和 vue 数据变量 , 双向绑定到⼀起
语法 : v-model="vue 数据变量 "
双向数据绑定
数据变化 -> 视图⾃动同步
视图变化 -> 数据⾃动同步
演⽰ : ⽤户名绑定 - vue 内部是 MVVM 设计模式
<template>
<div>
<h1> {{ message }} </h1>
<button @click = "btn" > 逆转世界 </button>
</div>
</template>
<script>
export default {
data () {
return {
message : "HELLO, WORLD" ,
};
},
methods : {
btn (){
this . message = this . message . split ( "" ). reverse (). join ( "" )
}
}
};
</script> <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, 在 input[checkbox] 的多选框状态
// 变量为⾮数组 , 则绑定的是 checked 的属性 (true/false) - 常⽤于 : 单个绑定使⽤
// 变量为数组 , 则绑定的是他们的 value 属性⾥的值 - 常⽤于 : 收集勾选了哪些值
}
};
</script>
总结 : 本阶段 v-model 只能⽤在表单元素上 , 以后学组件后讲 v-model ⾼级⽤法
7、vue 指令 v-model
⽬标 : 把 value 属性和 vue 数据变量 , 双向绑定到⼀起
语法 : v-model="vue 数据变量 "
双向数据绑定
数据变化 -> 视图⾃动同步
视图变化 -> 数据⾃动同步
演⽰ : ⽤户名绑定 - vue 内部是 MVVM 设计模式
<template>
<div>
<h1> {{ message }} </h1>
<button @click = "btn" > 逆转世界 </button>
</div>
</template>
<script>
export default {
data () {
return {
message : "HELLO, WORLD" ,
};
},
methods : {
btn (){
this . message = this . message . split ( "" ). reverse (). join ( "" )
}
}
};
</script> <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, 在 input[checkbox] 的多选框状态
// 变量为⾮数组 , 则绑定的是 checked 的属性 (true/false) - 常⽤于 : 单个绑定使⽤
// 变量为数组 , 则绑定的是他们的 value 属性⾥的值 - 常⽤于 : 收集勾选了哪些值
}
};
</script>
总结 : 本阶段 v-model 只能⽤在表单元素上 , 以后学组件后讲 v-model ⾼级⽤法

8、vue指令 v-model修饰符

_vue指令 v-model修饰符
⽬标: 让v-model拥有更强⼤的功能
语法:
  • v-model.修饰符="vue数据变量"
  • .number 以parseFloat转成数字类型
  • .trim 去除⾸尾空⽩字符
  • .lazy 在change时触发⽽⾮inupt时
</script>
<template>
<div>
<div>
<span> 年龄 : </span>
<input type = "text" v-model.number = "age" >
</div>
<div>
<span> ⼈⽣格⾔ : </span>
<input type = "text" v-model.trim = "motto" >
</div>
<div>
<span> ⾃我介绍 : </span>
<textarea v-model.lazy = "intro" ></textarea>
</div>
</div>
</template>
<script>
export default {
data () {
return {
age : "" ,
motto : "" ,
intro : ""
</script>
总结: v-model修饰符, 可以对值进⾏预处理, ⾮常⾼效好⽤

9、vue指令 v-text和v-html

⽬的: 更新DOM对象的innerText/innerHTML

语法 :
  • v-text="vue数据变量"
  • v-html="vue数据变量"
  • 注意: 会覆盖插值表达式
</script>
<template>
<div>
<p v-text = "str" ></p>
<p v-html = "str" ></p>
</div>
</template>
<script>
export default {
data () {
return {
str : "<span> 我是⼀个 span 标签 </span>"
}
}
}
</script>
总结 : v-text 把值当成普通字符串显⽰ , v-html 把值当做 html 解析

10、_vue指令 v-show和v-if

⽬标 : 控制标签的隐藏或出现
语法:
  • v-show="vue变量"
  • v-if="vue变量"
  • 原理
  • v-show ⽤的display:none隐藏 (频繁切换使⽤)
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-show 和 v-if 以及 v-else 指令 , ⽅便通过变量控制⼀套标签出现 / 隐藏

案例-折叠⾯板

⽬标 : 点击展开或收起时，把内容区域显⽰或者隐藏
此案例使⽤了 less 语法 , 项⽬中下载模块
yarn add less@3.0.4 less-loader@5.0.0 -D
只有标签和样式
<template>
<div id = "app" >
<h3> 案例：折叠⾯板 </h3>
<div>
<div class = "title" >
<h4> 芙蓉楼送⾟渐 </h4>
<span class = "btn" >
收起
</span>
</div>
<div class = "container" >
<p> 寒⾬连江夜⼊吴 , </p>
<p> 平明送客楚⼭孤。 </p>
<p> 洛阳亲友如相问， </p>
<p> ⼀⽚冰⼼在⽟壶。 </p>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
<style lang = "less" >
body {
background-color : #ccc ;
#app {
width : 400px ;
margin : 20px auto ;
background-color : #fff ;
border : 4px solid blueviolet ;
border-radius : 1em ;
box-shadow : 3px 3px 3px rgba ( 0 , 0 , 0 , 0.5 );
padding : 1em 2em 2em ;
h3 {
text-align : center ;
}
.title {
display : flex ;
justify-content : space-between ;
align-items : center ;
border : 1px solid #ccc ;
padding : 0 1em ;
}
.title h4 {
line-height : 2 ;
margin : 0 ;
}
.container {
border : 1px solid #ccc ;
padding : 0 1em ;
}
.btn {
/* ⿏标改成⼿的形状 */
cursor : pointer ;
}
}
}
</style>
正确答案
<template>
<div id = "app" >
<h3> 案例：折叠⾯板 </h3>
<div>
<div class = "title" >
<h4> 芙蓉楼送⾟渐 </h4>
<span class = "btn" @click = "isShow = !isShow" >
{{ isShow ? ' 收起 ' : ' 展开 ' }}
</span>
</div>
<div class = "container" v-show = "isShow" >
<p> 寒⾬连江夜⼊吴 , </p>
<p> 平明送客楚⼭孤。 </p>
<p> 洛阳亲友如相问， </p>
<p> ⼀⽚冰⼼在⽟壶。 </p>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
isShow : false
}
}
}
</script>

11、vue指令-v-for

⽬标 : 列表渲染 , 所在标签结构 , 按照数据数量 , 循环⽣成
语法
  •       v-for="(值, 索引) in ⽬标结构"
  •       v-for="值 in ⽬标结构"
⽬标结构:
  •       可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)
注意:
  •       v-for的临时变量名不能⽤到v-for范围外
<template>
<div id = "app" >
<div id = "app" >
<!-- v-for 把⼀组数据 , 渲染成⼀组 DOM -->
<!-- ⼝诀 : 让谁循环⽣成 , v-for 就写谁身上 -->
<p> 学⽣姓名 </p>
<ul>
<li v-for = "(item, index) in arr" :key = "item" >
{{ index }} - {{ item }}
</li>
</ul>
<p> 学⽣详细信息 </p>
<ul>
<li v-for = "obj in stuArr" :key = "obj.id" >
<span> {{ obj.name }} </span>
<span> {{ obj.sex }} </span>
<span> {{ obj.hobby }} </span>
</li>
</ul>
<!-- v-for 遍历对象 ( 了解 ) -->
<p> ⽼师信息 </p>
<div v-for = "(value, key) in tObj" :key = "value" >
{{ key }} -- {{ value }}
</div>
<!-- v-for 遍历整数 ( 了解 ) - 从 1 开始 -->
<p> 序号 </p>
<div v-for = "i in count" :key = "i" > {{ i }} </div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
arr : [ " ⼩明 " , " ⼩欢欢 " , " ⼤⻩ " ],
stuArr : [
{
id : 1001 ,
name : " 孙悟空 " ,
sex : " 男 " ,
hobby : " 吃桃⼦ " ,
},
{
id : 1002 ,
name : " 猪⼋戒 " ,
sex : " 男 " ,
hobby : " 背媳妇 " ,
},
],
tObj : {
name : " ⼩⿊ " ,
age : 18 ,
class : "1 期 " ,
},
count : 10 ,
};
},
};
</script>
总结 : vue 最常⽤指令 , 铺设页⾯利器 , 快速把数据赋予到相同的 dom 结构上循环⽣成

原文地址：https://blog.csdn.net/zzt0121/article/details/143769749

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024