天一阁
0%

Getting Started笔记（Vue JS 2 - The Complete Guide）

Posted on In Views: Valine:

vue是一段js代码，前端开发框架，体积小，运行速度快，特性丰富。在youtube上，vue的课程很多，其中Vue JS 2 - The Complete Guide，这个课程我觉得讲的挺好，他符合欧美讲师的特点，总是从一个特别简单的例子，一步步把学生或听众带到比较复杂的问题上。这种教学方式，国内的老师总是学不会。

这么课程在udemy上买的很贵，但是在B站上却有完整的视频，链接在这里，不用花钱了，但是这位讲师是来自德国，他的英语发音要完全听懂也是费尽，好在计算机的课程的术语大家都能听懂。

Vue是前端开发框架，其实就是一个js脚本，目前的版本2.4.3大概有10k行左右，有机会还是好好读一遍。

先说他最简单的使用方式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="https://unpkg.com/vue/dist/vue.js" charset="utf-8"></script>
  </head>
  <body>
    <div id="app">
      <input type="text" name="" value="" v-on:input='changeTitle'>
      <p>{{title}}</p>
    </div>

    <script>
      new Vue({
        el: '#app',
        data: {
          title:'Hello World',
        },
        methods: {
          changeTitle: function(event){
            this.title = event.target.value;
          }
        }
      });
    </script>
  </body>
</html>

在HTML中，加入<script src="https://unpkg.com/vue/dist/vue.js" charset="utf-8"></script>，这时就可以使用vue的功能了，但是需要new 一个Vue对象出来（关于js的对象可以看这篇《[Javascript的对象]》）。

这个Vue对象传入的参数，也是一个js对象，里面最重要的属性之一是el, 他表示需要vue操作的Dom。其次是data属性，这里可以设置很多整个webApp需要用到的变量，在这里设置之后，只需要在HTML中用两个大括号就可以显示值比如上面的Getting Started笔记（Vue JS 2 - The Complete Guide），而且还能动态刷新，每次title的值发生变化，就会立刻体现在网页上。

另外一个很重要的属性就是method，前端的业务逻辑都需要写在这里，比如上面的changeTitle函数就是监听input的输入时间，一旦input的value发生变化，就会改变title的值，同时也会刷新在网页上。

Vue这类前端框架很有意思，用了各种怪异的语法后，前端的写法就变成了和写一个后台业务逻辑差不多的方式了，他们所谓MVVM的模式，我是不能完全理解，但我明白一点，就是web也可以像一个桌面软件或者移动App一样，没有那没多跳转，数据后台异步加载，同时数据、页面展示、业务逻辑进行了很好的分离，这样开发起来及逻辑清晰，又能够工程化。