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 相关文章推荐
ScrollDown的基本操作示例
Jun 09 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
Bootstrap树形控件使用方法详解
Jan 27 Javascript
JavaScript如何实现组合列表框中元素移动效果
Mar 01 Javascript
微信小程序 教程之WXSS
Oct 18 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
基于angular实现模拟微信小程序swiper组件
Jun 11 Javascript
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
vue模式history下在iis中配置流程
Apr 17 Javascript
JS实现长图上下滚动效果
Mar 19 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 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
《魔兽世界》惊魂幻象将获得调整
2020/03/08 其他游戏
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
JavaScript类和继承 constructor属性
2010/03/04 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
用最少的JS代码写出贪吃蛇游戏
2018/01/12 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
2018/06/28 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
Python Requests安装与简单运用
2016/04/07 Python
Python 加密的实例详解
2017/10/09 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
python解析含有重复key的json方法
2019/01/22 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
详解Django中异步任务之django-celery
2020/11/05 Python
windows系统Tensorflow2.x简单安装记录(图文)
2021/01/18 Python
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
python OpenCV学习笔记
2021/03/31 Python
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python