阅读前：
这里先放一下实践的成果的文章:Vue的第一个项目
部署地址预览:school_login
入门前：
我在入门前，了解基本的Html标签，会使用Javascript(没有系统学过，不会的就查博客，官方文档、论坛等，是边学边积累的那种)；会使用Jquery(之前有写网站都是直接用它的，当然这里开发没用到它)；css基本会一些，不是很精通(最近有在刻意去积累)。
开始前：
准备了两个资源：
- [x] vue.js官方网站:用于学习基本知识，这个很重要。（必须练习去体会），这个文档不是看一遍就可以，要反复看的
vue官网文档 这里学习的是vue 2.x - [x] 慕课网站的视频:用于了解一个项目基本开发流程，常用的工具集合等，简单说就是项目经验吧，毕竟是要快速进入开发模式。
3小时速成 Vue2.x 核心技术教程视频
准备了四个工具软件
- [x] 前期：notepad++,谷歌浏览器
- [x] 后期：webstorm,谷歌浏览器
- [x] 学习笔记：Mindly(安卓版，思维导图)
学习模式开始：
语法学习阶段
前期我是使用notepad++、谷歌浏览器进行vue的语法练习，一边看官方文档，一边体会。下面就是练习的时候的敲打代码，其实就和官方给的差不多:
<!DOCTYPE html>
<html>
<head>
<title>vue new begin</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 文本 -->
<div id='app'>
{{name}},{{message}}
</div>
<!-- 属性 -->
<div id="app-2">
<span v-bind:title='message'>
Hover your mouse over me for a few seconds
to see my dynamically bound title!
</span>
</div>
<!-- 逻辑 -->
<div id="app-3">
<p v-if="seen">现在看到你了</p>
</div>
<!-- 迭代 -->
<div id="app-4">
<ol>
<li v-for="item in items">
{{ item.text}}
</li>
</ol>
</div>
<!-- 点击 -->
<div id="app-5">
<p>{{message}}</p>
<button v-on:click="reverseMessage">翻转</button>
</div>
<!-- 同步绑定 -->
<div id="app-6">
<p>{{message}}</p>
<input v-model="message">
</div>
<!-- watch -->
<div id="app-7">
<p>{{message}}</p>
<p>{{msg}}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello Vue!",
name: "Cendeal"
}
});
var app2 = new Vue({
el: "#app-2",
data: {
message: "You loaded this page on " + new Date().toLocaleString()
}
});
var app3 = new Vue({
el: "#app-3",
data: {
seen: true
}
});
var app4 = new Vue({
el: "#app-4",
data: {
items: [
{ text: "javascript" },
{ text: "c++" },
{ text: 'java' }
]
}
});
var app5 = new Vue({
el:"#app-5",
data:{
message:"i love you"
},
methods: {
reverseMessage:function(){
this.message = this.message.split("").reverse().join('')
}
}
});
var app6 = new Vue({
el:"#app-6",
data:{
message:'hello'
}
});
var app7 = new Vue({
el:'#app-7',
data:{
message:'hi'
},
watch: {
message:function(newword,oldword){
console.log(oldword,newword)
}
}
,
computed:{
msg:function(){
return '555'+this.message
}
}
})
</script>
</body>
</html>
以上的实例都是一个一个敲来测试的，了解了基本语法之后，我就去看视频了，毕竟自己看到的和理解到的可能还是会有不足，看看教程视频可以收获到不同的理解，或者自己没理解到位的内容
借鉴他人经验与参考他们理解
看视频的时候我开始使用Mindly做笔记了，把自己从官方文档没理解到位的见解记录下来，构建完整的属于自己的知识网络。
在看视频的过程，我一般是看完两到三节再去实验的，在实验过程看自己的笔记，根据笔记的疑问和知识点去测试，如果发现存在疑惑的地方我回看视频，看看有没有遗漏的，如果没有解决方案，我会去网上查找答案，看看别人的博客等等，找到了解决方案，我会把新的理解添加到自己的笔记。
就这样几乎把视频看完了(后面还有一些内容,我觉得和我要做的项目关系不大就不继续看了)，在实验过程也有反复会看看视频的时候。实验主要看是不是和自己理解的一致，检测了之后，我就开始去实践自己在学习前构思的项目了(在学习前我就想好了要做什么的。其实要学vue，是因为我想用Muse-UI)。
未完待续...
网友评论