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引起的内存泄漏问题
Oct 08 Javascript
js猜数字小游戏的简单实现代码
Jul 02 Javascript
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
JS实现图片无间断滚动代码汇总
Jul 30 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
微信小程序 canvas API详解及实例代码
Oct 08 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
Angularjs 事件指令详细整理
Jul 27 Javascript
vue 2.0 购物车小球抛物线的示例代码
Feb 01 Javascript
Vue 页面跳转不用router-link的实现代码
Apr 12 Javascript
JS实现的简单下拉框联动功能示例
May 11 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
PHP提取中文首字母
2008/04/09 PHP
smarty内置函数foreach用法实例
2015/01/22 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
2017/01/08 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
python数据结构之图的实现方法
2015/07/08 Python
Python导出DBF文件到Excel的方法
2015/07/25 Python
Python数据类型详解(一)字符串
2016/05/08 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
小学生自我鉴定
2013/10/12 职场文书
优秀应届生推荐信
2013/11/09 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
文明班集体申报材料
2014/05/23 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL