持续更新中
看了一段时间的视频，即便是大火的现在，讲vue的视频还是那么不尽如人意，还是按照文档学吧，顺序知乎和简书里都有的，我也就再贴一次vue学习顺序,暂时觉得还不错，一点一点跟着做吧。
那么正文来了，在跟着文档上敲各种小demo和自己YY出来的demo的时候会遇到什么呢？我把我遇到的问题和解决方法都罗列出来，记录这段路程。
一、跟随官网教程敲
- 条件渲染
问题描述：在条件渲染中，写完这段代码运行后，怎么刷新都是YES和NO都存在着;
<div v-if="Math.random() > 0.5">
Yes
</div>
<div v-else>NO</div>
解决方案：创建个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质量添加点击事件的过程中，执行函数直接写函数名可以获取鼠标事件如@click="fn"，而函数名加括号的形式，却获取不到鼠标事件如@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请求数据后，较多的需求是拼接DOM元素并插入到需求的DOA节点中，有的时候需要给其中的某些元素添加事件，有一种方式就是在拼接的时候把点击等需要执行的函数也拼接进去；如果同时需要得到被电击的元素的话可能就需要获取鼠标事件对象然后再去各种操作；
上面的一段文字可以总结成这样几行代码:
$("<li onclick="test(this)">data</li>").appendTo("body");
function test(){
do someting......
}
那么总结一下，在通过v-on绑定事件的时候，是不能传递this的，以点击事件为例，如果需要获取这个被点击元素就需要通过获取鼠标事件来间接获取，这时我们可以这样写
<button @click="fn($event)">点击</button>
在Vue的实例中，fn这个函数内可以通过接受参数的方式获取到鼠标事件了
- 组件
问题描述:这个问题特别的唬人，我想了好几分钟，后来才发现是被先入为主的概念限制的思维（说难听点就是自己太蠢了，哈哈）
<div id="app">
<test1></test1>
<test2></test2>
<test3></test3>
</div>
<script>
var info = { count : 0 };
//注册全局组件，当然局部也行
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>
上述代码的结果就是点击按钮加1，这个没问题，问题出在官网解释的这句话
由于三个组件实例共享的是同一个对象，因此增加一个计数器，就会增加全部！嗯。让我们通过改为返回一个全新的数据对象，来解决下这个问题：
data: function () {
return {
count: 0
}
}
我只能说，这个‘嗯‘字很精髓，让我一时没有反应过来，导致想了半天原因是什么。。。
结果一句话就能说清楚——第二个组件里的count不再是info里的count了，我去了我是不是很蠢。。。
2017年8月27日
- 单个slot
问题描述:官网代码补全
<div id="app">
<h2>我是父组件的标题</h2>
<my-component>
<p>这是一些初始的内容</p>
<p>这是一些更多初始的内容</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>我是子组件的标题</h2>
<slot>只有在没有分发内容时才会显示</slot></div>'
})
var vm = new Vue({
el: "#app",
})
</script>
最初在 <slot> 标签中的任何内容，都被视为备用内容。备用内容在子组件作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。
上述的这段话是官网的原文，按照我个人的理解，意思是指当my-component这个自定义标签内没有内容的时候，slot中的内容才会显示，如果有，则不会显示。
2017年8月27日22:37:09
- 异步组件
问题描述：看官网的示例直接懵逼；
解决办法：Vue的异步组件;我就是按照这个上面说的理解的，当然了，里面涉及到了一些webpack的知识，如果不会也要好好看看，但还是得说写的很不错，值得借鉴（觉得这篇博客写的不错的就顶一下吧）。
二、学习Vue-Router
2017年8月29日00:01:07
懵逼中，我想静静
2017年8月29日23:47:00
找到了一个非常不错的博客，有文章有视频，跟着学Vue感觉很棒，是一个很适合新手Vue学习的平台，又从Vue cli新看了一次，受益匪浅，会继续跟下去；
不过从昨天开始换编辑器，一直被新编辑器支持Vue语法和高亮的配置搞的头大，后来不得不换回熟悉的webstorm，不然太耽误时间了；
坚持是件很难的事情，但坚持下来了再回头看看，也就那么回事，加油吧!
2017年8月30日23:37:17
三、Vue-Router总结
今天终于把路由这部分搞完了，感觉还可以，就是最近绷得太紧了，有点累，明天一早总结下。
2017年9月6日22:21:07
转眼就快一个礼拜过去了，算是为了未来两年做了些可能的铺垫吧。同时也把jspang的vue视频都学完了。
