如何初入vue.js到实践过程之技术准备前篇

阅读前：

这里先放一下实践的成果的文章: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)。

未完待续...

最后编辑于：2019.03.14 01:51:35