02、Vue.js---指令


声明:本文转载自https://my.oschina.net/u/3563169/blog/1575899,转载目的在于传递更多信息,仅供学习交流之用。如有侵权行为,请联系我,我会及时删除。

1、插值

    在Vue.js指令学习之前,先简单学习一下Vue插值

    语法:{{ }},将vue 实例中的数据 写入到页面对应的位置。下面代码中hello、msg、num等均是在vue的data中定义的变量。

1.1 文本插值

<div>{{hello}}<div>

1.2 HTML 标签插值

    Vue.js中没有直接的语法可以完成HTML标签插值,需要Vue指令 v-html方法实现。

<div v-html="msg" ></div>

1.3 简单的JS脚本

    在页面中加载数据时,可以实现简单的运算和判断

<div>{{ num%2 }}</div> <div>{{ num>2 }}</div> <div>{{ num==1? msg:hello }}</div>

2、指令

    Vue的指令以 v- 开头,以元素的属性方式存在的。官网给出了十三条指令,具体见下文。

    指令参数,参数以 ‘:’ 为关键字,写在指令的后面,并接受一个具有实际意义的参数值,如:v-on:click =""

    指令修饰符:判断事件的触发条件,以 ‘.’ 为关键字写在指令和参数的后面,并接受一个具有实际意义参数或者键盘码。

2.01 v-text

    v-text 作用和 {{ }} 相同,在指定的位置写入变量参数,纯文本。下面两行代码效果相同。其中,hello是变量。

<div>{{hello}}</div> <div v-text="hello"></div>

2.02 v-html

    v-html 用于在指定标签中写入html 值(能够解析标签)

<div v-html="hello"></div>

2.03 v-on

    用于对指定元素进行事件绑定

    只可绑定 Vue 实例中的方法

    方法中 无法直接访问 vue 实例中的属性

    可以简写为 ‘@’

2.04 v-bind

    属性绑定

    表单标签 和 所有的html 的元素标签进行属性绑定,不局限于HTML 的原始属性

    只完成数据到页面的操作单向操作

    可以简写为  ‘:’ 

2.05 v-model

    数据双向处理

    只能在 表单标签 ,局限于 表单标签的填值属性 (value)

    会完成数据到页面 和 页面到数据的操作 (双向数据绑定)

    在第一篇博客中《Vue.js 开篇---Vue的介绍及准备工作》的事例中,之所以在文本框改动数据,页面会同步更新,就是因为使用了 v-model 来绑定 input 文本框的值。

2.06 v-pre

    html 中<pre>以用户格式进行输出

    v-pre 以用户格式进行输出

2.07 v-cloak

    用于解决页面的闪烁问题,解决 数据绑定前页面代码的 显示

2.08 v-once

    对元素只做一次渲染

    后续所对应的数据发生变化时,不会在产生改变

2.09 v-if

    用于判断该属性所对应的元素是否正常显示

    在渲染模板时 判断 指定的元素是否需要渲染(创建元素)

    v-if可以引导 v-else 和 v-else-if 的使用

2.10 v-show

    用于判断该属性所对应的元素是否正常显示

    在元素挂载时 判断指定的元素 是否要显示 (display: none;)

2.11 v-else 和 v-else-if

    `v-else 和 v-else-if 的使用必须依赖于v-if 指令

2.12 v-for

    对元素进行循环,可以 循环数组、循环对象和数值

3. 具体使用

    Vue 对页面的元素处理采用虚拟DOM的格式进行实例化。

    vue 2.0.0后禁止在body及body外的其它元素中定义容器。这样可以保证页面代码的完整性。

    容器定义完成后,本身会和指定的容器产生关联,在容器外所定义的代码不能访问容器实例中的data数据。

3.1 v-for

    v-for 可以循环数组、对象和数字。注意:v-for 不同版本的变化

        vue 1.x v-for = “(k,v) in arr” 默认输出的是k,v-for = “k in arr ”;

        vue 2.x v-for = “(v,k) in arr” 默认输出的是v,v-for = “ v in arr ”。

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <title>v-for</title>   <script src="../js/vue.js"></script>   <script>     window.onload = function(){       new Vue({         el: "#app",         data:{           // 定义数组变量           arr:["a","b","c","d"],           // 定义对象变量           obj:{             id:01,             name:"Tom",             age:25,             other:".........."           },           // 定义数组变量           num:10         }       });     };   </script> </head> <body>   <div id="app">     <ul>       <!-- v-for循环数组 -->       <li v-for="(v,k) in arr">         {{k}}:{{v}}       </li>       <!-- 循环对象 -->       <li v-for="(v,k) in obj">         {{k}}:{{v}}       </li>       <!-- 循环数字 -->       <li v-for="(v,k) in num">         {{k}}:{{v}}       </li>     </ul>   </div> </body> </html>

3.2 v-cloak

    用于解决页面的闪烁问题:解决数据绑定前页面代码的显示。如下图的{{info}}。

                    

    如果下段代码在Chrome执行的时候没出现上图所示的效果,建议在火狐浏览器上测试一下。

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <title>v-cloak</title>   <script src="../js/vue.js"></script>   <script>     window.onload = function(){       alert("弹窗");//阻断后续代码执行       new Vue({         el:"#app",         data:{           info:"这是一条字符串"         }       });     };   </script> </head> <body>   <div id="app">     <p>{{info}}</p>   </div> </body> </html>

    在上段代码添加两处操作:

 <p v-cloak >{{msg}}</p>
<style>     [v-cloak]{         display: none;     } </style>

    结果如下图所示:

                

 

3.2 v-on

    用于对指定元素进行事件绑定,可以简写 ‘@’。

    v-on:事件名=“方法名()”,可以简写成  @事件名=“方法名()”。

    方法定义在 methods 中。

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <title>v-on</title>   <script src="../js/vue.js"></script>   <script>     window.onload = function (){       new Vue({         el:"#app",         data:{           msg:"默认值"         },         methods:{           show(){             alert("你点击了按钮");              // 还可以通过this的方式访问定义在data中的数据             this.msg="这是在方法中通过this的方式访问定义在data中的数据,并重新赋值"           }         }       });     };   </script> </head> <body>   <div id="app">     <input type="button" value="按钮" v-on:click="show()">     <!-- 此处也可以将 v-on: 简写成 @ -->     <!-- <input type="button" value="按钮" @click="show()"> -->     <hr/>     {{msg}}   </div> </body> </html>

               

3.2.1 事件冒泡和默认事件

    谈到事件时,就得说一说 事件冒泡和默认事件的处理。在 Vue.js 中事件冒泡使用 .stop 和 .self 处理,默认事件使用 .prevent 处理。具体可以参考我的《Vue.js---事件冒泡和默认事件处理》。

3.2.2 事件对象 $event

    vue.js可以识别的事件对象是 $event。@click=“方法名($event)”。在函数中可以传出参数打印看看该事件对象。

3.2.3 自定义修饰符

    ☛vue 1.0 键盘上所有的按键都有对应的别名 ==> a => .a ,ctrl => .ctrl ……

    ☛vue 2.0 删除了绝大多数的键盘映射,只保留了部分 常用修饰符

    ☛提供了一个配置接口 ,可以自定义 键盘映射

        ☞实测 2.0.0 版本 键盘映射被删除

        ☞测 2.5.3 版本 键盘映射存在

    若需要使用自定义修饰符时(版本升级),可以参考下段代码:

Vue.config.keyCodes = {     a:65 }

    例 01:点击键盘 a 键时触发事件,并打印出事件源。主要代码如下:

    js部分代码

window.onload = function (){   new Vue({     el:"#app",     methods:{       showA(e){         console.log("你按了a键");         console.log(e);       }     }   }); }

    html部分

<div id="app">   <input type="text" @keyup.a="showA($event)"> </div>

    执行上述代码后,在文本框中只有按键盘 a 键后(keyup),才会触发事件打印事件对象 e ,按其他键均无效。事件对象e的具体内容如下:

    因为shifkey、ctrlKey、altKey等的取值是Boolean类型,true是表示按了该键,false表示未按该键。所以,要同时 按 ctrl 和 a 键时,只需要将上面代码段的函数中加个判断条件。如下所示。当且仅当同时按下ctrl 和 a 键时会console.log出结果。

showA(e){   // console.log("你按了a键");   // console.log(e);   if(e.ctrlKey){     console.log("你按了ctrl + a 键");   } }

3.3 v-bind

    用法:        v-bind: 属性名 = "属性值",可以简写为     :属性名="属性值"

    3.3.1 v-bind绑定表单标签的值

    使用 v-bind 绑定表单标签的值使用方法是 v-bind:value ="值(可以是data中定义的变量)"。此时,其与 使用 v-model 的主要区别是:v-mdel 是双向绑定,当表单标签的值发生改变时,该变量的值也随之变化,当变量值发生变化时,表单的值也发生变化;而 使用 v-bind 绑定时,表单中的值发生变化不会影响变量中的值的变化。

    3.3.2 v-bind 绑定 HTML 标签属性

     v-bind 可以对所有的html 的元素标签进行属性绑定,并且不局限于HTML 的原始属性。也可绑定自定义的html标签的属性。

    以v-bind绑定 class 为例。v-bind绑定的属性不影响原生属性的绑定。其参数分为字符串、变量、数组和对象四类,具体直接见代码和注释。

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <title>v-bind 绑定class</title>   <style>     /* 宽高分别是 200px 100px 并且背景是 yellowgreen */     .aa{       width: 200px;       height: 100px;       background: yellowgreen;     }      /* 圆角 20px */     .bb{       border-radius: 20px;     }      /* 字体颜色红色 */     .colorRed{       color: red;     }     /* 字体颜色蓝色 */     .colorBlue{       color:blue;     }   </style>   <script src="../js/vue.js"></script>   <script>     window.onload = function (){       new Vue({         el:"#app",         data:{           test01:"aa",           test02:"bb",           flag: true         }       });     }   </script> </head> <body>   <div id="app">     <!-- v-bind 不影响原生属性的绑定 -->      <!-- 参数是字符串 -->     <div class="aa" :class="'bb'">v-bind参数是字符串,多加一对引号</div>     <hr/>     <!-- 参数是变量 -->     <div :class="test01">v-bind参数是data中定义的变量</div>     <hr/>     <!-- 参数是数组 -->     <div :class="[test01,test02]">v-bind参数是数组,其中数组的每个元素又是data中定义的变量,显示效果是 class="aa bb"</div>     <hr/>     <!-- 参数是对象 -->     <div :class="{colorRed:flag , colorBlue: !flag ,aa:true}">v-bind参数是对象,索引是在css中定义的样式,值是true(显示)/false(不显示)</div>     <input type="button" value="变色" @click = "flag = !flag">   </div> </body> </html>

    上段代码的执行结果如下:

                                                

    需要注意的是,当使用 v-bind 绑定 style属性使用使用对象传参的特殊性。印象 html 标签 style属性的设置本身就是对象形式 style = "{fontSize:'20px' , color:'red'}"。所以,在使用v-bind的时

:style = "{ color: 变量名/字符串, fontSize: 变量名/字符串 }"

 

 

至此,完毕,感谢阅读。如果您觉得本篇博客对您有用,记得给个赞哟

一入前端深似海,从此时间是路人。

                                                                                          --论前端的技术更新

 

 

 

 

 

本文发表于2017年11月20日 10:36
(c)注:本文转载自https://my.oschina.net/u/3563169/blog/1575899,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除.

阅读 1734 讨论 0 喜欢 0

抢先体验

扫码体验
趣味小程序
文字表情生成器

闪念胶囊

你要过得好哇,这样我才能恨你啊,你要是过得不好,我都不知道该恨你还是拥抱你啊。

直抵黄龙府,与诸君痛饮尔。

那时陪伴我的人啊,你们如今在何方。

不出意外的话,我们再也不会见了,祝你前程似锦。

这世界真好,吃野东西也要留出这条命来看看

快捷链接
网站地图
提交友链
Copyright © 2016 - 2021 Cion.
All Rights Reserved.
京ICP备2021004668号-1