摘要:二起步在學習之前,需要有扎實的基礎。三核心實例每個應用都是通過構造函數創建的一個新的實例開始的選項對象在這其中的簡稱通常都表示實例的變量名。
重要說明:本文會在我有空閑時間時持續更新,相當于是將官網的示例給完全呈現,是為了幫助初學者,也是為了鞏固我自己的技術,我決定將官網給過濾一道消化,敬請期待。
一.介紹vue是一種漸進式框架,被設計為自底向上逐層應用。所謂漸進式框架,我的理解就是vue是循序漸進的,一步一步的用。
舉個簡單的例子,就算我們不會webpack,不會node,但也能很快的入門。更多詳情參閱漸進式。
在學習vue之前,需要有扎實的HTML,CSS,JavaScript基礎。任何一個入門語言都離不開hello,world!例子,我們來寫這樣一個例子:
新建一個html文件,helloworld.html,如下:
hello,world {{ message }}
js代碼如下:
var app = new Vue({ el:"#app", data:{ message:"hello,world!" } })
現在我們已經成功創建了第一個vue應用,數據和DOM已經被關聯,所有的東西都是響應式的,我們要如何確定呢,打開瀏覽器控制臺,修改app.message的值。
在這其中data對象的寫法,我們還可以寫成函數形式,如下:
var app = new Vue({ el:"#app", //這里是重點 data(){ return{ message:"hello,world!" } } })2.文本插值
當然除了文本插值,我們還可以綁定元素屬性,如下:
v-bind 鼠標懸浮上去可以看到
js代碼如下:
var app = new Vue({ el:"#app", data:{ message:"頁面加載于:" + new Date().toLocaleString() } })
查看效果,前往此處查看效果:
同樣的我們也可以修改message的值,這樣的話,鼠標懸浮上去,懸浮的內容就會改變了。在這個例子中v-bind(或者也可以寫成":")其實就是一個指令,指令通常前綴都帶有v-,用于表示vue指定的特殊特性,在渲染DOM的時候,它會應用特殊的響應式行為。這個指令所表達的意思就是:將這個title屬性的值與vue實例的message值保持一致。
當然,我們也可以控制一個元素的顯隱,那也是非常的簡單,只需要使用v-show指令即可:
v-if 默認你是看不到我的哦
js代碼如下:
var app = new Vue({ el:"#app", data:{ seen:false } })
嘗試在控制臺中修改seen的值,也就是app.seen = true,然后你就可以看到頁面中的span元素了,具體示例
4.列表渲染還有v-for指令,用于渲染一個列表,如下:
v-for {{ item.name }}{{ item.content }}
js代碼如下:
var app = new Vue({ el:"#app", data:{ list:[ { name:"項目一",content:"HTML項目"}, { name:"項目二",content:"CSS項目"}, { name:"項目三",content:"JavaScript項目"}, ] } })
當然你也可以自己在控制臺改變list的值,具體示例
5.事件vue通過v-on + 事件屬性名(也可以寫成"@" + 事件屬性名)指令添加事件,例如v-on:click或@click如下一個示例:
v-on {{ message }}
js代碼如下:
var app = new Vue({ el:"#app", data:{ message:"hello,vue.js!" }, methods:{ reverseMessage:function(){ //在這里this指向構造函數構造的vue實例 this.message = this.message.split("").reverse().join(""); } } })
反轉信息的思路就是使用split()方法將字符串轉成數組,,然后使用數組的reverse()方法將數組倒序,然后再使用join()方法將倒序后的數組轉成字符串。
你也可以嘗試在這里查看示例
6.組件組件是vue中的一個核心功能,它是一個抽象的概念,它把所有應用抽象成一個組件樹,一個組件樹就是一個預定義的vue實例,在vue中使用Vue.component()注冊一個組件,它有兩個參數,第一個參數為組件名(尤其要注意組件名的命名),第二個參數為組件屬性配置對象,如:
//定義一個簡單的組件 Vue.component("todo-item",{ template:`
現在我們來看一個完整的例子:
component
js代碼如下:
Vue.component("todo-item",{ props:["todo"], template:`
這樣,一個簡單的組件就完成了,在這里,我們知道了,父組件app可以通過props屬性將數據傳遞給子組件todo-item,這是vue父子組件之間的一種通信方式。
你可以嘗試在此處具體示例。
每個vue應用都是通過Vue構造函數創建的一個新的實例開始的:
var vm = new Vue({ //選項對象 })
在這其中vm(viewModel的簡稱)通常都表示vue實例的變量名。當創建一個vue實例,你都可以傳入一個選項對象作為參數,完整的選項對象,你可能需要查看API文檔。
一個vue應用應該由一個通過new Vue構造的根實例和許多可嵌套可復用的組件構成,這也就是說所有的組件都是vue實例。
2.數據與方法當一個vue實例被創建完成之后,就會向它的vue響應系統中加入了data對象中能找到的所有屬性,當這些屬性的值發生改變之后,視圖就會發生響應,也就是更新相應的值。我們來看一個例子:
//源數據對象 var obj = { name:"eveningwater" }; //構建實例 var vm = new Vue({ data:obj }) //這兩者是等價的 vm.name === obj.name; //這也就意味著 //修改data對象里的屬性也會影響到源數據對象的屬性 vm.name = "waterXi"; obj.name;//"waterXi" //同樣的,修改源數據對象的屬性也會影響到data對象里的屬性 obj.name = "stranger"; vm.name;//"stranger"
可能需要注意的就是,只有data對象中存在的屬性才是響應式的,換句話說,你為源數據對象添加一個屬性,根本不會影響到data對象。如:
obj.sex = "男"; vm.sex;//undefined obj.sex;//"男" obj.sex = "哈哈哈"; vm.sex;//undefined
這也就意味著你對sex的修改并不會讓視圖更新,如此一來,你可能需要在data對象中初始化一些值,如下:
data:{ str:"", bool:false, arr:[], obj:{}, err:null, num:0 }
查看此處具體示例。
只是還有一個例外Object.freeze(),這個方法就相當于鎖定(凍結)一個對象,使得我們無法修改現有屬性的特性和值,并且也無法添加新屬性。因此這會讓vue響應系統無法追蹤變化:
freeze {{ message }}
js代碼如下:
var obj = { message: "hello,vue.js!" } //阻止對象 Object.freeze(obj); var app = new Vue({ el: "#app", data:obj, methods: { reverseMessage: function() { this.message = this.message.split("").reverse().join(""); } } });
如此一來,無論我們怎么點擊按鈕,都不會將信息反轉,甚至頁面還會報錯。
可前往此處具體示例自行查看效果。
當然除了數據屬性以外,vue還暴露了一些有用的實例屬性和方法,它們通常都帶有$前綴,這樣做的方式是以便與用戶區分開來。來看一個示例:
property
js代碼:
var obj = { name:"eveningwater" } var vm = new Vue({ data:obj, }); //這行代碼表示將vue實例掛載到id為app的DOM根節點上,相當于在實例的選項對象中的el選項,即 //el:"#app" vm.$mount(document.querySelector("#app")) //數據是相等的 vm.$data === obj;//true //掛載的根節點 vm.$el === document.querySelector("#app");//true //以上兩個屬性都是實例上的屬性,接下來還有一個watch即監聽方法是實例上的方法 vm.$watch("name",function(oldValue,newValue){ //數據原來的值 console.log(oldValue); //數據最新的值 console.log(newValue); })
接下來,可以嘗試在瀏覽器控制臺修改name的值,你就會發現watch()方法的作用了。
這個示例可前往具體示例。
每個vue實例在被創建的時候都會經歷一些初始化的過程,這其中提供了一些生命周期鉤子函數,這些鉤子函數代表不同的生命周期階段,這些鉤子函數的this就代表調用它的那個實例。對于生命周期,有一張圖:
你不需要立即這張圖所代表的含義,我們來看一個示例:
vue life cycle vue生命周期
js代碼:
var obj = { name:"eveningwater" } var app = new Vue({ data:obj, beforeCreate:function(){ //此時this指向app這個vue實例,但并不能得到data屬性,因此this.name的值是undefined console.log("實例被創建之前,此時并不能訪問實例內的任何屬性" + this.name) } });
關于生命周期的全部理解,我們需要理解后續的組件知識,再來補充,此處跳過。這個示例可前往具體示例
4.模板語法vue使用基于HTML的模板語法,在vue的底層是將綁定數據的模板渲染成虛擬DOM,并結合vue的響應式系統,從而減少操作DOM的次數,vue會計算出至少需要渲染多少個組件。
最簡單的模板語法莫過于插值了,vue使用的是Mustache語法(也就是雙大括號"{{}}")。這個只能對文本進行插值,也就是說無論是字符串還是標簽都會被當作字符串渲染。如:
Mustache {{ greeting }}World!
js代碼:
var obj = { greeting:"Hello,"}; var vm = new Vue({ data:obj }); vm.$mount(document.getElementById("app"));
如此以來Mustache標簽就會被data對象上的數據greeting給替代,而且我們無論怎么修改greeting的值,視圖都會響應,具體示例。
我們還可以使用v-once指令對文本進行一次性插值,換句話說,就是這個指令讓插值無法被更新:
Mustache {{ greeting }}World!
js代碼:
var obj = { greeting:"Hello,"}; var vm = new Vue({ data:obj }); vm.$mount(document.getElementById("app"));
在瀏覽器控制臺中我們輸入vm.greeting="stranger!"可以看到視圖并沒有被更新,這就是這個指令的作用,我們需要注意這個指令對數據造成的影響。具體實例
既然雙大括號只能讓我插入文本,那要是我們要插入HTML代碼,我們應該怎么辦呢?v-html這個指令就可以讓我們插入真正的HTML代碼。
v-html {{ message }}
js代碼:
var obj = { message:"hello,world!"};
var vm = new Vue({
data:obj
});
vm.$mount(document.getElementById("app"));
頁面效果如圖所示;
可前往具體示例。
關于HTML特性,也就是屬性,我們需要用到v-bind指令,例如:
v-bind 使用v-bind指令給該元素添加id屬性
js代碼:
var obj = { propId:"myDiv"}; var vm = new Vue({ data:obj }); vm.$mount(document.getElementById("app"));
打開瀏覽器控制臺,定位到該元素,我們就能看到div元素的id屬性為"myDiv",如下圖所示:
具體示例。
在綁定與元素實際作用相關的屬性,比如disabled,這個指令就被暗示為true,在默認值是false,null,undefined,""等轉換成false的數據類型時,這個指令甚至不會表現出來。如下例:
v-bind
js代碼:
var obj = { isDisabled:123}; var vm = new Vue({ data:obj }); vm.$mount(document.getElementById("app"));
這樣一來,無論我們怎么點擊按鈕都沒用,因為123被轉換成了布爾值true,也就表示按鈕已經被禁用了,我們可以打開控制臺看到:
你可以嘗試這個示例具體示例。
在使用模板插值的時候,我們可以使用一些JavaScript表達式。如下例:
expression {{ number + 1 }}
{{ ok ? "確認" : "取消" }}
{{message.split("").reverse().join("")}}
元素的id為myDiv
js代碼:
var obj = { number: 123, ok: true, message: "hello,vue.js!", elementId: "Div", color: "red" }; var vm = new Vue({ data: obj }); vm.$mount(document.getElementById("app"));
這些JavaScript表達式都會被vue實例作為JavaScript代碼解析,具體示例。
值得注意的就是有個限制,只能綁定單個表達式,像語句是無法生效的。如下例:
sentence {{ var number = 1 }}
{{ if(ok){ return "確認"} }}
js代碼:
var obj = { number: 123, ok: true }; var vm = new Vue({ data: obj }); vm.$mount(document.getElementById("app"));
像這樣直接使用語句是不行的,瀏覽器控制臺報錯,如下圖:
不信可以自己試試具體示例。
指令(Directives)是帶有v-前綴的特殊特性,通常指令的預期值就是單個JavaScript表達式(v-for除外),例如v-if與v-show指令,前者表示DOM節點的插入和刪除,后者則是元素的顯隱。所以,指令的職責就是根據表達式值的改變,響應式的作用于DOM。現在我們來看兩個示例:
v-if {{ value }}
{{ value }}
{{ value }}
js代碼:
var obj = { value: 1 }; var vm = new Vue({ el: "#app", data() { return obj; } });
運行在瀏覽器效果如圖:
現在你可以嘗試在瀏覽器控制臺更改vm.value = 2和vm.value = 3我們就可以看到頁面的變化。你也可以狠狠點擊此處具體示例查看和編輯。
我們再看v-show的示例:
v-show {{ value }}
{{ value }}
{{ value }}
js代碼:
var obj = { value:1 } var vm = new Vue({ data:obj }); vm.$mount(document.querySelector("#app"))
然后查看效果如圖:
嘗試在控制臺修改vm.value = 2和vm.value = 3我們就可以看到頁面的變化。你也可以狠狠點擊具體示例查看。
從上面兩個示例的對比,我們就可以看出來v-show與v-if指令的區別了,從切換效果來看v-if顯然不如v-show,這說明v-if有很大的切換開銷,因為每一次切換都要不停的執行刪除和插入DOM元素操作,而從渲染效果來看v-if又比v-show要好,v-show只是單純的改變元素的display屬性,而如果我們只想頁面存在一個元素之間的切換,那么v-if就比v-show要好,這也說明v-show有很大的渲染開銷。
而且v-if還可以結合v-else-if與v-else指令使用,而v-show不能,需要注意的就是v-else必須緊跟v-if或者v-else-if之后。當需要切換多個元素時,我們還可以使用template元素來包含,比如:
template {{ value }}
{{ value }}
{{ value }}{{ value }}
js代碼:
var obj = { value: 1 }; var vm = new Vue({ el: "#app", data() { return obj; } });
此時template相當于一個不可見元素,如下圖所示:
嘗試在控制臺修改vm.value = 2就可以看到效果了,你也可以狠狠的點擊此處具體示例。
對于可復用的元素,我們還可以添加一個key屬性,比如:
key username: email: mobile:
js代碼:
var obj = { loginType: "username", count:1 }; var vm = new Vue({ el: "#app", data() { return obj; }, methods: { changeType() { this.count++; if (this.count % 3 === 0) { this.loginType = "username"; } else if (this.count % 3 === 1) { this.loginType = "email"; } else { this.loginType = "mobile"; } } } });
效果如圖:
你可以狠狠的點擊具體示例查看。
從這幾個示例我們也可以看出v-if就是惰性,只有當條件為真時,v-if才會開始渲染。值得注意的就是v-if與v-for不建議合在一起使用。來看一個示例:
v-if與v-for
- {{ item.value }}
js代碼:
var obj = { list:[ { value:"html", active:false }, { value:"css", active:false }, { value:"javascript", active:true } ] }; var vm = new Vue({ el: "#app", data() { return obj; } });
雖然以上代碼不會報錯,但這會造成很大的渲染開銷,因為v-for優先級高于v-if,這就造成每次執行v-if指令時總要先執行v-for遍歷一遍數據。你可以點擊此處具體示例查看。
遇到這種情況,我們可以使用計算屬性。如:
v-if和v-for
- {{ item.value }}
js代碼:
var obj = { list: [ { value: "html", active: false }, { value: "css", active: false }, { value: "javascript", active: true } ] }; var vm = new Vue({ el: "#app", //先過濾一次數組 computed: { newList: function() { return this.list.filter(function(item) { return item.active; }); } }, data() { return obj; } });
如此一來,就減少了渲染開銷,你可以狠狠點擊這里具體示例查看。
指令的用法還遠不止如此,一些指令是可以帶參數的,比如v-bind:title,在這里title其實就是被作為參數。基本上HTML5屬性都可以被用作參數。比如圖片路徑的src屬性,再比如超鏈接的href屬性,甚至事件的添加也屬于參數,如v-on:click中的click其實就是參數。來看一個示例:
param
js代碼:
var obj = { url: "https://segmentfault.com/", src:"http://eveningwater.com/project/imggallary/img/15.jpg" }; var vm = new Vue({ el: "#app", data() { return obj; } });
效果如圖所示:
你可以點擊此處具體示例查看。
v-on指令還可以添加修飾符,v-bind與v-on指令還可以縮寫成:和@。縮寫對于我們在繁瑣的使用指令的項目當中是一個很不錯的幫助。
5.計算屬性模板表達式提供給我們處理簡單的邏輯,對于更復雜的邏輯,我們應該使用計算屬性。來看兩個示例的對比:
mustache {{ message.split("").reverse().join("") }}
js代碼:
var obj = { message:"hello,vue.js!" } var vm = new Vue({ data:obj }) vm.$mount(document.querySelector("#app"))
第二個示例:
mustache {{ reverseMessage }}
js代碼:
var obj = { message:"hello,vue.js!" } var vm = new Vue({ data:obj, computed:{ reverseMessage:function(){ return this.message.split("").reverse().join(""); } } }) vm.$mount(document.querySelector("#app"))
與第一個示例有所不同的就是在這個示例當中,我們申明了一個計算屬性reverseMessage,并且提供了一個getter函數將這個計算屬性同數據屬性message綁定在一起,也許有人會有疑問getter函數到底在哪里呢?
如果我們將以上示例修改一下:
var obj = { message:"hello,vue.js!" } var vm = new Vue({ data:obj, computed:{ reverseMessage:{ get:function(){ return this.message.split("").reverse().join(""); } } } }) vm.$mount(document.querySelector("#app"))
相信如此一來,就能明白了。你可以狠狠點擊此處具體示例。你可以通過控制臺修改message的值,只要message的值發生改變,那么綁定的計算屬性就會發生改變。事實上,在使用reverseMessage綁定的時候,我們還可以寫成調用方法一樣的方式,如:
mustache {{ reverseMessage() }}
js代碼:
var obj = { message:"hello,vue.js!" } var vm = new Vue({ data:obj, computed:{ reverseMessage:function(){ return this.message.split("").reverse().join(""); } } }) vm.$mount(document.querySelector("#app"))
那么這兩者有何區別呢?雖然兩者的結果都一樣,但計算屬性是根據依賴進行緩存的,只有相關依賴發生改變時它們才會重新求值。比如這里計算屬性綁定的依賴就是message屬性,一旦message屬性發生改變時,那么計算屬性就會重新求值,如果沒有改變,那么計算屬性將會緩存上一次的求值。這也意味著,如果計算屬性綁定的是方法,那么計算屬性不是響應式的。如下:
mustache {{ date }}
js代碼:
var vm = new Vue({ data:obj, computed:{ reverseMessage:function(){ return Date.now(); } } }) vm.$mount(document.querySelector("#app"))
與調用方法相比,調用方法總會在頁面重新渲染之后再次調用方法。我們為什么需要緩存,假設你要計算一個性能開銷比較大的數組,而且如果其它頁面也會依賴于這個計算屬性,如果沒有緩存,那么無論是讀取還是修改都會去多次修改它的getter函數,這并不是我們想要的。
計算屬性默認只有getter函數,讓我們來嘗試使用一下setter函數,如下:
computed
js代碼:
var vm = new Vue({ el: "#app", data: { first_name: "li", last_name: "qiang" }, computed: { name: { get: function() { return this.first_name + " " + this.last_name; }, set: function(newValue) { var names = newValue.split(" "); this.first_name = names[0]; this.last_name = names[names.length - 1]; } } } });
現在,我們只需要修改vm.name的值就可以看到first_name和last_name的值相應的也改變了。你可以狠狠點擊此處具體示例。
6.偵聽器雖然計算屬性在大多數情況下更合適,但有時候也可以使用偵聽器。vue通過watch選項提供一個方法來響應數據的變化。如:
watch 可以給我提出一個問題,然后我來回答?
{{ answer }}
js代碼:
var vm = new Vue({ el:"#app", data(){ return{ answer:"我不能回答你除非你提出一個問題!", question:"", answerImg:"" } }, created:function(){ // `_.debounce` 是一個通過 Lodash 限制操作頻率的函數。 // 在這個例子中,我們希望限制訪問 yesno.wtf/api 的頻率 // AJAX 請求直到用戶輸入完畢才會發出。想要了解更多關于 // `_.debounce` 函數 (及其近親 `_.throttle`) 的知識, // 請參考:https://lodash.com/docs#debounce this.debounceGetAnswer = _.debounce(this.getAnswer,500); }, //如果question值發生改變 watch:{ question:function(oldValue,newValue){ this.answer="正在等待你停止輸入!"; this.debounceGetAnswer(); } }, methods:{ getAnswer:function(){ //如果問題沒有以問號結束,則返回 if(this.question.indexOf("?") === -1){ this.answer = "提出的問題需要用問號結束!"; return; } this.answer = "請稍等"; var self = this; fetch("https://yesno.wtf/api").then(function(response){ //fetch發送請求,json()就是返回數據 response.json().then(function(data) { self.answer = _.capitalize(data.answer); self.answerImg = _.capitalize(data.image); }); }).catch(function(error){ self.answer = "回答失敗,請重新提問!"; console.log(error); }) } } })
現在咱們來看一下效果:
你可以狠狠點擊此處具體示例查看。
當在頁面中有一些數據需要根據其它數據的變動而改變時,就很容易濫用偵聽器watch。這時候命令式的偵聽還不如計算屬性,請看:
watch {{ fullName }}
js代碼:
var vm = new Vue({ el:"#app", data:{ firstName:"li", lastName:"qiang", fullName:"li qiang" }, watch:{ firstName:function(val){ this.fullName = val + " " + this.lastName; }, lastName:function(val){ this.fullName = this.firstName + " " + val; } } })
再看通過計算屬性實現的:
computed {{ fullName }}
js代碼:
var vm = new Vue({ el:"#app", data:{ firstName:"li", lastName:"qiang" }, computed:{ fullName:function(){ return this.firstNmae + " " + this.lastName; } } })
通過計算屬性實現的功能看起來更好,不是嗎?你可以自行嘗試具體示例(watch)與具體示例(computed)進行對比。
8.class與style綁定操作元素的class和style是構建一個頁面所常見的需求,因為它們都是屬性,所以利用v-bind指令就可以操作元素的class和style樣式。如;
class 添加一個class類,改變字體顏色為紅色。
js代碼如下;
var vm = new Vue({ el:"#app", data:{ className:"font-red" } })
你可以狠狠點擊此處具體示例 查看。
再來看一個簡單綁定style的示例。
style 改變元素的字體顏色為紅色。
js代碼:
var vm = new Vue({ el:"#app", data:{ styleProp:"color:#f00;" } })
你可以狠狠點擊此處具體示例查看。
這只是class與style的簡單用法,vue.js專門在這方面做了增強,使得綁定class和style 的值可以是對象,也可以是數組,如:
class 改變字體的顏色
js代碼:
var vm = new Vue({ el:"#app", data:{ isRed:true, isBlue:false } })
我們可以看到頁面效果如圖:
你還可以通過控制臺修改vm.isBlue或vm.isRed的值,這充分說明這兩個值是響應式的。如:
你可以狠狠的點擊此處具體示例查看。
同樣的,style一樣也可以使用對象語法,如:
style 字體大小為18px,字體顏色為紅色,并且加粗的字體。
js代碼:
var vm = new Vue({ el: "#app", data: { fontColor: "#f00", font18: "18px", fontBold:"bold" } });
效果如圖:
我們一樣可以修改其中的值,這些值也是響應式的,比如修改vm.fontColor="#0f0"就表示將字體顏色改變為藍色。從上例我們也可以看出,我們可以使用駝峰式 (camelCase) 或短橫線分隔 (kebab-case,需要用單引號括起來)來定義css屬性名。
你可以狠狠點擊此處具體示例查看。
當然在更多時候,我們直接綁定一個對象更有利于讓模板變得清晰,也方便我們理解。
style 字體大小為18px,字體顏色為紅色,并且加粗的字體。
js代碼:
var vm = new Vue({ el: "#app", data: { styleObject:{ fontSize:"18px", color:"#f00", "font-weight":"bold" } } });
這也是一樣的效果,你可以點擊此處具體示例查看。
除了對象語法,數組語法也同樣適用于class和style,如:
class 顏色為紅色大小為18px的字體
js代碼:
var vm = new Vue({ el: "#app", data: { fontColor: "font-red", fontSize: "font-18" } });
運行效果如圖:
你同樣可以修改class的名字,諸如vm.fontColor="font-blue",這樣頁面就會將font-red更改為font-blue,這畢竟是響應式的。你可以狠狠點擊此處具體示例查看。
同樣的,style也能如此做,如:
style 顏色為紅色大小為18px的字體
js代碼:
var vm = new Vue({ el: "#app", data: { colorF: { color:"#f00" }, sizeF: { fontSize:"18px" } } });
這里尤其注意如下的寫法是錯誤的,vue.js并不能渲染出樣式:
//這說明style綁定的數組項只能是一個對象,而不能是字符串 var vm = new Vue({ el: "#app", data: { colorF: "color:#f00;", sizeF: "font-size:18px;" } });
同樣,我們注意修改值的時候也應該修改成一個對象,如:
vm.sizeF = { "font-size":"20px" }
這點是需要注意的,另外在遇到帶有前綴的css屬性,如transition時,我們不必寫前綴,因為vue會自動幫我們添加前綴。你可以狠狠點擊此處具體示例查看。
style的用法還不止如此,我們還可以綁定多重值。如下:
style 顏色為紅色大小為18px的字體
js代碼:
var vm = new Vue({ el: "#app", data: { webkitD:"-webkit-flex", nomarD:"flex" } });
這樣一來,瀏覽器會根據支持-webkit-flex或flex而采用支持的寫法,這個是在vue2.3.0+版本中增加的功能。你可以點擊此處具體示例查看。
9.條件渲染v-if指令用于條件性的渲染一塊內容,這個指令只在它綁定的值為truthy的時候才會渲染內容。例如:
v-if
你可以狠狠點擊此處具體示例查看效果。
v-if指令也可以與v-else指令結合使用,注意v-else必須緊跟v-if或者v-else-if之后。比如:
v-if
你可以狠狠點擊此處具體示例查看效果。
v-if也可以直接在標簽上使用,這種情況下,我們通常是為了切換多個元素,因為v-if必須添加到一個元素上,而且會把template當作不可見元素來渲染,也就是說最終渲染不會包含template元素。比如:
v-if 呵呵呵
哈哈哈
嘻嘻嘻嘿嘿嘿
你可以狠狠點擊此處具體示例查看效果。
在vue2.1.0新增了v-else-if,顧名思義,也就是緊跟v-if之后,v-else之前的指令,可以使用多個v-else-if指令。比如:
v-if 哈哈哈
嘿嘿嘿嘻嘻嘻呵呵呵
你可以狠狠點擊此處具體示例查看效果。在這些示例中,只要綁定的是在vue實例data選項中的數據,那么值就是響應式的,我們可以直接在控制臺中修改,比如以上的vm.type = 1,我們就可以看到頁面的的元素以及內容被改變,并重新渲染。
由于vue是簡單的復用元素,而不是重新渲染元素,因此,這會讓vue非常的高效,但這不可避免出現了一個問題,如下:
v-if 姓名: 郵箱: 密碼:
你可以狠狠點擊此處具體示例查看效果。在輸入框中輸入值,然后再點擊切換按鈕,你會發現input的內容并沒有被清空,這也說明vue并不是重新渲染元素,而是高效的復用元素而已。再實際開發中,這樣肯定是不符合需求的,那么我們應該如何解決這個問題呢?
還好,vue提供了一個key屬性,我們只需要給每個復用的元素綁定一個key屬性,用于區分它們是不同的元素。如下:
v-if 姓名: 郵箱: 密碼:
現在你再嘗試在輸入框中輸入值,然后點擊切換按鈕,就會發現值會被清空了。請點擊具體示例查看效果。
需要注意的是label元素其實也是被復用了,因為它們沒有添加key屬性。
v-show的指令用法跟v-if差不多,唯一需要注意的區別就是v-show僅僅只是改變了元素的display屬性而已,其DOM元素仍然存在于文檔中,
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/114266.html
摘要:哪吒別人的看法都是狗屁,你是誰只有你自己說了才算,這是爹教我的道理。哪吒去他個鳥命我命由我,不由天是魔是仙,我自己決定哪吒白白搭上一條人命,你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運,我不曉得。我只曉得,不認命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處 查看github最新的Vue...
摘要:前言一個包含的簡單,從第一個開始,依次深入學習,即可快速上手強大的。 前言 一個包含 vue-router的簡單demos,從第一個demo開始,依次深入學習,即可快速上手強大的vue-router。 如何使用 安裝模塊pure 或 http-server來啟動服務器npm install -g puer or npm install -g http-server 克隆倉庫 啟動服...
摘要:第一集從零開始實現環境的搭建工程定位本套工程定位在端針對的組件庫名字的由來是我從年養到現在的一直大金毛是我的吉祥物原因本人上一份工作參與了大型的保險公司后臺管理系統的搭建對的端框架有過一定的了解感受到了他們真的很強大同時也存在少許的不足其實 第一集: 從零開始實現(環境的搭建) 工程定位: 本套工程, 定位在pc端針對vue的ui組件庫 名字的由來 cc是我從2015年養到現在的...
摘要:最近終于痛定思痛,做了一個應用,目前的產品確實很一般,但決定以此為起步,逐步完善逐步提高。是以提供游戲下載游戲禮包發放為核心的移動端應用。可以簡單理解成一個游戲的應用市場。在寫后端的時候,產出了一個基于的授權的。 移動互聯網時代,我不想只當一個后端工程師,是時候學習一些新的東西了! 一直以來想要學習一些前端的知識,擴寬自己的技術棧,但是一直以來對前端都是進行了解,沒有用一個產品把這些東...
摘要:第八集從零開始實現輸入框組件本集定位組件是交互的一大利器他與用戶的交流最為密切所以奠定了他在組件界的重要地位也算是一種如果可以的話本集也會一起說完畢竟是一個類型的一起學完收獲會很大古人云組件不封輸入框,一到面試就發慌一簡介大家如果對這個 第八集: 從零開始實現(輸入框input,textarea組件) 本集定位: input組件是交互的一大利器, 他與用戶的交流最為密切, 所以奠...
閱讀 1411·2021-10-08 10:04
閱讀 733·2021-09-07 09:58
閱讀 2912·2019-08-30 15:55
閱讀 2424·2019-08-29 17:21
閱讀 2126·2019-08-28 18:04
閱讀 3075·2019-08-28 17:57
閱讀 714·2019-08-26 11:46
閱讀 2228·2019-08-23 17:20