常見指令功能


條件渲染:https://learning.dcloud.io/#/?vid=8
列表渲染:https://learning.dcloud.io/#/?vid=9
事件渲染:https://learning.dcloud.io/#/?vid=10
表單輸入綁定:https://learning.dcloud.io/#/?vid=11

數據插值

視頻 :https://learning.dcloud.io/#/?vid=5
文檔:https://cn.vuejs.org/v2/guide/syntax.html#%E6%8F%92%E5%80%BC

插值
<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <!-- 加載好vue.js後,會加載一個Vue對象 -->
 </head>
 <body>
<div id="app">
<h1>1. 插值</h1>
<p>一起變化:{{message}}</p>
<!-- 將v-once加到標籤上即可 -->
 <p v-once>變化一次:{{message}}</p>
</div>
   <script>
   var data = {
message: "Hello Vue!",
rawHtml: "",
};
     var app = new Vue({
      el: '#app',
      data: data
     })
// 1. 響應式數據
data.message = "Hello World!";
   </script>
 </body>
</body>
</html>
展示原始html

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <!-- 加載好vue.js後,會加載一個Vue對象 -->
 </head>
 <body>
<div id="app">
<h1>2. 展示原始html</h1>
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>
   <script>
   var data = {
message: "Hello Vue!",
rawHtml: "",
};
     var app = new Vue({
      el: '#app',
      data: data
     })
// 2. 顯示原始html(注意:動態給data添加值不會有效 )
data.rawHtml = "<b>這是加粗文字</b>"
</script>
 </body>
</body>
</html>
使用JavaScript表達式
<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <!-- 加載好vue.js後,會加載一個Vue對象 -->
 </head>
 <body>
<div id="app">
<h1>3. 使用JavaScript表達式</h1>
<p>{{ number + 1 }}</p>
<p>{{ ok ? 'YES' : 'NO' }}</p>
<p>{{ message.split('').reverse().join('') }}</p>
<!-- 這是語句,不是表達式,所以語法錯誤 -->
<!-- {{ var a = 1 }} -->
<!-- 流控制也不會生效,請使用三元表達式,所以語法錯誤 -->
<!-- {{ if (ok) { return message } }} -->
</div>
   <script>
   var data = {
message: "Hello Vue!",
rawHtml: "",
number: 10,
ok: true,
};
     var app = new Vue({
      el: '#app',
      data: data
     })
// 3. 使用 JavaScript 表達式
   </script>
 </body>
</body>
</html>

模塊語法的幾個概念

模板語法-指令:https://learning.dcloud.io/#/?vid=6
文檔:https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4

指令

指令 (Directives) 是帶有 v- 前綴的特殊特性。指令的職責是,當表達式的值改變時,將其產生的連帶
影響,響應式地作用於 DOM。指令是用於擴展html標籤功能和屬性。
如: v-if 指令:

現在你看到我了

參數

一些指令能夠接收一個“參數”,在指令名稱之後以冒號表示。
如:
href :
click :

修飾符

修飾符 (modifier) 是以半角句號 . 指明的特殊後綴,用於指出一個指令應該以特殊方式綁定。
例如, .prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault() :

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

v-bind的縮寫:

<!-- 完整語法 -->
<a v-bind:href="url">...</a>
<!-- 縮寫 -->
<a :href="url">...</a>

v-on的縮寫:

<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>
<!-- 縮寫 -->
<a @click="doSomething">...</a>
計算屬性(computed)

模板內的表達式非常便利,但是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板
過重且難以維護。例如:

<div id="example">
{{ message.split('').reverse().join('') }}
</div>

所以,對於任何複雜邏輯,你都應當使用計算屬性。
這裏我們聲明瞭一個計算屬性 reversedMessage 。我們提供的函數將用作屬性 ,這裏的
reversedMessage 的值依賴於message,當message發生變化時, reversedMessage 的值也會發生
變化

// html
<div id="example_computed">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
// js
// 4. 計算屬性
data = {
message: "Hello"
}
var vm = new Vue({
el: '#example_computed',
data: data,
computed: {
// 計算屬性的 getter
// => 這裏我們聲明瞭一個計算屬性 reversedMessage。我們提供的函數將用作屬性
reversedMessage: function () {
// `this` 指向 vm 實例
return this.message.split('').reverse().join('')
}
}
})
data.message = "abc"
方法(methods)
// html
<h1> 5. 方法</h1>
<div id="example_methods">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage() }}"</p>
</div>
// js
// 5. 方法
data = {
message: "Hello"
}
var vm = new Vue({
el: '#example_methods',
data: data,
// 在組件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
// return Date.now()
}
}
})

方法與計算屬性

我們可以將同一函數定義爲一個方法而不是一個計算屬性。兩種方式的最終結果確實是完全相同的。
屬性緩存:計算屬性是基於它們的響應式依賴進行緩存的。只在相關響應式依賴發生改變時它們纔會重
新求值。然而,不同的是這就意味着只要 message 還沒有發生改變,多次訪問 reversedMessage 計
算屬性會立即返回之前的計算結果,而不必再次執行函數。
這也同樣意味着下面的計算屬性將不再更新,因爲 Date.now() 不是響應式依賴:

computed: {
now: function () {
 return Date.now()
}
}

相比之下,每當觸發重新渲染時,調用方法將總會再次執行函數。

其他

偵聽屬性
偵聽器

模板數據與樣式渲染

1). class與style綁定
你可以在對象中傳入更多屬性來動態切換多個 class。此外, v-bind:class 指令也可以與普通的 class
屬性共存。當有如下模板:
下面的實例用到了 v-bind 指令,表示給元素添加一個屬性, v-bind:屬性名 可縮寫成 :屬性名
對象語法
該語法表示 active 和 text-danger 這個 class 存在與否將取決於數據屬性 isActive 和
hasError 的 truthiness。

<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

示例

// html
<h1> 6. class與style綁定 </h1>
<div id="example_style">
<p>對象語法</p>
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
>* 這是class與style綁定(根據isActive和hasError的值來決定是否使用類選擇器)
</div>
<div class="static" v-bind:class="MyClass"
>* 使用計算屬性</div>
</div>
// js
// 4. class與style綁定
var data = {
isActive: true,
hasError: true
};
var app = new Vue({
 el: '#example_style',
 data: data,
 computed:{
 MyClass: function(){
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
 }
})
數組語法
我們可以把一個數組傳給 v-bind:class ,以應用一個 class 列表:
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
渲染爲:
<div class="active text-danger"></div>

示例:
// html
<h1> 6. class與style綁定 </h1>
<div id="example_style">
...
<p>數組語法</p>
<div v-bind:class="[activeClass, errorClass]">這是數組語法示例</div>
</div>
// js
// 4. class與style綁定
var data = {
isActive: true,
hasError: true,
activeClass: 'active',
errorClass: 'text-danger'
};
var app = new Vue({
 el: '#example_style',
 data: data,
 computed:{
 MyClass: function(){
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
 }
})

style的綁定方法與class的綁定一樣,可直接看官方文檔

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章