vue爬坑之路3

Posted 2020-09-08

插值

　　

• 　　文本

　　　　　　　　数据绑定最常见的形式就是使用“Mustache”语法（双大括号）的文本差值：

　　　　　　　　　　<span>Message:{{msg}}</span>

　　　　　　　　Mustache标签将会被替代为对应数据对象上msg属性的值。无论何时，绑定的数据对象上msg属性发生了改变，插值处的内容都会更新。

　　　　　　　　通过使用v-once指令，能一次性地插值，当数据改变时，插值处的内容不会更新。但要注意这会影响到该节点上所有的数据绑定：

　　　　　　　　　　<span v-once>This will never change:{{ msg }}</span>

• 　　纯html

　　　　　　　　双大括号会将数据解释为纯文本，而不是把html里的解释成文本。为了能够输出html的真正文本，需要用到v-html指令。

　　　　　　　　　　<div v-html=‘rawHtml‘></div>

• 　　属性

　　　　　　　　Mustache不能在HTML属性中使用，应使用v-bind指令：

　　　　　　　　　　<div v-bind:id=‘dynamicId‘></div>

　　　　　　　　这对布尔值的属性也有效——如果条件被求值为false的话该属性会被移除：

　　　　　　　　　　<button v-bind:disable=‘someDynamicCondition‘>Button</button>

• 　　使用javascript表达式

　　　　　　　　对于所有的数据绑定，Vue.js都提供了完全的Javascript表达式支持。

　　　　　　　　　　{{ number + 1 }}

　　　　　　　　　　{{ ok ? ‘YES‘:‘NO‘}}

　　　　　　　　　　{{ message.split(‘‘).reserver().join(‘‘) }}

　　　　　　　　　　<div v-ind:id="‘list-‘+id"></div>

　　　　　　　　　　这些表达式会在所属Vue实例的数据作用域下作为Javascript被解析。有个限制就是，每个绑定都只能包含单个表达式。下面这些例子都不会生效。

　　　　　　　　　　　　　　<!-- 这是语句，不是表达式 -->

　　　　　　　　　　　　　　{{ var a=1 }}

 

　　　　　　　　　　　　　　<!--流控制也不会生效，请使用三元表达式-->

　　　　　　　　　　　　{{ if(ok){return message }}

指令

　　　　　　　　指令（Diretives）是指带有v-前缀的特殊属性。指令属性的预期值是单一Javascript表达式（除了v-for，之后再讨论）。指令的职责就是当期表达式的值改变时相应地将某些行为应用到DOM上。　　

　　　　　　　　eg:      <p   v-if=‘seen‘>Now you see me</p>

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

　　

 

• 　　参数

　　　　　　　　一些指令能接受一个‘参数’，在指令后以冒号指明。例如，v-bind指令被用来响应地更新HTML属性：

　　　　　　　　　　<a v-bind：href=‘url‘></a>

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

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

　　　　　　　　　　<a v-on:click=‘doSomething‘>

　　　　　　　　这里的参数是监听的事件名。

• 　　修饰符

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

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

过滤器

    Vue.js可以自定义过滤器，用作一些常见的文本格式化。过滤器可以用在两个地方：Mustache插值和 v-bind表达式。过滤器应该被添加在Javascript表达式的尾部，由’管道‘符指示：

　　　<!-- in Mustaches -->

　　{{message | capitalize}}

　　　<!-- in v-bind -->

　　<div v-bind:id=‘rawId | formId‘></div>

　　过滤器函数总接受表达式的值作为第一个参数。

　　　　new Vue({

　　　　　　//...

　　　　　　filters:{

　　　　　　　　capitalize:function (value){

　　　　　　　　　　if(!value) return ‘‘

　　　　　　　　　　value = value.toString()

　　　　　　　　　　return value.charAt(0).toUpperCase()+value.slice(1)

　　　　　　　　　　}

　　　　　　　　　}

　　　　})

         charAt(参数)：返回参数指定位置的字符串。例子中，参数为0，返回第一位字符串。

　　　toUpperCase()：将字符串对象大写。

　　　splice(参数)：返回一个字符串，参数为start位置，若无第二个参数，则最后一个字符串为end位置。

　　　　　过滤器可以串联：

　　　　　　　　{{message | filterA | filterB }}

　　　　  过滤是Javascript函数，因此可以接受参数：

　　　　　　　　{{ message | filterA(‘arg1‘,arg2)  }}

　　　　　这里，支付窗’arg1‘将传给过滤器作为第二个参数，arg2表达式的值将被求值然后传给过滤器作为第三个参数。

缩写

• 　　v-bind缩写

　　　　　<a v-bind:href=‘url‘></a>

　　　　　　　　缩写：<a :href=‘url‘></a>

• 　　v-on缩写

　　　　　 <button v-on:click=func()></button>

　　　　　　　　缩写：<button @click=func()></button>