当前位置： 首页 > article >正文

二、vue指令

article 2024/11/15 10:29:04

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 结构上循环⽣成

http://www.kler.cn/a/394270.html

相关文章：

  • 自动化工具 Gulp
  • Servlet入门 Servlet生命周期 Servlet体系结构
  • 【ACM出版】第四届信号处理与通信技术国际学术会议（SPCT 2024）
  • 关于GCC内联汇编（也可以叫内嵌汇编）的简单学习
  • 【最新版】Stable Diffusion4.9（AI绘画）下载及安装教程(附软件安装包)！
  • INQUIRE：一个包含五百万张自然世界图像，涵盖10,000个不同物种的专为专家级文本到图像检索任务设计的新型基准数据集。
  • STM32 Option Bytes(选项字节)
  • 【项目组件】第三方库——websocketpp
  • Flutter 应用在真机上调试的流程
  • 【WiFi】ubuntu20.4 WiFi6 无线抓包环境搭建及使用
  • PostgreSQL 序列字段达到最大值
  • 一文窥见神经网络
  • 【QT常用技术讲解】优化网络链接不上导致qt、qml界面卡顿的问题
  • Easyui ComboBox 数据加载完成之后过滤数据
  • AutoDL远程连接技巧
  • php preg_match 不到内容，修改pcre.backtrack_limit解决问题
  • elementui el-table中给表头 el-table-column 加一个鼠标移入提示说明
  • Android 关于使用videocompressor库压缩没有声音的问题
  • GOF设计模式中各模式支持的可变方面（封装变化）
  • 远程链接mysql步骤
  • UE5.4 PCG 生成藤蔓墙体
  • Hbase小测
  • 基于Java Springboot快递物流管理系统
  • Leetcode 56-合并区间
  • [JAVAEE] 面试题(五) - HashMap, Hashtable, ConcurrentHashMap
  • 如何确定光伏建设中的最佳安装倾角