文章目录

背景分析
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:`来自&lt;&lt;<a href="javascript:;">新华社</a>&gt;&gt;的消息`}})</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="city"><option value="beijing">北京</option><option value="shanghai">上海</option><option value="hangzhou">杭州</option></select><br/><h3 :src="city"></h3></div>

<script>new Vue({el:"#app",data:{city:"beijing"}})</script>

总结(Summary)

本小节，主要是对vue中常用的的一些指令元素进行了分析，在理解和应用的过程中可以参考本文档和官方文档再结合实践进行熟练应用。

04-VUE 常用指令最佳实践相关推荐

Vue常用指令 [vue框架][web前端]
Vue常用指令 Vue常用指令: 指令: HTML标签上带有v-前缀的特殊属性, 不同的指令有不同的意义 v-bind 为HTML标签绑定属性值, 如设置href,css样式等 eg: <bod ...
vue lang_Vue + H5 最佳实践模板
模板基于 vue-cli4 和 Vant-ui 搭建,进行大型 H5 项目开发最佳实践方案,让我们来一探究竟项目结构本项目已经为你生成了一个完整的开发框架,下面是整个项目的目录结构. ├── .g ...
vue.js+boostrap最佳实践
一.为什么要写这篇文章最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...
VUE常用指令v-xxx
概述在vue中提供一些对于页面+数据的更为方便的操作,这些操作就叫做指令. 譬如在HTML页面中这样使用`<div v-xxx=''></div>` 在vue中v-xxx就是 ...
Vue 常用指令汇总
文章目录 1,vue简介 2,选择器:根据id.class等查找 3,静态绑定数据 data 4,插值 {{}}单项绑定 5,数据动态绑定:computed 6,数据双向绑定 :v-model 7,类 ...
Vue.js 第1章 Vue常用指令学习
今日目标能够写出第一个vue应用程序能够接受为什么需要学vue 能够使用指令能够通过指定完成简单的业务(增加删除查询) 能够理解mvvm 为什么要学习vue 企业需要可以提高开发效率实现vu ...
【vue 基础】 vue常用指令实例总结
文章目录 1.v-bind 2. v-on 2.1 参数问题 2.2 修饰符问题 3. v-for 4. v-if 5.v-show 6. v-model(重点) 6.1 原理 6.2 v-model ...
Vue 常用指令自定义指令
v-bind, v-model v-bind 为单向绑定: 数据只能从data流向页面 v-model 双向绑定: 数据不仅从data流向页面,还可以重页面流向data, 一般应用在表单类元素上,(如 ...
Vue常用指令v-show
v-show也是条件渲染指令,不同的是有 v-show 的元素会始终渲染并保持在 DOM 中.和v-if指令不同点在于:v-show是根据表达式之真假值,切换元素的 display CSS 属性,当条 ...
vue教程3：vue常用指令
v-text 作用:渲染文本到标签上,跟JQuery的text()方法类似直接上例子: <script>var app = new Vue({el: "#app",d ...

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)

04-VUE 常用指令最佳实践相关推荐

最新文章

热门文章