Vue学习之常用指令实例详解


Posted in Javascript onJanuary 06, 2020

本文实例讲述了Vue常用指令。分享给大家供大家参考,具体如下:

1、创建一个vue实例

vue的一个特点就是数据驱动界面,一旦对js中的数据进行修改,界面中用到数据的地方也会立马做出更改。为了对界面进行操纵,需要先获取到界面的标签元素,并实例化一个vue实例。

例如在HTML创建一个div:

<div id="app">
  <p>{{msg}}</p>
</div>

在js中将其实例化为vue对象:

let app=new Vue({
    el:'#app',//标签的类名、id,用于获取元素
    //以键值对的形式存放用到的数据成员
    data:{
      msg:'显示的内容'
    },
    //包含要用到的函数方法
    methods:{
    }
  });

这样js中msg的内容就会在p标签内显示出来。

2、vue常用指令

1、 v-model:将组件与变量进行双向绑定,当组件数据修改时,变量会随之改变。它后面可加修饰符,例如.lazy,只有在标签中的值发生改变时才同步到变量,.trim过滤用户输入中的空格。

2、v-once:不允许修改数据,例如HTML中有如下三个标签:

<div id="app">
    <p v-once>{{msg}}</p>
    <p>{{msg}}</p>
    <input type="text" v-model="msg">
  </div>

在input框内输入内容后,会传到msg变量中,第二个p标签内显示的信息会随着msg发生变化,而第一个带有v-once的p标签则只会显示msg的初始值,不会随之变化。

3、v-if="表达式",根据表达式的结果来判断,是true则渲染元素,false则将元素注释掉

4、v-show与v-if类似,true就渲染,但是false并不是注释掉,而是通过display:none;来将元素隐藏,如果需要来回切换,使用v-show更好。例如:  

<p v-if="show">显示内容</p>
<p v-if="hide">注释内容</p>
<p v-show="hide">v-show隐藏</p>

令show:true,hide:false,结果如下:

Vue学习之常用指令实例详解

5、v-else、v-else-if与v-if连在一起使用构成逻辑判断,根据返回值决定是否显示,不可以单独或者分开使用,例如:

<p>请输入分值:</p>
<input type="text" v-model="score">
<p v-if="score>90">优秀</p>
<p v-else-if="score>80">良好</p>
<p v-else-if="score>60">中等</p>
<p v-else>不及格</p>

测试结果为:

Vue学习之常用指令实例详解

6、v-for用于遍历元素,使用格式为v-for="(值,键) in 遍历内容",其遍历的内容可以是数组、对象、字符串,例如在js的data中有一个person对象,person:{name:'tony',age:15,sex:'男'},将其内容在页面遍历输出: 

<p v-for="(value,key) in person">
  {{key+':'+value}}
</p>

生成结果如下:

Vue学习之常用指令实例详解

7、v-text:向标签内注入数据,并且覆盖标签内的其他内容

8、v-html:向标签内覆盖注入HTML内容作为其子元素。例如:

<div v-html="vhtml">标签内原来内容</div>

结果插入一个子div并将覆盖原内容:

Vue学习之常用指令实例详解

9、v-bind:给标签绑定属性、类、样式等,可以缩写为冒号,例如:    

<!-- 完整语法 -->
<a v-bind:href="url" rel="external nofollow" rel="external nofollow" >...</a>
<!-- 缩写 -->
<a :href="url" rel="external nofollow" rel="external nofollow" >...</a>

由于vue的界面元素都是由数据驱动的,js代码从服务器获得的属性、样式等数据需要通过绑定加到HTML界面元素上,通过绑定可以更为灵活地选择要添加属性的元素。Vue并不是直接操纵元素的class,而是通过绑定一个数据到class上,然后通过数据驱动class的有无,从而改变页面的显示,这充分显示了vue数据驱动的特点。

例如给上面person对象中key为'name'的那一行信息绑定一个active类使其高亮显示:

<!--通过v-for循环遍历person数组,绑定class,如果键值为name,绑定的class='active'-->
<p v-for="(value,key) in person" :class="key==='name' ? 'active' : ''">
  {{key+':'+value}}
</p>

结果:

Vue学习之常用指令实例详解

也可以使用如下方法来绑定一个类名,页面会根据变量isActive与hasError的true或false来确定是否绑定active与text-danger类,甚至可以将active设为计算属性,运算后返回true/false。

注意:绑定的属性可以用驼峰命名法或使用短横线来连接,但使用短横线要用引号引起来

<div class="static"
   v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

10、v-on:给标签绑定函数,可以缩写为@,例如绑定一个点击函数

<p>{{msg}}</p>
<button @click="changeContent()">change</button>

在Vue的methods中实现changeContent函数:

let app=new Vue({
    el:'#app',
    data:{
      msg:'第一次输入信息',
    },
    methods:{
      changeContent(){
        this.msg="修改后的输入信息";
      }
    }
  });

原页面与点击后:

Vue学习之常用指令实例详解Vue学习之常用指令实例详解

Vue.js 为 v-on 提供了事件修饰符。修饰符是由.开头的指令后缀来表示的,用于对事件进行约束。例如:

<!-- 阻止单击事件继续传播 --> 
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 --> 
<form v-on:submit.prevent="onSubmit"></form> 
<!-- 修饰符可以串联使用,并且使用的顺序很重要 --> 
<a v-on:click.stop.prevent="doThat"></a> 
<!-- 添加事件监听器时使用事件捕获模式 --> 
<!-- 即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 --> 
<div v-on:click.capture="doThis">...</div> 
<!-- 只当在 event.target 是当前元素自身时才触发函数 --> 
<!-- 即事件不从内部元素触发 --> 
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

除了点击事件外,还有按键事件,例如按下键盘码为13的按钮时触发:

<input v-on:keyup.13="submit">

为了方便使用vue将一些常用按键重命名,可以使用事件修饰符来使用,包括:.enter、.delete、.tab、.space、.esc、.up、.down、.right、.left等,也可以自定义:

Vue.config.keyCodes.f1 = 112;

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
Javascript 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
jquery选择器、属性设置用法经验总结
Sep 08 Javascript
JQuery validate插件验证用户注册信息
May 11 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
Mar 10 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
layui自定义ajax左侧三级菜单
Jul 26 Javascript
vue实现select下拉显示隐藏功能
Sep 30 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
Apr 30 Javascript
Vue学习之组件用法实例详解
Jan 06 #Javascript
Vue+abp微信扫码登录的实现代码示例
Jan 06 #Javascript
Vue学习之axios的使用方法实例分析
Jan 06 #Javascript
vue 微信扫码登录(自定义样式)
Jan 06 #Javascript
React学习之JSX与react事件实例分析
Jan 06 #Javascript
vue学习之Vue-Router用法实例分析
Jan 06 #Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 #Javascript
You might like
MyEclipse常用配置图文教程
2014/09/11 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
记录Yii2框架开发微信公众号遇到的问题及解决方法
2018/07/20 PHP
PhpStorm+xdebug+postman调试技巧分享
2020/09/15 PHP
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
Vue 使用beforeEach实现登录状态检查功能
2019/10/31 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
浅谈Python单向链表的实现
2015/12/24 Python
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
python实现傅里叶级数展开的实现
2018/07/21 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
HEMA法国:荷兰原创设计
2019/02/21 全球购物
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
自考生自我鉴定范文
2013/10/01 职场文书
毕业生优秀推荐信
2013/11/26 职场文书
电大毕业生自我鉴定
2014/04/10 职场文书
市场拓展计划书
2014/05/03 职场文书
教师文明餐桌光盘行动倡议书
2015/04/28 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL