前端MVC Vue2——模板語法、過濾器、計算屬性、觀察者、Class 與 Style 綁定
小編:管理員 148閱讀 2022.08.18
Vue.js 使用了基于 HTML 的模版語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規范的瀏覽器和 HTML 解析器解析。
在底層的實現上， Vue 將模板編譯成虛擬 DOM 渲染函數。結合響應系統，在應用狀態改變時， Vue 能夠智能地計算出重新渲染組件的最小代價并應用到 DOM 操作上。
如果你熟悉虛擬 DOM 并且偏愛 JavaScript 的原始力量，你也可以不用模板，直接寫渲染（render）函數，使用可選的 JSX 語法。
一、模板語法1.1、插值1.1.1、文本數據綁定最常見的形式就是使用 “Mustache” 語法（雙大括號）的文本插值：
<span>Message: {{ msg }}</span>
復制
Mustache 標簽將會被替代為對應數據對象上 msg 屬性的值。無論何時，綁定的數據對象上 msg 屬性發生了改變，插值處的內容都會更新
通過使用 v-once 指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新。但請留心這會影響到該節點上所有的數據綁定：
<span v-once>This will never change: {{ msg }}</span>
復制
v-text指令：更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。
<span v-text="msg"></span>
<!-- 和下面的一樣 -->
<span>{{msg}}</span>
復制
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue2模板語法</title>
</head>
<body>
<div id="app1">
<input v-model="msg" />
<span v-once>{{msg}}</span>
<h3 v-text="msg"></h3>
<h3>{{msg}}</h3>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app1 = new Vue({
el: "#app1",
data:{
msg:"vue"
}
});
</script>
</body>
</html>
復制
結果：
1.1.2、純HTML
雙大括號會將數據解釋為純文本，而非 HTML 。為了輸出真正的 HTML ，你需要使用 v-html 指令：
<div v-html="rawHtml"></div>復制
被插入的內容都會被當做 HTML —— 數據綁定會被忽略。注意，你不能使用 v-html 來復合局部模板，因為 Vue 不是基于字符串的模板引擎。組件更適合擔任 UI 重用與復合的基本單元
站點上動態渲染的任意 HTML 可能會非常危險，因為它很容易導致 XSS 攻擊。請只對可信內容使用 HTML 插值，絕不要對用戶提供的內容插值
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue2模板語法</title>
</head>
<body>
<div id="app1">
<textarea v-model="msg" rows="3" cols="30"></textarea>
<p>{{msg}}</p>
<p v-html="msg"></p>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app1 = new Vue({
el: "#app1",
data:{
msg:"<span style='color:blue;font-weight:bold'>zhangguo</span>"
}
});
</script>
</body>
</html>
復制
結果：
1.1.3、屬性
Mustache 不能在 HTML 屬性中使用，應使用 v-bind 指令：
<div v-bind:id="dynamicId"></div>復制
這對布爾值的屬性也有效 —— 如果條件被求值為 false 的話該屬性會被移除：
<button v-bind:disabled="someDynamicCondition">Button</button>復制
someDynamicCondition為true是disabled出現，為false時移除disabled
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue2模板語法</title>
</head>
<body>
<div id="app1">
<button type="button" v-on:click="disabled=!disabled">反轉{{disabled}}</button>
<button type="button" v-bind:disabled="disabled">提交</button>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app1 = new Vue({
el: "#app1",
data:{
disabled:true
}
});
</script>
</body>
</html>
復制
結果：
修改disabled的值為false
1.1.4、javascript表達式
迄今為止，在我們的模板中，我們一直都只綁定簡單的屬性鍵值。但實際上，對于所有的數據綁定， Vue.js 都提供了完全的 JavaScript 表達式支持
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
復制
這些表達式會在所屬 Vue 實例的數據作用域下作為 JavaScript 被解析。有個限制就是，每個綁定都只能包含單個表達式，所以下面的例子都不會生效，不需要在屬性前使用this
{{ var a = 1 }} <!-- 這是語句，不是表達式 -->
{{ if (ok) { return message } }} <!-- 流控制也不會生效，請使用三元表達式 -->
復制
模板表達式都被放在沙盒中，只能訪問全局變量的一個白名單，如 Math 和 Date 。你不應該在模板表達式中試圖訪問用戶定義的全局變量
1.2、指令指令（Directives）是帶有 v- 前綴的特殊屬性。指令屬性的值預期是單一 JavaScript 表達式。指令的職責就是當其表達式的值改變時相應地將某些行為應用到 DOM 上
<p v-if="seen">Now you see me</p>復制
這里， v-if 指令將根據表達式 seen 的值的真假來移除/插入元素
常用的指令有：
-
指令
- v-text
- v-html
- v-show
- v-if
- v-else
- v-else-if
- v-for
- v-on
- v-bind
- v-model
- v-pre
- v-cloak
- v-once
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue2模板語法</title>
</head>
<body>
<div id="app1">
<button type="button" v-on:click="isShow=!isShow">反轉{{isShow}}</button>
<button type="button" v-if="isShow">提交v-if</button>
<button type="button" v-show="isShow">提交v-show</button>
<br/><br/>
<div>
等級A-C：<input v-model="type" />
</div>
<div v-if="type === 'A'">
A優秀
</div>
<div v-else-if="type === 'B'">
B良好
</div>
<div v-else-if="type === 'C'">
C及格
</div>
<div v-else>
D其它
</div>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app1 = new Vue({
el: "#app1",
data: {
isShow: true,
type: 'D'
}
});
</script>
</body>
</html>
復制
結果：
修改：
事件處理指令非常強大，說明如下：
v-on指令
- 縮寫：@
- 預期：Function | Inline Statement | Object
- 參數：event
-
修飾符：
- .stop- 調用event.stopPropagation()。
- .prevent- 調用event.preventDefault()。
- .capture- 添加事件偵聽器時使用 capture 模式。
- .self- 只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。
- .{keyCode | keyAlias}- 只當事件是從特定鍵觸發時才觸發回調。
- .native- 監聽組件根元素的原生事件。
- .once- 只觸發一次回調。
- .left- (2.2.0) 只當點擊鼠標左鍵時觸發。
- .right- (2.2.0) 只當點擊鼠標右鍵時觸發。
- .middle- (2.2.0) 只當點擊鼠標中鍵時觸發。
- .passive- (2.3.0) 以{ passive: true }模式添加偵聽器
- 用法： 綁定事件監聽器。事件類型由參數指定。表達式可以是一個方法的名字或一個內聯語句，如果沒有修飾符也可以省略。 從2.4.0開始，v-on同樣支持不帶參數綁定一個事件/監聽器鍵值對的對象。注意當使用對象語法時，是不支持任何修飾器的。 用在普通元素上時，只能監聽 原生 DOM 事件。用在自定義元素組件上時，也可以監聽子組件觸發的自定義事件。 在監聽原生 DOM 事件時，方法以事件為唯一的參數。如果使用內聯語句，語句可以訪問一個$event屬性：v-on:click="handle('ok', $event)"。
示例：
<!-- 方法處理器 -->
<button v-on:click="doThis"></button>
<!-- 對象語法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
<!-- 內聯語句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 縮寫 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默認行為 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默認行為，沒有表達式 -->
<form @submit.prevent></form>
<!-- 串聯修飾符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 鍵修飾符，鍵別名 -->
<input @keyup.enter="onEnter">
<!-- 鍵修飾符，鍵代碼 -->
<input @keyup.13="onEnter">
<!-- 點擊回調只會觸發一次 -->
<button v-on:click.once="doThis"></button>
復制
- 在子組件上監聽自定義事件 (當子組件觸發“my-event”時將調用事件處理器)：
<my-component @my-event="handleThis"></my-component> <!-- 內聯語句 --> <my-component @my-event="handleThis(123, $event)"></my-component> <!-- 組件中的原生事件 --> <my-component @click.native="onClick"></my-component>復制
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue2模板語法</title>
</head>
<body>
<div id="app1">
<div>
等級A-C：<input v-model="type" @keyup.13="submit_click($event)" />
</div>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app1 = new Vue({
el: "#app1",
data: {
isShow: true,
type: 'D'
},
methods: {
submit_click: function(e) {
if(confirm("確證要提交嗎？")) {
console.log(e);
}
}
}
});
</script>
</body>
</html>
復制
結果：
1.2.1、參數
一些指令能接受一個“參數”，在指令后以冒號指明。例如， v-bind 指令被用來響應地更新 HTML 屬性：
<a v-bind:href="url"></a>復制
在這里 href 是參數，告知 v-bind 指令將該元素的 href 屬性與表達式 url 的值綁定
v-on 指令用于監聽 DOM 事件：
<a v-on:click="doSomething">復制1.2.2、修飾符
修飾符（Modifiers）是以半角句號 . 指明的特殊后綴，用于指出一個指令應該以特殊方式綁定：
<form v-on:submit.prevent="onSubmit"></form>復制
- .stop - 調用 event.stopPropagation()。
- .prevent - 調用 event.preventDefault()。
- .capture - 添加事件偵聽器時使用 capture 模式。
- .self - 只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。
- .{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回調。
- .native - 監聽組件根元素的原生事件。
- .once - 只觸發一次回調。
- .left - (2.2.0) 只當點擊鼠標左鍵時觸發。
- .right - (2.2.0) 只當點擊鼠標右鍵時觸發。
- .middle - (2.2.0) 只當點擊鼠標中鍵時觸發。
- .passive - (2.3.0) 以 { passive: true } 模式添加偵聽器
使用方法：
<!-- 方法處理器 -->
<button v-on:click="doThis"></button>
<!-- 對象語法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
<!-- 內聯語句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 縮寫 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默認行為 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默認行為，沒有表達式 -->
<form @submit.prevent></form>
<!-- 串聯修飾符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 鍵修飾符，鍵別名 -->
<input @keyup.enter="onEnter">
<!-- 鍵修飾符，鍵代碼 -->
<input @keyup.13="onEnter">
<!-- 點擊回調只會觸發一次 -->
<button v-on:click.once="doThis"></button>
復制1.3、過濾器
Vue.js 允許你自定義過濾器，可被用作一些常見的文本格式化。過濾器可以用在兩個地方：mustache 插值和 v-bind 表達式。過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符指示：
{{ message | capitalize }} <!-- in mustaches -->
<div v-bind:id="rawId | formatId"></div> <!-- in v-bind -->
復制
Vue 2.x 中，過濾器只能在 mustache 綁定和 v-bind 表達式（從 2.1.0 開始支持）中使用，因為過濾器設計目的就是用于文本轉換。為了在其他指令中實現更復雜的數據變換，你應該使用計算屬性
過濾器函數總接受表達式的值作為第一個參數
new Vue({
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
復制
過濾器可以串聯：
{{ message | filterA | filterB }}
復制
過濾器是 JavaScript 函數，因此可以接受參數：
{{ message | filterA('arg1', arg2) }}
復制
這里，字符串 'arg1' 將傳給過濾器作為第二個參數， arg2 表達式的值將被求值然后傳給過濾器作為第三個參數
在vue1中有一些內置的過濾器，而vue2中需要自定義。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue2模板語法</title>
</head>
<body>
<div id="app1">
<span>{{msg | toUpper | toLower(" zhuhai")}}</span>
</div>
<div id="app2">
<span v-bind:title=" 'Hello Filter!' | toUpper">{{msg | toUpper | toLower}}</span>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//全局過濾器
Vue.filter("toUpper",function(value){
return value.toUpperCase();
});
var app1 = new Vue({
el: "#app1",
data:{
msg:"China"
},
filters:{ //帶參數的當前實例過濾器
toLower:function(value,add){
return value.toLowerCase()+add;
}
}
});
//可以使用全局過濾器
var app2 = new Vue({
el: "#app2",
data:{
msg:"Vue"
}
});
</script>
</body>
</html>
復制
結果：
1.4、縮寫
v- 前綴在模板中是作為一個標示 Vue 特殊屬性的明顯標識。當你使用 Vue.js 為現有的標記添加動態行為時，它會很有用，但對于一些經常使用的指令來說有點繁瑣。同時，當搭建 Vue.js 管理所有模板的 SPA 時，v- 前綴也變得沒那么重要了。因此，Vue.js 為兩個最為常用的指令提供了特別的縮寫：
1.4.1、v-bind 縮寫<a v-bind:href="url"></a> <!-- 完整語法 --> <a :href="url"></a> <!-- 縮寫 -->復制1.4.2、v-on 縮寫
<a v-on:click="doSomething"></a> <!-- 完整語法 --> <a @click="doSomething"></a> <!-- 縮寫 -->復制
它們看起來可能與普通的 HTML 略有不同，但 : 與 @ 對于屬性名來說都是合法字符，在所有支持 Vue.js 的瀏覽器都能被正確地解析。而且，它們不會出現在最終渲染的標記?？s寫語法是完全可選的。
二、計算屬性和觀察者2.1、計算屬性在模板中綁定表達式是非常便利的，但是它們實際上只用于簡單的操作。在模板中放入太多的邏輯會讓模板過重且難以維護。例如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
復制
在這種情況下，模板不再簡單和清晰。在實現反向顯示message之前，你應該確認它。這個問題在你不止一次反向顯示 message 的時候變得更加糟糕。
這就是為什么任何復雜邏輯，你都應當使用計算屬性。
2.1.1、基礎例子<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
復制
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('')
}
}
})
復制
結果：
Original message: "Hello"
Computed reversed message: "olleH"
這里我們聲明了一個計算屬性reversedMessage。我們提供的函數將用作屬性vm.reversedMessage的 getter 。
console.log(vm.reversedMessage) // -> 'olleH' vm.message = 'Goodbye' console.log(vm.reversedMessage) // -> 'eybdooG'復制
你可以打開瀏覽器的控制臺，修改 vm 。vm.reversedMessage的值始終取決于vm.message的值。
你可以像綁定普通屬性一樣在模板中綁定計算屬性。 Vue 知道vm.reversedMessage依賴于vm.message，因此當vm.message發生改變時，依賴于vm.reversedMessage的綁定也會更新。而且最妙的是我們是聲明式地創建這種依賴關系：計算屬性的 getter 是干凈無副作用的，因此也是易于測試和理解的。
2.1.2、計算緩存 vs Methods你可能已經注意到我們可以通過調用表達式中的method來達到同樣的效果：
<p>Reversed message: "{{ reverseMessage() }}"</p>
復制
// in component
methods: {
reverseMessage: function () {
return this.message.split('').reverse().join('')
}
}
復制
不經過計算屬性，我們可以在 method 中定義一個相同的函數來替代它。對于最終的結果，兩種方式確實是相同的。然而，不同的是計算屬性是基于它的依賴緩存。計算屬性只有在它的相關依賴發生改變時才會重新取值。這就意味著只要message沒有發生改變，多次訪問reversedMessage計算屬性會立即返回之前的計算結果，而不必再次執行函數。
這也同樣意味著如下計算屬性將不會更新，因為Date.now()不是響應式依賴：
computed: {
now: function () {
return Date.now()
}
}
復制
相比而言，每當重新渲染的時候，method 調用總會執行函數。
我們為什么需要緩存？假設我們有一個重要的計算屬性 A ，這個計算屬性需要一個巨大的數組遍歷和做大量的計算。然后我們可能有其他的計算屬性依賴于 A 。如果沒有緩存，我們將不可避免的多次執行 A 的 getter ！如果你不希望有緩存，請用 method 替代。
區別：
計算屬性只能當作屬性用，不能帶參數，有緩存，效率高
方法可以直接調用，可帶參數，沒有緩存，每次調用都會執行，效率不如計算屬性高。
2.1.3、計算屬性 vs Watched PropertyVue.js 提供了一個方法$watch，它用于觀察 Vue 實例上的數據變動。當一些數據需要根據其它數據變化時，$watch很誘人 —— 特別是如果你來自 AngularJS 。不過，通常更好的辦法是使用計算屬性而不是一個命令式的$watch回調。思考下面例子：
<div id="demo">{{ fullName }}</div>
復制
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
復制
上面代碼是命令式的和重復的。跟計算屬性對比：
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
復制
這樣更好，不是嗎？
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]
}
}
}
// ...
復制
現在在運行vm.fullName = 'John Doe'時， setter 會被調用，vm.firstName和vm.lastName也會被對應更新。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>計算屬性和觀察者</title>
</head>
<body>
<div id="app1">
姓：<input v-model="x" /> 名：
<input v-model="m" /> 姓名：
<input v-model="xm" />
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app1 = new Vue({
el: "#app1",
data: {
x: "",
m: ""
},
computed:{
xm:{
get:function(){
return this.x+this.m;
},
set:function(value){
this.x=value.substring(0,1);
this.m=value.substring(1);
}
}
}
});
app1.xm="張果";
</script>
</body>
</html>
復制
結果：
2.2、觀察 Watchers
雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的 watcher 。這是為什么 Vue 提供一個更通用的方法通過watch選項，來響應數據的變化。當你想要在數據變化響應時，執行異步操作或昂貴操作時，這是很有用的。
例如：
<div id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>
復制
<!-- Since there is already a rich ecosystem of ajax libraries -->
<!-- and collections of general-purpose utility methods, Vue core -->
<!-- is able to remain small by not reinventing them. This also -->
<!-- gives you the freedom to just use what you're familiar with. -->
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
el: '#watch-example',
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
// 如果 question 發生改變，這個函數就會運行
question: function (newQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.getAnswer()
}
},
methods: {
// _.debounce 是一個通過 lodash 限制操作頻率的函數。
// 在這個例子中，我們希望限制訪問yesno.wtf/api的頻率
// ajax請求直到用戶輸入完畢才會發出
// 學習更多關于 _.debounce function (and its cousin
// _.throttle), 參考: https://lodash.com/docs#debounce
getAnswer: _.debounce(
function () {
var vm = this
if (this.question.indexOf('?') === -1) {
vm.answer = 'Questions usually contain a question mark. ;-)'
return
}
vm.answer = 'Thinking...'
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'Error! Could not reach the API. ' + error
})
},
// 這是我們為用戶停止輸入等待的毫秒數
500
)
}
})
</script>
復制
結果：
Ask a yes/no question:
I cannot give you an answer until you ask a question!
在這個示例中，使用watch選項允許我們執行異步操作（訪問一個 API），限制我們執行該操作的頻率，并直到我們得到最終結果時，才設置中間狀態。這是計算屬性無法做到的。
除了watch選項之外，您還可以使用 vm.$watch API 命令。
官方幫助： http://vuejs.org/guide/computed.html
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>南方機器人</title>
</head>
<body>
<div id="app1">
<p>
請輸入您的問題:
<input v-model="question">
</p>
<p>{{ answer }}</p>
<p>
<img v-bind:src="src"/>
</p>
</div>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script type="text/javascript">
var watchExampleVM = new Vue({
el: '#app1',
data: {
question: '',
answer: '您問我一個問題我會給您一個答案！',
url:''
},
watch: {
// 如果 question 發生改變，這個函數就會運行
question: function(newQuestion) {
this.answer = '等待您的輸入...'
this.getAnswer()
}
},
methods: {
// _.debounce 是一個通過 lodash 限制操作頻率的函數。
// 在這個例子中，我們希望限制訪問yesno.wtf/api的頻率
// ajax請求直到用戶輸入完畢才會發出
// 學習更多關于 _.debounce function (and its cousin
// _.throttle), 參考: https://lodash.com/docs#debounce
getAnswer: _.debounce(
function() {
var vm = this
if(this.question.indexOf('?') === -1) {
vm.answer = '問題請以問號（？）結束'
return
}
vm.answer = '讓我想想...'
axios.get('https://yesno.wtf/api')
.then(function(response) {
vm.answer = _.capitalize(response.data.answer);
vm.src=response.data.image;
console.log(response);
})
.catch(function(error) {
vm.answer = '發生了錯誤，不能調用該應用程序接口' + error
})
},
// 這是我們為用戶停止輸入等待的毫秒數
500
)
}
})
</script>
</body>
</html>=
復制
結果：
三、Class 與 Style 綁定
數據綁定一個常見需求是操作元素的 class 列表和它的內聯樣式。因為它們都是屬性 ，我們可以用v-bind處理它們：只需要計算出表達式最終的字符串。不過，字符串拼接麻煩又易錯。因此，在v-bind用于class和style時， Vue.js 專門增強了它。表達式的結果類型除了字符串之外，還可以是對象或數組。
3.1、綁定 HTML Class3.1.1、對象語法我們可以傳給v-bind:class一個對象，以動態地切換 class 。
<div v-bind:class="{ active: isActive }"></div>
復制
上面的語法表示 classactive的更新將取決于數據屬性isActive是否為 真值 。
我們也可以在對象中傳入更多屬性用來動態切換多個 class 。此外，v-bind:class指令可以與普通的 class 屬性共存。如下模板:
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
復制
如下 data:
data: {
isActive: true,
hasError: false
}
復制
渲染為:
<div class="static active"></div>復制
當isActive或者hasError變化時，class 列表將相應地更新。例如，如果hasError的值為true， class列表將變為"static active text-danger"。
你也可以直接綁定數據里的一個對象：
<div v-bind:class="classObject"></div>復制
data: {
classObject: {
active: true,
'text-danger': false
}
}
復制
渲染的結果和上面一樣。我們也可以在這里綁定返回對象的 計算屬性。這是一個常用且強大的模式：
<div v-bind:class="classObject"></div>復制
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal',
}
}
}
復制
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Class 與 Style 綁定</title>
<style>
.valide{
display: none;
}
.priceRequired{
display: inline;
}
.priceRange{
display: inline;
}
</style>
</head>
<body>
<div id="app1">
<span class="bgGreen" v-bind:class="{bgRed:isShow,bgBlue:isActive}">span1</span>
<span class="bgGreen" v-bind:class="classObj1">span2</span>
<p>
<label>價格：</label>
<input v-model="price" /><span class="valide" v-bind:class="priceValide1">必填</span><span class="valide" v-bind:class="priceValide2">介于0.1-99999之間</span>
</p>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app1 = new Vue({
el: "#app1",
data:{
isShow:true,
isActive:false,
classObj1:{
isHide:true,
isRight:false
},
price:0
},
computed:
{
priceValide1:function(){
return {
priceRequired:this.price===''
}
},
priceValide2:function(){
return {
priceRange:this.price!=''&&(this.price<0.1||this.price>99999)
}
}
}
});
</script>
</body>
</html>
復制
結果：
3.1.2、數組語法
我們可以把一個數組傳給v-bind:class，以應用一個 class 列表：
<div v-bind:class="[activeClass, errorClass]">復制
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
復制
渲染為:
<div class="active text-danger"></div>復制
如果你也想根據條件切換列表中的 class ，可以用三元表達式：
<div v-bind:class="[isActive ? activeClass : '', errorClass]">復制
此例始終添加errorClass，但是只有在isActive是 true 時添加activeClass。
不過，當有多個條件 class 時這樣寫有些繁瑣?？梢栽跀到M語法中使用對象語法：
<div v-bind:class="[{ active: isActive }, errorClass]">
復制
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Class 與 Style 綁定</title>
</head>
<body>
<div id="app1">
<span class="bgGreen" v-bind:class="[isHide,isRight]">span3</span>
<span class="bgGreen" v-bind:class="[(isShow?'bg3':''),isRight,bg4]">span4</span>
<span class="bgGreen" v-bind:class="[{bg3:isShow},isRight,bg4]">span5</span>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app1 = new Vue({
el: "#app1",
data: {
isShow: true,
isHide: 'bg1',
isRight: 'bg2',
price: 0
}
});
</script>
</body>
</html>
復制
結果：
3.1.3、With Components
This section assumes knowledge of Vue Components. Feel free to skip it and come back later.
When you use theclassattribute on a custom component, those classes will be added to the component’s root element. Existing classes on this element will not be overwritten.
For example, if you declare this component:
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
復制
Then add some classes when using it:
<my-component class="baz boo"></my-component>復制
The rendered HTML will be:
<p class="foo bar baz boo">Hi</p>復制
The same is true for class bindings:
<my-component v-bind:class="{ active: isActive }"></my-component>
復制
WhenisActiveis truthy, the rendered HTML will be:
<div class="foo bar active"></div>復制3.2、綁定內聯樣式3.2.1、對象語法
v-bind:style的對象語法十分直觀——看著非常像 CSS ，其實它是一個 JavaScript 對象。 CSS 屬性名可以用駝峰式（camelCase）或短橫分隔命名（kebab-case）：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
復制
data: {
activeColor: 'red',
fontSize: 30
}
復制
直接綁定到一個樣式對象通常更好，讓模板更清晰：
<div v-bind:style="styleObject"></div>復制
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
復制
同樣的，對象語法常常結合返回對象的計算屬性使用。
3.2.2、數組語法v-bind:style的數組語法可以將多個樣式對象應用到一個元素上：
<div v-bind:style="[baseStyles, overridingStyles]">復制3.2.3、自動添加前綴
當v-bind:style使用需要特定前綴的 CSS 屬性時，如transform，Vue.js 會自動偵測并添加相應的前綴。
官方幫助： http://vuejs.org/guide/class-and-style.html
四、示例下載https://git.coding.net/zhangguo5/vue2.git
五、視頻https://www.bilibili.com/video/av17503637/
六、作業6.1、請把v-on指令的每一種“修飾符”與調用方式都應用一遍。
<!-- 方法處理器 -->
<button v-on:click="doThis"></button>
<!-- 對象語法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
<!-- 內聯語句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 縮寫 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默認行為 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默認行為，沒有表達式 -->
<form @submit.prevent></form>
<!-- 串聯修飾符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 鍵修飾符，鍵別名 -->
<input @keyup.enter="onEnter">
<!-- 鍵修飾符，鍵代碼 -->
<input @keyup.13="onEnter">
<!-- 點擊回調只會觸發一次 -->
<button v-on:click.once="doThis"></button>
復制
6.2、請完成一個商品管理模塊，要求如下：
- 使用bootstrap+vue2技術實現
- 添加與修改功能使用模式窗口
- 支持全選與反選，隔行換色與光棒效果
- 詳細是點擊時在彈出層中顯示當前商品的所有信息
- 嘗試分頁（選做）
6.3、增強商品管理
- 數據從后臺加載，請注意跨域（axios）
- 實現搜索功能（Lodash）
- 有驗證、有錯誤提示
- 增加刪除與添加時的動畫效果（選作）
- 了解UIKit（選作）
相關推薦
- Vue3（二）工程化開發方式做項目 工程化的開發方式這是開發中、大型項目的必備技能，網上資料也很多，這里只是一個簡單的綜合性的介紹。包括vue的全家桶、建立項目的幾種方式、UI庫的簡單使用等?？梢院蜕弦黄腸nd方式做項目做一下對比。node.js，npm、cnpm、yarnnode.js執行 npm run serve ，…
- Hibernate Criterion 在查詢方法設計上能夠靈活的依據Criteria的特點來方便地進行查詢條件的組裝.Hibernate設計了CriteriaSpecification作為Criteria的父接口,以下提供了Criteria和DetachedCriteria.Criteria和DetachedCriteria的主要差別在于創建的形式不一樣,Criteria是在線的,所…
粵公網安備 44010402000066號