Javascript
04-VUE 常用指令最佳实践
文章目录
- 背景分析
- Vue中的常用指令
- v-bind
- v-show
- v-if 和 v-else
- v-else-if
- v-for
- v-on
- v-html
- v-text
- v-model
- 总结(Summary)
背景分析
传统的html并不支持表达式、分支语句、循环语句等结构的定义，为了弥补其不足很多前端框架，模板引擎通过在html元素中添加自定义属性，然后底层再借助解析引擎对html自定义属性进行处理，以这样的方式来增强html的功能。
Vue中的常用指令
v-bind
在html中假如希望元素的属性值随程序内容的发生而变化，可以借助v-bind或:代替，其基本语法如：
<元素 v-bind:属性名="变量或js表达式">
也可以采用其简化形式，其基本语法如：
<元素 :属性名="变量或js表达式">
案例分析：
<div id="app">
<font :color="color">hello</font>
</div>
<script>
new Vue({
el:"#app",
data:{
color:"red"
}
});
</script>
v-show
v-show为一个专门控制元素的显示隐藏的特殊指令，其基本语法为：
<元素 v-show=“bool类型的变量或返回bool类型的js表达式”>
当Vue对象扫描到v-show时，就会立刻执行""中的变量或js表达式,
如果变量或js表达式的值为true，则什么也不干，元素保持原样显示。如果变量或js表达式的值为false，则new Vue()自动为当前元素添加display:none。
示例关键代码如下：
<style>
.pop{
width:300px; height:150px;
background-color:lightGreen;
}
.pop>.close{
float:right;
padding:5px 10px;
cursor:pointer;
}
</style>
<div id="app">
<button @click="show">show</button>
<div v-show="display" class="pop">
<span class="close" @click="hide">×</span>
</div>
</div>
<script>
//2. 创建new Vue对象
new Vue({
el:"#app",
data:{
display:false
},
methods:{
show(){
this.display=true;
},
hide(){
this.display=false;
}
}
})
</script>
v-if 和 v-else
v-if 和 v-else 是在html实现分支控制，二选一的一种实现方式，在使用时，v-if和v-else对应的的两个元素必须紧挨着写！中间不能插入其他元素，其基本语法为：
<元素1 v-if="boolean类型的变量或js表达式"> <元素2 v-else>
示例关键代码如下：
<div id="app">
<!--第一个div是已登录时显示的内容-->
<div v-if="isLogin"><h3>Welcome, dingding | <a href="javascript:;" @click="logout">注销</a></h3></div>
<!--第二个div是未登录时显示的内容-->
<div v-else><a href="javascript:;" @click="login">登录</a> | <a href="javascript:;">注册</a></div>
</div>
<script>
new Vue({
el:"#app",
data:{
isLogin:false //开局用户默认是未登录的
},
methods:{
login(){
this.isLogin=true;
},
logout(){
this.isLogin=false;
}
}
})
</script>
v-else-if
v-else-if专门和v-if搭配使用，控制多个元素多选一显示的特殊的指令。其基本语法为：
<元素1 v-if="条件1"> <元素2 v-else-if="条件2"> <元素3 v-else-if="条件3"> ... ... <元素n v-else>
注意，v-if和v-else-if和v-else之间必须连着写，不能插入其他元素。
示例关键代码如下：
<div id="app">
<span v-if="score>=90">优秀</span>
<span v-else-if="score>=80">良好</span>
<span v-else-if="score>=70">及格</span>
<span v-else>及格</span>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
score:95
}
})
//在控制台中: vm.socre=85
</script>
v-for
v-for是一个专门用于根据数组内容反复生成多个相同结构的元素的特殊指令。其语法为：
<要反复生成的元素 v-for="(当前元素值, 当前位置) of 数组">
示例关键代码如下：
<div id="app">
<!--需求: 根据tasks数组中的任务列表反复生成多个li-->
<ul>
<li v-for="(t,i) of tasks" :key="i">
{{i+1}} - {{t}}
</li>
</ul>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
//用一个数组保存待办事项列表
tasks:["吃饭", "睡觉"]
}
})
</script>
v-for还可以遍历对象属性，例如：
<div id="app">
<!--需求: 遍历lilei对象，在页面显示李磊对象的详细信息-->
<ul>
<li v-for="(value,key) of lilei" :key="key">
{{key}} : {{value}}
</li>
</ul>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
lilei:{
name:"Li Lei",
age:11
}
}
})
</script>
v-for 还可以进行计数，例如：
<div id="app">
<ul>
<li v-for="i of pageCount" :key="i">{{i}}</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
pageCount:5 //共5页
}
})
</script>
v-on
v-on 是一个专门绑定事件处理函数的指令，其基本语法为：
<元素 v-on:事件名="事件处理函数名()">
v-on 也可以使用@符号代替，其基本语法结构为：
<元素 @事件名="事件处理函数名()
如果事件处理函数不需要传入实参值，则()也可省略,例如：
<元素 @事件名="事件处理函数名">
凡是在页面中定义的事件处理函数，都要在new Vue()中的methods成员内添加对应的函数实体。
示例关键代码如下：
<div id="app">
<!--点哪个div，哪个div就可以喊自己疼！-->
<div id="d1" @click="say('html')">d1</div>
<div id="d2" @click="say('css')">d2</div>
</div>
<script>
new Vue({
el:"#app",
methods:{
say(name){
console.log(`hello ${name}!`)
}
}
})
<script>
v-html
如果{{}}绑定的是一段HTML片段时，是不会交给浏览器解析的。而是原样显示HTML片段的内容——和DOM中的textContent是一样的,假如希望html可被解析可以使用v-html代替{{}}。其基本语法结构为：
<元素 v-html="变量"> 这个位置显示变量内容 </元素>
示例关键代码如下：
<div id="app">
<h3>{{msg}}</h3>
<h3 v-html="msg"></h3>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:`来自<<<a href="javascript:;">新华社</a>>>的消息`
}
})
</script>
v-text
v-text是可代替{{}}绑定元素内容的特殊指令,用于设置元素内部的文本内容，而且可以防止因网络延迟短暂显示{{}}的现象。其语法为：
<元素 v-text="变量或js表达式"> </元素>
示例关键代码如下：
<div id="app">
<!--js的天下 -->
<h3 v-text=`用户名:${uname}`></h3>
<!--js的天下 -->
<h3 v-text=`积分:${score}`></h3>
</div>
<script>
setTimeout(function(){
new Vue({
el:"#app",
data:{
uname:"dingding",
score:1000
}
})
},6000)
</script>
v-model
v-model 是用于实现双向绑定的指令，既能将程序中的变化，自动更新到页面上(model->view)，又能将页面上发生的变化，更新回程序中的变量中(view->model),其基本语法为：
<表单元素 v-model:value="变量">
示例关键代码如下：
<div id="app">
<!--单向绑定: (Model->View 不能View->Model)-->
<!-- <input :value="keyword"> -->
<!--双向绑定: (Model->View 又能View->Model)-->
<input v-model:value="keyword">
<button @click="doUpdate">更新</button>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
keyword:"ABC" //开局用户没有输入任何关键词
},
methods:{
doUpdate(){
console.log(`查找 ${this.keyword} 相关的内容...`)
}
}
})
<script>
单选操作的双向绑定：
单选操作的value因为是写死的固定的备选值！用户在不同radio之前切换选中状态时，其实改变的是radio的checked属性值。所以，想用双向绑定获得当前选中的radio的值，应该绑定checked属性:
<input type="radio" value="固定值" v-model:checked="变量">
示例代码如下：
<div id="app">
性别:
<label><input type="radio" name="sex" value="1" v-model:checked="sex">男</label>
<label><input type="radio" name="sex" value="0" v-model:checked="sex">女</label>
<h3>您选的性别是:{{sex==1?"男":"女"}}</h3>
</div>
<script>
new Vue({
el:"#app",
data:{
sex:1
}
})
</script>
select元素的双向绑定
一个select下包含多个option元素。所有备选值value，都分布在每个option上。但是每个备选值value也是写死的。用户每次选择不同的option时，其实select元素会将选中的option的value值，修改到select的value属性上。其语法为：
<select v-model:value="变量"> <option value="值1">xxx</option> ... ... ... ... </select>
示例代码如下：
<div id="app">
<select v-model:value="src">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="hangzhou">杭州</option>
</select><br/>
<img :src="src">
</div>
<script>
new Vue({
el:"#app",
data:{
src:"beijing"
}
})
</script>
总结(Summary)
本小节，主要是对vue中常用的的一些指令元素进行了分析，在理解和应用的过程中可以参考本文档和官方文档再结合实践进行熟练应用。
-
Vue CLI多环境配置学习：从入门到实践11-24
-
Vue CLI多环境配置学习：新手入门教程11-24
-
Vue CLI学习：初学者指南11-24
-
Vue CLI学习：从入门到上手的简单教程11-24
-
Vue3+Vite学习：从零开始的前端开发之旅11-24
-
Vue3阿里系UI组件学习入门教程11-24
-
Vue3的阿里系UI组件学习入门指南11-24
-
Vue3公共组件学习：新手入门教程11-24
-
Vue3公共组件学习入门指南11-24
-
vue3核心功能响应式变量学习11-24
-
Vue3学习：从入门到初级实战教程11-24
-
集成Ant Design Vue的图标入门11-24
-
集成Ant Design Vue图标入门教程11-24
-
Vue新手入门教程：从零开始学习Vue框架11-23
-
如何集成Ant Design Vue的图标11-23
