vue基础三

1.模板语法

在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染（render）函数，使用可选的 JSX 语法。

1.1插值

#文本    数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值：<span>Message: {{ msg }}</span>

#纯html     双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html 指令。

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

#js表达式   这里每个绑定都只能包含单个表达式。

<!--合格的表达式-->

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

 

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

{{ var a = 1 }}

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

{{ if (ok) { return message } }}

1.2指令

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

#参数    一些指令能接受一个“参数”，在指令后以冒号指明。

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

1.3 Filters

#过滤器     Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。Vue 2.x 中，过滤器只能在 mustache 绑定和 v-bind 表达式（从 2.1.0 开始支持）中使用，因为过滤器设计目的就是用于文本转换。为了在其他指令中实现更复杂的数据变换，你应该使用计算属性。

<!-- in mustaches -->

{{ message | capitalize }}

 

<!-- in v-bind -->

<div v-bind:id="rawId | formatId"></div>

1.4缩写

#v-bind     

<!-- 完整语法 -->

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

<!-- 缩写 -->

<a :href="url"></a>

#v-on

<!-- 完整语法 -->

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

 

<!-- 缩写 -->

<a @click="doSomething"></a>

2.计算属性

2.1.1基础例子

<div id="example">

　　{{ message.split('').reverse().join('') }}

</div>

在这种情况下，模板不再简单和清晰。这个问题在你不止一次反向显示 message 的时候变得更加糟糕。这就是为什么任何复杂逻辑，你都应当使用计算属性。

<!--html-->

<div id="example">

　　<p>Original message: "{{ message }}"</p>

　　<p>Computed reversed message: "{{ reversedMessage }}"</p>

</div>

<!--js-->

var vm = new Vue({

　　el: '#example',

　　data: {

　　message: 'Hello'

　　},

　　computed: {

　　　　// a computed getter

　　　　reversedMessage: function () {

　　　　// `this` points to the vm instance

　　　　return this.message.split('').reverse().join('')

　　　　}

　　}

})

2.1.2计算缓存 vs Methods

你可能已经注意到我们可以通过调用表达式中的method来达到同样的效果：<p>Reversed message: "{{ reverseMessage() }}"</p>

// in component

methods: {

　　reverseMessage: function () {

　　　　return this.message.split('').reverse().join('')

　　}

}

对于最终的结果，两种方式确实是相同的。然而，不同的是计算属性是基于它的依赖缓存。相比而言，每当重新渲染的时候，method 调用总会执行函数。

2.1.3计算属性 vs WatchedProperty

Vue.js 提供了一个方法 $watch ，它用于观察 Vue 实例上的数据变动。不过，通常更好的办法是使用计算属性而不是一个命令式的 $watch 回调。

2.1.4计算setter

计算属性默认只有一个getter，也可以提供一个setter

// ...

computed: {

　　fullName: {

　　// getter

　　get: function () {

　　　　return this.firstName + ' ' + this.lastName

　　},

　　// setter

　　set: function (newValue) {

　　　　var names = newValue.split(' ')

　　　　this.firstName = names[0]

　　　　this.lastName = names[names.length - 1]

　　　　}

　　}

}

2.2观察Watchers

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的 watcher 。这是为什么 Vue 提供一个更通用的方法通过watch 选项，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的。