02、Vue.js指令

2019独角兽企业重金招聘Python工程师标准>>>

1、插值

在Vue.js指令学习之前&＃xff0c;先简单学习一下Vue插值

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

1.1 文本插值

{{hello}}

1.2 HTML 标签插值

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

1.3 简单的JS脚本

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

{{ num%2 }}


{{ num>2 }}

{{ num&＃61;&＃61;1? msg:hello }}

2、指令

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

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

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

2.01 v-text

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

{{hello}}

2.02 v-html

v-html 用于在指定标签中写入html 值&＃xff08;能够解析标签&＃xff09;

2.03 v-on

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

只可绑定 Vue 实例中的方法

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

可以简写为 ‘&＃64;’

2.04 v-bind

属性绑定

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

只完成数据到页面的操作&＃xff08;单向操作&＃xff09;

可以简写为 ‘:’

2.05 v-model

数据双向处理

只能在表单标签 &＃xff0c;局限于 表单标签的填值属性 (value)

会完成数据到页面和页面到数据的操作 &＃xff08;双向数据绑定&＃xff09;

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

2.06 v-pre

html 中

以用户格式进行输出
     v-pre 以用户格式进行输出
  2.07 v-cloak
     用于解决页面的闪烁问题&＃xff0c;解决 数据绑定前页面代码的 显示
  2.08 v-once
     对元素只做一次渲染
     后续所对应的数据发生变化时&＃xff0c;不会在产生改变
  2.09 v-if
     用于判断该属性所对应的元素是否正常显示
     在渲染模板时 判断 指定的元素是否需要渲染&＃xff08;创建元素&＃xff09;
     v-if可以引导 v-else 和 v-else-if 的使用
  2.10 v-show
     用于判断该属性所对应的元素是否正常显示
     在元素挂载时 判断指定的元素 是否要显示 &＃xff08;display: none;&＃xff09;
  2.11 v-else 和 v-else-if
     &＃96;v-else 和 v-else-if 的使用必须依赖于v-if 指令
  2.12 v-for
     对元素进行循环&＃xff0c;可以 循环数组、循环对象和数值
  3. 具体使用     Vue 对页面的元素处理采用虚拟DOM的格式进行实例化。
     vue 2.0.0后禁止在body及body外的其它元素中定义容器。这样可以保证页面代码的完整性。
     容器定义完成后&＃xff0c;本身会和指定的容器产生关联&＃xff0c;在容器外所定义的代码不能访问容器实例中的data数据。
  3.1 v-for
     v-for 可以循环数组、对象和数字。注意&＃xff1a;v-for 不同版本的变化
         vue 1.x v-for &＃61; “(k,v) in arr” 默认输出的是k&＃xff0c;v-for &＃61; “k in arr ”&＃xff1b;
         vue 2.x v-for &＃61; “(v,k) in arr” 默认输出的是v&＃xff0c;v-for &＃61; “ v in arr ”。
 



{{k}}&＃xff1a;{{v}}
{{k}}:{{v}}
{{k}}:{{v}}

3.2 v-cloak

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

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

{{info}}

在上段代码添加两处操作&＃xff1a;

{{msg}}

结果如下图所示&＃xff1a;

3.2 v-on

用于对指定元素进行事件绑定&＃xff0c;可以简写 ‘&＃64;’。

v-on:事件名&＃xff1d;“方法名()”&＃xff0c;可以简写成 &＃64;事件名&＃xff1d;“方法名()”。

方法定义在 methods 中。


{{msg}}

3.2.1 事件冒泡和默认事件

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

3.2.2 事件对象 $event

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

3.2.3 自定义修饰符

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

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

☛提供了一个配置接口 &＃xff0c;可以自定义键盘映射

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

☞测 2.5.3 版本键盘映射存在

若需要使用自定义修饰符时(版本升级)&＃xff0c;可以参考下段代码&＃xff1a;

Vue.config.keyCodes &＃61; {a:65 }

例 01&＃xff1a;点击键盘 a 键时触发事件&＃xff0c;并打印出事件源。主要代码如下&＃xff1a;

js部分代码

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

html部分

执行上述代码后&＃xff0c;在文本框中只有按键盘 a 键后&＃xff08;keyup&＃xff09;&＃xff0c;才会触发事件打印事件对象 e &＃xff0c;按其他键均无效。事件对象e的具体内容如下&＃xff1a;

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

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

3.3 v-bind

用法&＃xff1a; v-bind: 属性名 &＃61; "属性值"&＃xff0c;可以简写为 :属性名&＃61;"属性值"

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

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

3.3.2 v-bind 绑定 HTML 标签属性

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

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

v-bind参数是字符串&＃xff0c;多加一对引号

v-bind参数是data中定义的变量

v-bind参数是数组&＃xff0c;其中数组的每个元素又是data中定义的变量&＃xff0c;显示效果是 class&＃61;"aa bb"

v-bind参数是对象&＃xff0c;索引是在css中定义的样式&＃xff0c;值是true(显示)/false(不显示)

上段代码的执行结果如下&＃xff1a;

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

:style &＃61; "{ color: 变量名/字符串, fontSize: 变量名/字符串 }"

至此&＃xff0c;完毕&＃xff0c;感谢阅读。