VUE學習---vue基礎與vue-router

時間  2019-12-05
標籤 vue 學習 基礎 router 简体版
原文   原文鏈接

一.前端開發工具包

node.js

Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。 
Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。 
Node.js 的包管理器 npm，是全球最大的開源庫生態系統。php

官網：html

https://nodejs.org/en/前端

下載最新版本vue

安裝，瘋狂點擊下一步，就能夠了！node

安裝完成後，打開cmd控制檯，輸入命令node -v 查看版本：webpack

C:\Users\john>node -v
v10.7.0

本質上仍是JS，跑在V8引擎上的，讓JS可以和操做系統進行交互
和Python\php相似的腳本語言web

npm

npm 是 JavaScript 世界的包管理工具,而且是 Node.js 平臺的默認包管理工具。經過 npm 能夠安裝、共享、分發代碼,管理項目依賴關係。vue-router

NPM是隨同NodeJS一塊兒安裝的包管理工具，能解決NodeJS代碼部署上的不少問題npm

打開cmd控制檯，輸入命令npm -v 查看版本：數組

C:\Users\john>npm -v
6.1.0

相似於Python中的pip，幫助咱們解決包和包之間版本的依賴關係

 

npm

npm 是 JavaScript 世界的包管理工具,而且是 Node.js 平臺的默認包管理工具。經過 npm 能夠安裝、共享、分發代碼,管理項目依賴關係。

NPM是隨同NodeJS一塊兒安裝的包管理工具，能解決NodeJS代碼部署上的不少問題

打開cmd控制檯，輸入命令npm -v 查看版本：

C:\Users\john>npm -v
6.1.0

相似於Python中的pip，幫助咱們解決包和包之間版本的依賴關係

npm install webpack -g
npm install webpack-cli -g

關閉cmd窗口，再次打開，查看版本

C:\Users\john>webpack -v
4.16.2

 

VUE 生命週期圖示

下圖展現了實例的生命週期。你不須要立馬弄明白全部的東西，不過隨着你的不斷學習和使用，它的參考價值會愈來愈高。

 

Vue的生命週期，就是從Vue實例被建立開始到實例銷燬時的過程，整個過程主要能夠分爲八個階段分別是：

  1. 建立前（beforeCreate）
  2. 已建立（created）
  3. 編譯前（beforeMount）
  4. 編譯後（mounted）
  5. 更新前（beforeUpdate）
  6. 更新後（update）
  7. 銷燬前（beforeDestroy）
  8. 銷燬後（destroyed）

以上各個階分別會有對應的「鉤子函數」以Vue實例的選項的形式存在。

 

Vue提供的生命週期鉤子以下：

①　beforeCreate

在實例初始化以後，數據觀測(data observer，開始監控Data對象數據變化)和初始化事件(init event，Vue內部初始化事件)以前被調用。

②　created

在實例已經建立完成以後被調用。實例已完成如下的配置：數據觀測(data observer)，屬性和方法的運算，event事件回調。掛載階段還沒有開始，$el 屬性不可見。

③　beforeMount

在掛載開始以前被調用。相關的render函數首次被調用。實例已完成如下的配置：編譯模板，把data裏面的數據和模板生成html。注意此時尚未掛載html到頁面上。

④　mounted

在el 被新建立的 vm.$el 替換，並掛載到實例上去以後調用。實例已完成如下的配置：用上面編譯好的html內容替換el屬性指向的DOM對象。此時模板中的html渲染到了html頁面中，此時通常能夠作一些Ajax操做。注意mounted只會執行一次。

⑤　beforeUpdate

在數據更新以前調用，發生在虛擬DOM從新渲染和打補丁以前。能夠在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。

⑥　updated

在因爲數據更改致使的虛擬DOM從新渲染和打補丁以後調用。調用時，組件DOM已經更新，因此能夠執行依賴於DOM的操做。然而在大多數狀況下，應該避免在此期間更改狀態，由於這可能會致使更新無限循環。該鉤子在服務器端渲染期間不被調用。

⑦　beforeDestroy

在實例銷燬以前調用。實例仍然徹底可用。

⑧　destroyed

在實例銷燬以後調用。調用後，全部的事件監聽器會被移除，全部的子實例也會被銷燬。該鉤子在服務器端渲染期間不被調用。

 

關於Vue生命週期的詳細解釋，請參考文章：

http://www.javashuo.com/article/p-gfficcpo-bg.html

這篇文章，寫的很是詳細，你們能夠觀摩一下！

 

若是有想作Vue開發的，vue生命週期必問。大概描述一下Vue實例被建立開始到實例銷燬時的過程，就能夠了！

 

2、組件間通訊之中央事件總線bus

摘要

中央事件總線 - 就是一個名字能夠叫作bus的vue空實例,裏邊沒有任何內容； var bus = new Vue(); 人如其名，她就像一個公交車同樣，來回輸送人，將a站點的A輸送到b站點，再將b站點的B輸送到a站點； 這裏a，b站點就像父、子組件，也像兄、弟組件，或者像兩個沒有任何親戚關係的任何組件； 而A,B就像是各個組件內部要傳輸的數據或者要執行的命令信息，靠bus來通訊。

 

中央事件總線 - 就是一個名字能夠叫作bus的vue空實例,裏邊沒有任何內容；

var bus = new Vue();

人如其名，她就像一個公交車同樣，來回輸送人，將a站點的A輸送到b站點，再將b站點的B輸送到a站點；

這裏a，b站點就像父、子組件，也像兄、弟組件，或者像兩個沒有任何親戚關係的任何組件；

而A,B就像是各個組件內部要傳輸的數據或者要執行的命令信息，靠bus來通訊。

 

若是有父子組件通訊知識基礎的，應該記得當初父子組件通訊，父組件中用$on監聽,子組件中用$emit發射。

現現在父子組件(或任何其餘關係的兩個組件之間)達成一致協議：

將監聽和發射的工做交給了bus來搞，就好像他們兩頭不自駕接送了，改乘公交了本身出發本身回家了。

那局面就是下邊這樣

$on和$emit如今綁在bus上了

bus.$emit(‘同名自定義事件名’，‘$on發送過來的數據’)；

在a站點（第一個組件）中的methods方法裏，準備用bus的$emit發射事件任務。

bus.$on(‘自定義事件名’，function(){
    //而後執行什麼你本身懂的。。。
})；

在b站點（另外一個組件）實例初始化（mounted鉤子中）時，用bus的$on監聽自家$emit觸發的事件。

Bus實例擴展：

能夠再添加data、methods、computed等選項，在初始化時讓bus獲取一下，任何組件均可以公用了。就像公交車上的座位，只要有座誰都能坐。

能夠包括一些共享通用的信息：好比用戶登陸的姓名、性別、郵箱等，還有油壺受權的token等。

 

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<component_1></component_1>
<hr>
<component_2></component_2>
</div>

<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var bus = new Vue(); //中央事件總線

var app = new Vue({
el: '#app',
data: {
name: 'component_1'
},
components:{ //註冊局部組件
component_1:{
//v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼
template: `<button v-on:click='paolu'>點我</button>`,
methods:{
paolu(){
alert(123);
bus.$emit('taopao'); //綁定到bus上
}
}
},
component_2: {
template: `<div>{{num}}</div>`,
data:function(){
return {
num: 0
}
},
mounted:function(){
// 在這個做用域中 this 指的是 component_2 組件實例
console.log(this.num);
var _this = this;
// el被掛載以後就監聽bus
bus.$on('taopao', function(){
// 在這個做用域中 this 指的是 bus
console.log(this.num); // undefined
alert('趙天柱跑路了...');
// 修改component_2組件中的num值
// 此時this是誰？是bus
// this.num += 1; // 有問題
_this.num += 1;
})
}
}
}
})
</script>

</body>
</html>


複製代碼 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <component_1></component_1>
    <hr>
    <component_2></component_2>
</div>

<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var bus = new Vue();  //中央事件總線

    var app = new Vue({
        el: '#app',
        data: {
            name: 'component_1'
        },
        components:{  //註冊局部組件
            component_1:{
                //v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼
                template: `<button v-on:click='paolu'>點我</button>`,
                methods:{
                    paolu(){
                        alert(123);
                        bus.$emit('taopao');  //綁定到bus上
                    }
                }
            },
            component_2: {
                template: `<div>{{num}}</div>`,
                data:function(){
                    return {
                        num: 0
                    }
                },
                mounted:function(){
                    // 在這個做用域中 this 指的是 component_2 組件實例
                    console.log(this.num);
                    var _this = this;
                    // el被掛載以後就監聽bus
                    bus.$on('taopao', function(){
                        // 在這個做用域中 this 指的是 bus
                        console.log(this.num);  // undefined
                        alert('趙天柱跑路了...');
                        // 修改component_2組件中的num值
                        // 此時this是誰？是bus
                        // this.num += 1;  // 有問題
                        _this.num += 1;
                    })
                }
            }
        }
    })
</script>

</body>
</html>
複製代碼

刷新網頁，效果以下：

 、

 

1、Vue Router

Vue Router中文文檔

https://router.vuejs.org/zh/

介紹

Vue全家桶：Vue + VueRouter + VueX

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。包含的功能有：

  • 嵌套的路由/視圖表
  • 模塊化的、基於組件的路由配置
  • 路由參數、查詢、通配符
  • 基於 Vue.js 過渡系統的視圖過渡效果
  • 細粒度的導航控制
  • 帶有自動激活的 CSS class 的連接
  • HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
  • 自定義的滾動條行爲

起步

用 Vue.js + Vue Router 建立單頁應用，是很是簡單的。使用 Vue.js ，咱們已經能夠經過組合組件來組成應用程序，當你要把 Vue Router 添加進來，咱們須要作的是，將組件 (components) 映射到路由 (routes)，而後告訴 Vue Router 在哪裏渲染它們。下面是個基本例子：

基本使用

必須先引用vue.js，再引用vue-router.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="app">
    <!--路由的入口-->
    <!-- 使用 router-link 組件來導航. -->
    <!-- 經過傳入 `to` 屬性指定連接. -->
    <!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 -->
    <!--/index表示下面定義的path-->
    <router-link to="/index">index頁面</router-link>
    <router-link to="/home">home頁面</router-link>
    <hr>
    <!--路由的出口-->
    <!-- 路由匹配到的組件將渲染在這裏 -->
    <router-view></router-view>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
    //寫路由
    const routeArray = [
        {
            path:'/index',
            component:{
                template:`<div><h1>這是index頁面</h1></div>`
            },
        },
        {
            path:'/home',
            component:{  //component表示用什麼渲染
                //template 表示使用模板
                template:`<div><h1>這是home頁面</h1></div>`
            },
        }
    ]
    //生成VueRouter實例
    const routerObj = new VueRouter({
        //routes是關鍵字，它的值必須是一個數組
        routes:routeArray
    })
    //建立和掛載根實例,記得要經過 router 配置參數注入路由
    //從而讓整個應用都有路由功能
    var app = new Vue({
        el:'#app',
        //router是關鍵字
        router:routerObj  //將路由實例掛載到vue實例中
    })
</script>
</body>
</html>

刷新網頁，效果以下：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程