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 相关文章推荐
jQuery库与其他JS库冲突的解决办法
Feb 07 Javascript
javascript ie6兼容position:fixed实现思路
Apr 01 Javascript
使用js在页面中绘制表格核心代码
Sep 16 Javascript
jquery队列queue与原生模仿其实现方法分享
Mar 25 Javascript
Javascript访问器属性实例分析
Dec 30 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 Javascript
JavaScript之WebSocket技术详解
Nov 18 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
node.JS路径解析之PATH模块使用方法详解
Feb 06 Javascript
vue实现锚点定位功能
Jun 29 Vue.js
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
PHP7.0版本备注
2015/07/23 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
PHP实现图片压缩
2020/09/09 PHP
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
基于jQuery的自动完成插件
2011/02/03 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
vue事件修饰符和按键修饰符用法总结
2017/07/25 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
python自动格式化json文件的方法
2015/03/11 Python
简单介绍Python中的round()方法
2015/05/15 Python
深入理解Python对Json的解析
2017/02/14 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
python实现低通滤波器代码
2020/02/26 Python
selenium设置浏览器为headless无头模式(Chrome和Firefox)
2021/01/08 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
城市规划毕业生求职信
2013/10/10 职场文书
国税会议欢迎词
2014/01/16 职场文书
总经理助理工作职责
2014/02/06 职场文书
会议欢迎标语
2014/06/30 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
信访工作个人总结
2015/03/03 职场文书
python中%格式表达式实例用法
2021/06/18 Python