10.指令---(vue入门文档学习记录)

谁借莪１个温暖的怀抱￠ 2022-01-06 09:29 232阅读 0赞

**指令**

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。回顾我们在介绍中看到的例子：

<p v-if="seen">现在你看到我了</p>

这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 < p> 元素。

也就是说:指令通过值来控制DOM的展示,即使不在vue实例中绑定也可以达到效果也就是说可以直接这样写:

<p v-if="true">现在你看到我了</p>

另外: 指令的值预期是单个js表达式,注意是单个js表达式.

**1.1参数**  
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 特性：

<a v-bind:href="url">...</a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。

另一个例子是 v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">...</a>

在这里参数是监听的事件名。我们也会更详细地讨论事件处理。

例:

<div id="app10">
    			<a v-bind:href="data">百度</a>
    		</div>
    		<script>
    			var data="http://www.baidu.com"
    			new Vue({
    				el:"#app10",
    				data:data
    			})
    		</script>

展示结果:

百度  
然后点击的话就会跳到百度页面

**1.2动态参数**

从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

<a v-bind:[attributeName]="url"> ... </a>

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data 属性 attributeName，其值为 “href”，那么这个绑定将等价于 v-bind:href。

同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：

<a v-on:[eventName]="doSomething"> ... </a>

同样地，当 eventName 的值为 “focus” 时，v-on:\[eventName\] 将等价于 v-on:focus。

**对动态参数的值的约束**

动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

注:  
动态参数设为null可以显示的用于移除绑定,指的是该绑定的效果没了,但是并不影响DOM.相当于移除掉该指令.

**对动态参数表达式的约束**

动态参数表达式有一些语法约束，因为某些字符，例如空格和引号，放在 HTML 特性名里是无效的。同样，在 DOM 中使用模板时你需要回避大写键名。  
例如，下面的代码是无效的：

<a v-bind:['foo' + bar]="value"> ... </a>

变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。

另外，如果你在 DOM 中使用模板 (直接在一个 HTML 文件里撰写模板)，需要留意浏览器会把特性名全部强制转为小写：

<a v-bind:[someAttr]="value"> ... </a>

注:

计算属性?是否是指的计算的部分在js中做,通过例如:

var valuetest='foo' + bar;

用valuetest来代替’foo’ + bar

另:  
命名的时候,不要有大写字母可以通过-来连接两个单词

**1.3修饰符**

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit">...</form>

在接下来对 v-on 和 v-for 等功能的探索中，你会看到修饰符的其它例子。

发表评论取消回复

表情：

评论列表（有 0 条评论，232人围观）

还没有评论，来说两句吧...

相关阅读

相关 18.1事件修饰符 ---(vue入门文档学习记录)

事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方...

港控/mmm°/ 2024年04月19日 13:15/ 0 赞/ 84 阅读

相关 Vue指令学习文档

文章目录 Vue指令插值表达式 Vue基本指令 Vue指令之\`v-bind\`的三种用法 V

你的名字/ 2022年10月23日 08:15/ 0 赞/ 217 阅读

相关 3.条件与循环---(vue入门文档学习记录)

条件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title

水深无声/ 2022年10月01日 07:54/ 0 赞/ 183 阅读

相关 2.响应式编程---(vue入门文档学习记录)

响应式编程 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

Dear 丶/ 2022年10月01日 07:54/ 0 赞/ 181 阅读

相关 1.第一个vue.js---(vue入门文档学习记录)

声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统： <!DOCTYPE html> <html>

小灰灰/ 2022年10月01日 07:54/ 0 赞/ 205 阅读

相关 4.处理用户输入---(vue入门文档学习记录)

函数的调用以及事件处理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

曾经终败给现在/ 2022年01月17日 20:59/ 0 赞/ 271 阅读

相关 8.插值---(vue入门文档学习记录)

文本数据绑定最经常用的就是"Mustache"语法(两个大括号)的文本插值,注意这里特别标明只是文本插值,如果是html格式也会只显示文本. <span>Mess

爱被打了一巴掌/ 2022年01月12日 12:29/ 0 赞/ 307 阅读

相关 6.数据与方法---(vue入门文档学习记录)

数据与方法当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新

桃扇骨/ 2022年01月11日 06:09/ 0 赞/ 247 阅读

相关 10.指令---(vue入门文档学习记录)

指令指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职

谁借莪１个温暖的怀抱￠/ 2022年01月06日 09:29/ 0 赞/ 233 阅读

相关 13.侦听属性 ---(vue入门文档学习记录)

侦听属性先看下面的例子: <div id="computed_props"> 千米 : <input type="text" v-model="ki

╰+攻爆jí腚メ/ 2021年12月16日 09:43/ 0 赞/ 302 阅读