持續(xù)更新中
看了一段時間的視頻，即便是大火的現(xiàn)在睡扬，講vue的視頻還是那么不盡如人意谦炬，還是按照文檔學(xué)吧悦屏，順序知乎和簡書里都有的，我也就再貼一次vue學(xué)習(xí)順序,暫時覺得還不錯吧寺，一點一點跟著做吧窜管。
那么正文來了，在跟著文檔上敲各種小demo和自己YY出來的demo的時候會遇到什么呢稚机？我把我遇到的問題和解決方法都羅列出來幕帆，記錄這段路程。
一赖条、跟隨官網(wǎng)教程敲
- 條件渲染
問題描述：在條件渲染中失乾，寫完這段代碼運行后，怎么刷新都是YES和NO都存在著;
<div v-if="Math.random() > 0.5">
Yes
</div>
<div v-else>NO</div>
解決方案：創(chuàng)建個Vue實例纬乍，就可以了;
<div id="app">
<div v-if="Math.random() > 0.5">
Yes
</div>
<div v-else>NO</div>
</div>
<script >
var vm = new Vue({
el : "#app"
})
</script>
- key值控制元素是否重用
完整示例如下：
<div id="example">
<template v-if="loginTyoe === 'userName'">
<lable>username</lable>
<input type="text" placeholder="Enter your userName" key="userName"/>
</template>
<template v-else>
<lable>email</lable>
<input type="text" placeholder="Enter your email" key="email"/>
</template>
<button @click="toggle()">toggle</button>
</div>
<script>
var vm = new Vue({
el : "#example",
data : {
loginType ： "userName"
},
methods : {
toggle : function(){
this.loginType = this.loginType === "userName" ? "email" : "userName";
}
}
})
</script>
- 方法事件處理器
問題描述：在Vue中使用v-on質(zhì)量添加點擊事件的過程中碱茁，執(zhí)行函數(shù)直接寫函數(shù)名可以獲取鼠標(biāo)事件如@click="fn"，而函數(shù)名加括號的形式仿贬，卻獲取不到鼠標(biāo)事件如@click="fn()"纽竣；
<div id="app">
<button @click="even">點我彈東西</button>
</div>
<script src="lib/js/vue.min.js"></script>
<script src="lib/js/vue-resource.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message : "Vue.js"
},
methods : {
even : function(e){
alert("Hello" + this.message);
if(e){
alert(e.target.tagName);
}
}
}
})
往下看就知道了，在Vue中，提供了一個$event的特殊變量在傳遞原生的事件對象蜓氨；
如果對jq有了解的話聋袋，在$.ajax請求數(shù)據(jù)后，較多的需求是拼接DOM元素并插入到需求的DOA節(jié)點中穴吹，有的時候需要給其中的某些元素添加事件幽勒，有一種方式就是在拼接的時候把點擊等需要執(zhí)行的函數(shù)也拼接進(jìn)去；如果同時需要得到被電擊的元素的話可能就需要獲取鼠標(biāo)事件對象然后再去各種操作港令；
上面的一段文字可以總結(jié)成這樣幾行代碼:
$("<li onclick="test(this)">data</li>").appendTo("body");
function test(){
do someting......
}
那么總結(jié)一下啥容，在通過v-on綁定事件的時候，是不能傳遞this的顷霹，以點擊事件為例咪惠，如果需要獲取這個被點擊元素就需要通過獲取鼠標(biāo)事件來間接獲取，這時我們可以這樣寫
<button @click="fn($event)">點擊</button>
在Vue的實例中泼返，fn這個函數(shù)內(nèi)可以通過接受參數(shù)的方式獲取到鼠標(biāo)事件了
- 組件
問題描述:這個問題特別的唬人硝逢，我想了好幾分鐘，后來才發(fā)現(xiàn)是被先入為主的概念限制的思維（說難聽點就是自己太蠢了绅喉，哈哈）
<div id="app">
<test1></test1>
<test2></test2>
<test3></test3>
</div>
<script>
var info = { count : 0 };
//注冊全局組件渠鸽，當(dāng)然局部也行
Vue.component("test1",{
template : "<button @click='count += 1'>{{count}}</button>",
data : function () {
return info;
}
});
Vue.component("test2",{
template : "<button @click='count += 1'>{{count}}</button>",
data : function () {
return info;
}
});
Vue.component("test3",{
template : "<button @click='count += 1'>{{count}}</button>",
data : function () {
return info;
}
});
new Vue({
el : "#app"
})
</script>
上述代碼的結(jié)果就是點擊按鈕加1，這個沒問題柴罐，問題出在官網(wǎng)解釋的這句話
由于三個組件實例共享的是同一個對象徽缚，因此增加一個計數(shù)器，就會增加全部革屠！嗯凿试。讓我們通過改為返回一個全新的數(shù)據(jù)對象，來解決下這個問題：
data: function () {
return {
count: 0
}
}
我只能說似芝，這個‘嗯‘字很精髓那婉，讓我一時沒有反應(yīng)過來，導(dǎo)致想了半天原因是什么党瓮。详炬。。
結(jié)果一句話就能說清楚——第二個組件里的count不再是info里的count了寞奸，我去了我是不是很蠢呛谜。。枪萄。
2017年8月27日
- 單個slot
問題描述:官網(wǎng)代碼補全
<div id="app">
<h2>我是父組件的標(biāo)題</h2>
<my-component>
<p>這是一些初始的內(nèi)容</p>
<p>這是一些更多初始的內(nèi)容</p>
</my-component>
</div>
<script src="lib/js/vue.min.js"></script>
<script src="lib/js/vue-resource.js"></script>
<script>
Vue.component("my-component",{
template : '<div><h2>我是子組件的標(biāo)題</h2>
<slot>只有在沒有分發(fā)內(nèi)容時才會顯示</slot></div>'
})
var vm = new Vue({
el: "#app",
})
</script>
最初在 <slot> 標(biāo)簽中的任何內(nèi)容隐岛，都被視為備用內(nèi)容。備用內(nèi)容在子組件作用域內(nèi)編譯瓷翻，并且只有在宿主元素為空聚凹，且沒有要插入的內(nèi)容時才顯示備用內(nèi)容割坠。
上述的這段話是官網(wǎng)的原文，按照我個人的理解妒牙，意思是指當(dāng)my-component這個自定義標(biāo)簽內(nèi)沒有內(nèi)容的時候韭脊，slot中的內(nèi)容才會顯示，如果有单旁，則不會顯示。
2017年8月27日22:37:09
- 異步組件
問題描述：看官網(wǎng)的示例直接懵逼饥伊；
解決辦法：Vue的異步組件;我就是按照這個上面說的理解的象浑，當(dāng)然了，里面涉及到了一些webpack的知識琅豆，如果不會也要好好看看愉豺，但還是得說寫的很不錯，值得借鑒（覺得這篇博客寫的不錯的就頂一下吧）茫因。
二蚪拦、學(xué)習(xí)Vue-Router
2017年8月29日00:01:07
懵逼中，我想靜靜
2017年8月29日23:47:00
找到了一個非常不錯的博客冻押，有文章有視頻驰贷，跟著學(xué)Vue感覺很棒，是一個很適合新手Vue學(xué)習(xí)的平臺洛巢，又從Vue cli新看了一次括袒，受益匪淺，會繼續(xù)跟下去稿茉；
不過從昨天開始換編輯器锹锰，一直被新編輯器支持Vue語法和高亮的配置搞的頭大，后來不得不換回熟悉的webstorm漓库，不然太耽誤時間了恃慧；
堅持是件很難的事情，但堅持下來了再回頭看看渺蒿，也就那么回事痢士，加油吧!
2017年8月30日23:37:17
三、Vue-Router總結(jié)
今天終于把路由這部分搞完了蘸嘶，感覺還可以良瞧，就是最近繃得太緊了，有點累训唱，明天一早總結(jié)下褥蚯。
2017年9月6日22:21:07
轉(zhuǎn)眼就快一個禮拜過去了，算是為了未來兩年做了些可能的鋪墊吧况增。同時也把jspang的vue視頻都學(xué)完了赞庶。
