vuejs指令的详细说明

时间：2021-09-06 来源：互联网编辑：宝哥软件园浏览：次

垂直中频

v-if指令可以根据表达式的值完全生成或移除DOM中的一个元素。如果v-if表达式的计算结果为false，则相应的元素将从DOM中移除。否则，相应元素的克隆将被重新插入到DOM中，代码如下：

div id=' example-2 ' p v-if=' hello！/p/div脚本类型=' text/JavaScript' var示例VM 2=newvue ({el:' # example-2 '，data : { helling : true } })/script由于v-if是指令，因此需要将其添加到元素中。但是，如果要切换多个元素，可以使用模板元素作为包装元素，并对其使用v-if，最终的渲染结果不会包含它。代码如下：

div id='example-2 '模板v-if=' helling ' h1 title/h1 pParagraph 1/p pParagraph 1/p/template/div script type=' text/JavaScript ' var example vm2=new Vue({ El : ' # example-2 '，data : { greet : true } })/script v-show

v-show指令根据表达式的值显示或隐藏HTML元素。当v-show被赋值为false时，元素被隐藏。当您查看DOM时，您会发现元素上有一个内联样式style='display:none '。

如图所示：

注意：v-show不支持模板语法。

一般来说，v-if的切换消耗较高，而v-show的初始渲染消耗较高。因此，如果需要频繁切换，最好使用v-show；如果运行时条件不太可能改变，最好使用v-if。

否则

V-else在JavaScript中是else的意思，必须和v-if或者v-show一起使用。以下代码：

Div id='example' P v-if='ok '我是对的/P p v-else='ok '我是错的/p/div脚本类型=' text/JavaScript' var示例VM 2=newvue ({el:' # example '，Data : { ok : false } })/脚本在组件上使用v-show时，因为指令v-else的优先级会导致问题，所以不要这样做。我们可以用另一个电视节目代替v-else。

v型

v-model指令用于在表单控件元素(如输入、选择、文本、复选框和单选按钮)上创建双向数据绑定。根据控制类型v-model自动选择更新元素的正确方法。代码如下：

Div id='example '表单名称：输入类型=' text' v-model=' data.name '占位符=' name '/br/性别：输入类型=' radio' id=' one '值=' one ' v-model=' data . sex '/Label for=' man '男/Label输入类型=' radio' id=' two '值=' two ' v-model=' data . sex '/Label for='男'女/Label br/Input type=' checkbox ' id=' jack '值=' book' v-model=' 标签输入类型=' checkbox ' id=' John ' value=' swim ' v-model=' data . interest '/标签为=' John ' swing/Label输入类型=' checkbox ' id=' move ' value=' game ' v-model=' data . interest '/标签为=' move' game/Label输入类型=' checkbox ' id=' Mike ' value=' song ' v-model=' data . interest '/标签为=' Mike' sing /label br/Identity:选择v-model=' data。 identity '选项值=' teacher '所选教师/选项值=' doctor ' doctor/选项值=' professional '律师/选项/select/form/div script type=' text/JavaScript ' new Vue({ El : ' # example }，data: { data:{ name: ' '，sex: ' ' '，interest:[]，identity : ' ' } })/script除了上述用法外，多个参数(number，lazy

1 .数量

如果希望用户的输入自动转换为number类型(如果原始值的转换结果为NAN，则返回原始值)，可以添加Number属性。

2 .懒惰

默认情况下，v-model同步输入事件中的输入框值和数据。我们可以添加一个惰性特性来改变发生在变更事件中的数据。代码如下：

div id='example '输入v-model=' msg ' lazy style=' width :500 px；'/br/

设置最小延迟，并在每次点击后延迟同步输入框的值和数据。如果每次更新都需要昂贵的操作(例如，在输入内容时随时发送ajax请求)，这将非常有用。

输入v-model='msg '去抖='5000'/

v形重复

v-repeat指令基于源数据重复呈现元素。您可以使用$index来呈现相应的数组索引。不细说。

阵列变化检测

Vue.js封装了观察到的数组的变体方法，因此它们可以触发视图更新。包装方法有：push()、pop()、shift()、unshift()、split()、sort()、reverse()

example 1 . items . push({ message : ' Baz ' })；example 1 . items=example 1 . items . filter(function(item){ return item . message . match(/Foo/)；});Vue.js还添加了两种方法来观察变化：$set和$remove。

我们应该尽量避免直接设置数据绑定数组元素，因为vue.js不会检测到这些变化，因此视图呈现也不会更新。您可以使用$set方法：

demo.items.$set(0，{childMsg: '已更改！'})

$remove是$splice的语法糖，用于从目标数组中查找和删除元素：

demo . items . $ remove(0)；

注意：ECMAScript5无法检测到对象中添加或删除了新属性。为了应对这种情况，Vue.js增加了三种方法：$add(key，value)、$set(key，value)和$delete(key，value)，可用于添加和删除属性以及触发视图更新。

内置过滤器

1.筛选依据(0.12版)

实现如图所示：

div id=' example ' input v-model=' search text '/ul Li v-for=' user in users | filterBy search text in ' name ' ' { { user . name } }/Li/ul/div script type=' text/Javascript ' new vue({ El : ' # example }，data : { users 3360[{ name 3360 ' express train '，tag:'1' }，{ name: ' taxi '，tag: ' 2 '

2.订购人(0.12版)

实现降序，例如：

div id=' Example ' ul Li v-for=' user in users | order by字段reverse ' { user . name } }/Li/ul/div script type=' text/JavaScript ' new Vue({ El : ' # Example '，data: {field:' tag '，reverse:-1，users 3360[{ name 3360 ' taxi '，tag3360' 2'}，{ name: ' express train '，tag3360Tag:'3' }，{name:' special car '，tag : ' 4 ' }]})/script v-for

使用$index获取相应的数组索引。

div id=' example ' ul Li v-for=' item of items ' class=' item-{ $ index } } ' { { $ index } }-{ { parent message } }-{ { item . msg } }/Li/ul/div script type=' text/JavaScript ' new vue({ El : ' # example '，data : { parent message : ' Didi '，item :[{msg: '搭便车' }，{ msg :

有时我们可能想要重复包含多个DOM元素的块，我们可以使用模板，例如：

ultemplate v-for=' items '中的项Li { { item . msg } }/Li Li class=' divider '/Li/template/ulv-for也支持整数

代码如下：

div span v-for=' n in 10 ' { n } }/span/div or

div span v-for=' n in 10 ' { $ index } }/span/div v-text

v-text指令可以更新元素的文本内容。

span v-text=' msg '/span br/span { { msg } }/span得到相同的结果。

v-html

v-html指令更新元素的innerHTML。

div id=' example ' p v-HTML=' HTML '/p p p { { { HTML } } }/p/div脚本类型=' text/JavaScript ' new vue({ El : ' # example '，data : { HTML : ' PSame effect/p ' })

垂直装订

v-bind指令用于动态地将一个或多个属性或组件属性绑定到表达式，以响应HTML属性的更新。V-bind可以缩写为：

！-完整语法-av-bind: href=' URL' rel='外部nofollow' rel='外部nofollow'/a！-缩写-a: href=' URL' rel='外部nofollow' rel='外部nofollow'/a！-完整语法-button v-bind : disabled=' somdynamic condition ' button/button！-缩写-button : disabled=' somdynamic condition '按钮/button在绑定类或样式时支持其他类型的值，如数组或对象。例如：

div id=' example ' div : class='[CLaSS a，{classB:isB，CLaSS c : ISc }]'/div/div script type=' text/JavaScript ' new Vue({ El : ' # example '，Data: {class a:' a '，isb: false，isc 3360 true } })/脚本结果如下：

如果没有参数，可以绑定到对象。请注意，类和样式绑定此时不支持数组和对象(对象键将被转换为小写)。代码如下：

div id=' example ' div v-bind=' { id : some prop，' other attr ' : other prop } '/div/div script type=' text/JavaScript ' new Vue({ El : ' # example '，Data: {someprop:' idname '，other prop : ' prop ' })/脚本结果如下：

绑定prop时，prop必须在子组件中声明。您可以使用修饰符指定不同的绑定类型。修饰词是：

Sync——双向绑定，只能用于正确绑定。

Once——单一绑定只能用于正确绑定。camel——将绑定要素名称转换回驼峰命名。它只能用于绑定普通的HTML功能，通常用于绑定以驼峰命名的SVG功能，比如viewBox。

v-on

v-on指令用于绑定事件侦听器。事件类型由参数指定。

如果访问原始的DOM事件，可以使用$event传入方法。

按钮v-: click=' doThis(' hello '，$event)'/button！-缩写-button @ click=' dothis ('hello '，$ event)'/button完整示例：

div id=' example ' button v-: click=' greet ' greet/button/div var VM=new Vue({ El : ' # example }，data: { name: 'Vue.js' }，//定义方法methods : { greet : function(event){//方法中的这个指向vm alert('Hello' this.name)！)//event是原生的DOM事件alert(event . target . tagname)} })//也可以在JavaScript代码中调用vm.greet()方法；///‘你好Vue.js！# # #事件修饰符

！-防止点击事件冒泡-a v-: click。停下来！-提交事件不再重载页面-表单v-: submit . prevent=' on submit '/表单！-修饰符可以串联-av-: click。停下来。防止='那样做'！-仅修饰符-形成v-on:submit.prevent/form###键修饰符

！-调用VM . submit()-input TV-: keyup . 13=' submit '仅当keyCode为13！-同上-输入on:键盘。输入='提交'！-缩写语法-input @ keyup.enter=' submit '所有键别名：enter、tab、delete、esc、space、up、down、left、right

v-ref

在父组件上注册子组件的索引，以便直接访问。不需要表达式，必须提供参数id。可以通过父组件的$refs对象访问子组件。

垂直el

为DOM元素注册一个索引，这便于通过其实例的$els进行访问。你可以设置这个。$els.someEl搭配v-el:some-el。

span v-El : msg hello/span v-El : other-msg world/span通过这个获取对应的DOM元素。$els:

这个。$ els.msg.textcontent//'hello'这个。$ els.othermsg.textcontent//'world'在新的vuejs中，为了简单起见，v-el和v-ref被合并到一个ref属性中，该属性可以由组件实例中的$refs调用。

v预

跳过此元素及其子元素的编译。它可以用来显示原来的小胡子标签。在没有指令的情况下跳过大量节点将加快编译速度。

span v-pre{{这不会被编译}}/span

v形斗篷

此指令将保留在元素上，直到相关联的实例完成编译。当与[v-斗篷] {display: none}等CSS规则一起使用时，该指令可以隐藏未编译的小胡子标签，直到实例准备好。

Css代码：