Vue.js學習筆記（一） - 起步

時間 2019-12-13

標籤 vue.js vue 學習筆記起步欄目 JavaScript 简体版

原文原文鏈接

本篇將簡單介紹一下Vue.js，並在Node.js環境下搭建一個簡單的Demo。javascript

1、簡介

我我的理解，Vue.js是一套前端視圖層的框架，它只關心視圖展現和數據綁定，它的一些語法與Angular 1很是類似，若是有Angular 1相關的使用經驗，上手會很是快。css

相比較其餘的React、Angular 2等MVVM框架，它更加的輕量，效率也更高，也能更好的與其餘庫集成。html

它擁有如下幾個出色的特性：前端

- 數據雙向綁定
- 指令
- 模板
- 組件

當前最新的版本爲2.1.4。後續也會在這個版本下演示Demo。vue

2、環境準備

下載安裝Node.js環境，安裝成功後在命令行窗口依次執行如下命令：java

> npm install bower -g
> npm install express-generator -g

安裝完成後進入工程目錄（隨意新建一個目錄），依次執行如下命令，建立一個名爲vue-demo的項目：jquery

1 > express vue-demo --view=ejs
2 > cd vue-demo
3 > npm install
4 > bower init
5 > bower install requirejs --save
6 > bower install vue --save

全部命令執行成功後，在項目根目錄手動增長一個名爲.bowerrc文件，內容以下express

1 {
2   "directory": "public/plugins/"
3 }

爲了後面顯示的demo頁面好看一點，再引入bootstrap。這步不是必須的npm

> bower install bootstrap --save

最終的目錄結構以下bootstrap

3、Hello World

按照慣例，學習一個新的語言，都要先問候一下咱們這個精彩的世界。修改 views/index.ejs 文件內容

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 
 4 <head>
 5   <meta charset="utf-8">
 6   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7   <meta name="viewport" content="width=device-width, initial-scale=1">
 8   <title>Index</title>
 9 
10   <!-- Bootstrap -->
11   <link href="plugins/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
12 </head>
13 
14 <body>
15   <div id="app" class="container">
16     <input type="text" v-model="message" />
17     <p>{{message}}</p>
18   </div>
19 
20   <!-- requirejs main -->
21   <script src="plugins/requirejs/require.js" data-main="javascripts/index.js"></script>
22 </body>
23 
24 </html>

在 public/javascrips 目錄裏新建一個文件 index.js ，內容以下

 1 /// <reference path="../plugins/requirejs/require.js" />
 2 
 3 require.config({
 4     baseUrl: "plugins",
 5     paths: {
 6         jquery: "jquery/dist/jquery.min",
 7         bootstrap: "bootstrap/dist/js/bootstrap.min",
 8         vue: "vue/dist/vue.min"
 9     }
10 });
11 
12 require(['jquery', 'bootstrap', 'vue'], function ($, bootstrap, Vue) {
13     var vm = new Vue({
14         el: "#app",
15         data: {
16             message: "Hello world!"
17         }
18     });
19 });

在命令行窗口的項目目錄下執行命令 npm start ，訪問 http://localhost:3000/

修改文本框裏的內容，下方文字也會跟着變化

這是一個簡單的雙向數據綁定的例子。經過Vue類型構造了一個根實例，分別給 el 屬性賦值須要綁定的頁面元素ID，給 data 屬性賦值須要綁定的數據。在頁面裏，經過給 input 元素添加指令 v-model ，綁定到數據的message屬性。在 p 元素裏經過表達式 {{message}} 綁定message屬性。這樣頁面就能直接展現綁定的數據內容，在改變 input 的內容時，也能同步改變下方文本內容。

4、屬性、方法

經過Vue實例能夠直接訪問綁定的數據的屬性。修改 index.js 文件內容：

 1 require(['jquery', 'bootstrap', 'vue'], function ($, bootstrap, Vue) {
 2     var d = {
 3         message: "Hello world!"
 4     };
 5 
 6     var vm = new Vue({
 7         el: "#app",
 8         data: d
 9     });
10 
11     // 屬性代理
12     console.log('vm.message = ' + vm.message);
13     console.log('vm.message === d.message? ' + (vm.message === d.message));
14 });

訪問頁面，查看瀏覽器控制檯顯示以下：

從上面的例子能夠看到， vm 實例「代理」了綁定的數據對象，經過實例能夠直接訪問數據對象裏的屬性。

除了能「代理」數據對象， vm 實例也有一些內置屬性和方法，這些屬性和方法都有 $ 前綴。再修改 index.js 內容：

 1 require(['jquery', 'bootstrap', 'vue'], function ($, bootstrap, Vue) {
 2     var d = {
 3         message: "Hello world!"
 4     };
 5 
 6     var vm = new Vue({
 7         el: "#app",
 8         data: d
 9     });
10 
11     // 屬性代理
12     console.log('vm.message = ' + vm.message);
13     console.log('vm.message === d.message? ' + (vm.message === d.message));
14 
15     console.log('vm.$data = ' + JSON.stringify(vm.$data));
16     console.log('vm.$data === d? ' + (vm.$data === d));
17 
18     console.log('vm.$el = ' + vm.$el);
19     console.log('vm.$el === div.#app? ' + (vm.$el === document.getElementById('app')));
20 
21     // 內置方法
22     vm.$watch('message', function (oldVal, newVal) {
23         console.log('oldVal is: ' + oldVal);
24         console.log('newVal is: ' + newVal);
25     });
26 });

刷新頁面，查看控制檯：

$data：Vue實例的數據對象。經過這個屬性能夠訪問到原始數據對象。
$el：Vue實例掛載的DOM元素對象。

修改頁面文本框的內容，查看控制檯：

$watch：Vue實例監視屬性變化的內置方法。當被監視的屬性改變時，將會觸發這個方法。

5、生命週期鉤子

Vue也提供了在實例化時各個狀態變化過程當中觸發的事件方法。修改 index.js 內容：

 1 require(['jquery', 'bootstrap', 'vue'], function ($, bootstrap, Vue) {
 2     var d = {
 3         message: "Hello world!"
 4     };
 5 
 6     var vm = new Vue({
 7         el: "#app",
 8         data: d,
 9         beforeCreate: function () {
10             console.log('beforeCreate is triggered.')
11         },
12         created: function () {
13             console.log('created is triggered.')
14         },
15         beforeMount: function () {
16             console.log('beforeMount is triggered.')
17         },
18         mounted: function () {
19             console.log('mounted is triggered.')
20         },
21         beforeUpdate: function () {
22             console.log('beforeUpdate is triggered.')
23         },
24         updated: function () {
25             console.log('updated is triggered.')
26         },
27         beforeDestroy: function () {
28             console.log('beforeDestroy is triggered.')
29         },
30         destroyed: function () {
31             console.log('destroyed is triggered.')
32         }
33     });
34 });