vue相關理論知識

時間 2019-11-09

標籤 vue 相關理論知識简体版

原文原文鏈接

es6經常使用語法簡介css

　es是js的規範標準html

　let前端

　　特色：
　　1.有全局和函數做用域,以及塊級做用域(用{}表示塊級做用域範圍)
　　2.不會存在變量提高
　　3.變量不能重複聲明vue

　constnode

　　特色:　　react

　　1.有塊級做用域
　　2.不會存在變量提高
　　3.不能重複聲明變量，jquery

　　4.只聲明常量,必須賦值,且定義以後不能更改webpack

　模板字符串　　ios

　　tab鍵上面的反引號git

　　　　能夠進行字符磚的拼接

　　　　 ${變量名}來插入變量值　　

　　　　let name = '將來';
　　　　let str = `我是${name}`

　數據的解構和賦值 ==>可用於數據的交換

　　數組的解構和賦值:

　　 let ary = [1,2,3]

　　 let [a,b,c] = ary;

　　對象的解構和賦值:

　　　let obj = {username:'pan', age:24};

　　　let { username: user, age:age }

　函數的擴展:

　　默認值參數(沒給出要傳的值時,選擇默認值)

　　箭頭函數

　　 ()=> {}

　　this的指向發生了改變

　　關於this指向,與vm實例沒有任何關係。而是與箭頭函數和普通函數的區別。總結兩點：一、es5的普通函數，this指向是指向了調用者，好比vue實例的方法（在methods中聲明瞭一個方法）是由vue實例vm調用的，因此this指向vm。二、箭頭函數的this指向它的調用者所在的上下文，也就是vm實例所在的上下文（定義vm的父類），即window.

　es6中的類

　　　class關鍵字定義一個類,

　　　　必需要有constructor方式(構造方法),若是沒有, constructor(){}

　　　　必須是使用new來實例化,不然報錯

　　　類的繼承

　　　　必須在子類的constructor方法裏寫super方法

　對象的單體模式

一介紹

　　是一套用於構建用戶界面的漸進式框架。與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。

二,安裝

直接下載並用 <script> 標籤引入，Vue 會被註冊爲一個全局變量。

　1.cdn下載方式:　

連接到一個能夠手動更新的指定版本號(不用下載)：

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

　　　npm下載方式:

　　須要在命令行內下載

npm install vue

　　2. 引包

  <script src='./vue.js'></script>

　　3. 實例化:

//2.實例化對象
new Vue({ el:'#app', //綁定標籤

　　//數據屬性

　　data:{
        msg:'黃瓜', person:{ name:'wusir' }, msg2:'hello Vue' } });

三,vue模板與經常使用指令

　　模板語法:(能夠插入你想插入的內容,除了if-else if-else用三元運算代替)

<!--模板語法-->
<h2>{{ msg }}</h2>  //文本插值
<h3>{{ 'hhahda' }}</h3>  //字符串
<h3>{{ 1+1 }}</h3>  //算術運算
<h4>{{ {'name':'alex'} }}</h4>  //字典
<h5>{{ person.name }}</h5>  //屬性調用
<h2>{{ 1>2? '真的': '假的' }}</h2>  //邏輯判斷
<p>{{ msg2.split('').reverse().join('') }}</p>  //方法執行

　　注意:

　　每一個綁定都只能包含單個表達式;

　　模板表達式都被放在沙盒中，只能訪問全局變量的一個白名單，如 Math 和 Date 。你不該該在模板表達式中試圖訪問用戶定義的全局變量。

　　系統指令:

　　指令是帶有 v- 前綴的特殊特性。指令特性的值預期是單個 JavaScript 表達式 (v-for 是例外狀況)。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地做用於 DOM。

　　v-text : 至關於innerText

　　v-html : 至關於innerHTML

　　v-if 和 v-show :　　

v-if 是「真正」的條件渲染，由於它會確保在切換過程當中條件塊內的事件監聽器和子組件適當地被銷燬和重建。

v-if 也是惰性的：若是在初始渲染時條件爲假，則什麼也不作——直到條件第一次變爲真時，纔會開始渲染條件塊。

相比之下，v-show 就簡單得多——無論初始條件是什麼，元素老是會被渲染，而且只是簡單地基於 CSS 進行切換。

通常來講，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。所以，若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不多改變，則使用 v-if 較好。

　　v-for : 遍歷列表

v-for能夠遍歷列表，也能夠遍歷對象 在使用vue的v-for指令的時候，必定要綁定key,避免vue幫我們計算DOM

　　v-bind: 能夠綁定標籤中任何屬性 ,簡寫時能夠省略　

v-bind:src   等價於  :src

　　v-on: 能夠監聽js中全部事件簡寫爲@

v-on:click  等價於 @click

　　指令示範

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--<style>-->
        <!--.box {-->
            <!--width: 200px;-->
            <!--height: 200px;-->
            <!--background-color: red;-->
        <!--}-->
    <!--</style>-->
        <style> .box1 { width: 200px; height: 200px; background-color: red;
        } .active{ background-color: green;
        }

    </style>
</head>
<body>
<div id = s1>
    <!--模板語言-->
    <h4>{{ obj }}</h4>
    <h2>{{ obj.name }}</h2>
    <p>{{ di_zhi }}</p>
</div>

<div id="s2">
    <!--模板語言 插入文本值<h2>dsb</h2>--> {{ msg }} <!--至關於inner Text 展現字符串的文本樣式<h2>dsb</h2>-->
    <div v-text="msg"></div>
    <!--至關於inner Html 展現出msg原有的HTML樣式 dsb-->
    <div v-html="msg"></div>
</div>

<div id="s3"> {{ add(4,3)}} <!-- v-on 監聽js中的全部事件 -->
    <button v-on:click="handleClick">隱藏</button>
    <!-- 來回觸發'隱藏'事件,isShow的值真假變換,v-show的渲染效果,也就來回變換'-->
    <div class="box" v-show="isShow">火影忍者</div>
    <!--抽隨機數,成立執行'顯示',不然'不顯示'-->
    <div v-if="Math.random() >0.5"> 顯示 </div>
    <div v-else> 不顯示 </div>
</div>

<div id="s4">
    <!-- v-on 監聽js中的全部事件,能夠簡寫成 @ 如 @mouseenter -->
    <button v-on:mouseenter = 'handlerChange' v-on:mouseleave = 'handlerLeave'>切換顏色</button>
    <!-- v-bind 能夠綁定標籤中的全部屬性 能夠直接省略,但要留有空格 如: src-->
    <img :src="imgSrc" :alt="msg">
    <div class="box1" :class="{active:isActive}"></div>
</div>

<div id="s5">
    <ul v-if="data.status == 'ok'">
        <!-- v-for的優先級最高 diff算法 -->
        <!-- item接收的是對象,index接收的是對象的索引 -->
        <li v-for = '(item,index) in data.users' :key="item.id">
            <h3>{{ item.id }}***{{ item.name }}***{{ item.age }}</h3>
        </li>
    </ul>
    <!-- 接收的鍵key是在後面,接收的值value是在前面 -->
    <div v-for = '(value,key) in person'> {{ key }}***{{ value }} </div>
</div>

<!--引包-->
<script src="vue.min.js"></script>
<script>
    <!--實例化對象-->
    new Vue({ // el: '#s1', //綁定標籤
        // data:{
        // //數據屬性
        // obj: {
        // name: 'panda',
        // hobby:'sleep',
        // sex:'boy'
        // },
        // di_zhi:'北京'
        // },

        // el:'#s2',
        <!--data中是一個函數 函數中必定要return一個對象 能夠爲空,但不能沒有-->
        // data(){
        // return{
        // msg:'<h2>dsb</h2>'
        // }
        // }

        // el:'#s3',
        // data() {
        // return {
        // msg: "<h2>alex</h2>",
        // num: 1,
        // isShow: true //初始isShow 爲true,
        // }
        // },
　　　　　　//在該組件中聲明方法
        // methods: {
        // add(x,y) {
        // console.log(this.num);
        // return x + y
        // },
        // handleClick() {
        // //數據驅動
        // this.isShow = !this.isShow; //點擊 button按鈕 觸發該事件,執行此函數,即isShow爲 flase
        // }
        // }

        // el:'#s4',
        // data() {
        // return{
        // imgSrc:'星空600_0.jpeg',
        // msg:'溝渠',
        // isActive:true
        // }
        // },
        // methods:{
        // handlerChange(){
        // this.isActive = !this.isActive;
        // this.isActive = false;
        // },
        // handlerLeave() {
        // this.isActive = true;
        // }
        // }
 el:'#s5', data(){ return{ data:{ status:'ok', users:[ {id: 1, name:'潘', age:'24'}, {id: 2, name:'宋', age:'22'}, ] }, person:{ name:'潘' } } } }) </script>

</body>
</html>

　　watch和computed (watch能夠監聽單個屬性;computed 監聽多個屬性)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="app">
        <p>{{ msg }}</p>
        <button @click = 'clickHandler'>修改</button>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({ el:'#app', data(){ return { msg:"alex", age:18 } }, methods:{ clickHandler(){ this.msg = "wusir" } }, watch:{ //watch單個屬性，若是想監聽多個屬性 聲明多個屬性的監聽
                'msg':function (value) { console.log(value); if (value === 'wusir'){ alert(1); this.msg = '大sir' } }, 'age' :function (value) { } } }) </script>
</body>
</html>




<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
    <p>{{ myMsg }}</p>
    <button @click='clickHandler'>修改</button>
</div>
<script src="vue.js"></script>
<script> let vm = new Vue({ el: '#app', data() { return { msg: "alex", age: 18 } }, created() { //定時器 ajax 庫 function(){}
 setInterval(() => { }) }, methods: { clickHandler() { //this的指向就是當前對象
                this.msg = "wusir"; this.age = 20; }, clickHandler: function () { console.log(this); } }, computed: { myMsg: function () { //業務邏輯

// 計算屬性默認只有getter方法
                return `個人名字叫${this.msg},年齡是${this.age}`; } } }) console.log(vm); </script>
</body>
</html>

　　數據驅動邏輯流程

表單輸入綁定

　　v-model 雙向綁定只能應用在input textare select

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
<div id="s1">
    <label for="username">用戶名</label>
    <!-- v-model 雙向綁定'msg'屬性 即input標籤內可以展現原有的msg值,可是當此處msg 的值改變時,原有的msg值也跟着改變,就是相互能夠共同做用於msg -->
    <input type="text" v-model="msg" id="username">
    <!--在模板上顯示 msg 值-->
    <p>{{ msg }}</p>
    <textarea placeholder="add multiple lines" v-model="msg"></textarea>

    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>
    <br>

    <!--多個複選框使用列表保存-->
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" >
    <label for="jack">Jack</label>
    <input type="checkbox" id="song" value="Song" v-model="checkedNames" >
    <label for="song">Song</label>
    <br>
   <span >Check name:{{ checkedNames }}</span>
</div>
<script src="vue.js"></script>
<script>
    new Vue({ el: '#s1', data() { return { msg:'he', //checked 初始值爲false,當選中時變成true,在頁面中取消或選中
                // 該屬性,此處該屬性的值也隨着改變,即雙向綁定.
 checked:false, checkedNames:[], } } }) </script>
</body>
</html>

組件化開發

　　局部組件　

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app"> {{ msg }} </div>
<script src="vue.js"></script>
<script>
    // Vue中 組件的名字 首字母要大寫 跟標籤區分 組件中的data必須是個函數 必定要有返回值
    <!--聲明局部組件,組件中的data必須是函數--> let App = { data() { return { text: '大佬' } }, template: ` <div id="a">
                <h2>{{ text }}</h2>
            </div>
 `, methods:{ } } new Vue({ el:'#app', data() { return { msg:'pan' } }, // 引用局部組件
        // 在vue的實例化對象中,若是有el 和 template ,那麼template定義模板的優先級大於el
 template: ` <div class="app">
                <App></App>
            </div>
 `, // 掛載局部組件,注意局部組件的使用必需要先掛載
 components: { App } }) </script>

</body>
</html>

　　全局組件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
<div id="s1">
    <App></App>
</div>

<script src="vue.js"></script>
<script>
    // VBtn 全局組件,不用在後面進行掛載
    // 其中第一個參數是組件的名字,第二個參數是options選項
    // slot是vue中提供的內容組件,它會分發內容
 Vue.component('VBtn', { data(){ return{ } }, template:`<button>
            <slot></slot>
            </button>`
 }) // 聲明局部組件
 let Vheader = { data(){ return { } }, // 定義模板內容
 template:` <div>
                <h2>火影忍者</h2>
                <VBtn>登陸</VBtn>
            </div>
 ` } let App = { data(){ return{ text:'火影忍者' } },.0 template: ` <div id="a">
                <h2>{{ text }}</h2>
                <Vheader></Vheader>
                <VBtn>刪除</VBtn>
                <br>
            </div>
 `, methods:{ }, components:{ //在組件中掛載局部組件
 Vheader } } new Vue({ el:'#s1', data() { return{ msg:'alex' } }, template:`<App />`,
 components:{ // 掛載局部組件
 App } }) </script>
</body>
</html>

　父向子組件傳值:

　　在子組件中使用props聲明,能夠直接在子組件中任意使用

　　Prop 是你能夠在組件上註冊的一些自定義特性。當一個值傳遞給一個 prop 特性的時候，它就變成了那個組件實例的一個屬性。爲了給博文組件傳遞一個標題，咱們能夠用一個 props 選項將其包含在該組件可接受的 prop 列表中：

Vue.component('blog-post', { props: ['title'], template: '<h3>{{ title }}</h3>' })

　　一個組件默承認以擁有任意數量的 prop，任何值均可以傳遞給任何 prop。在上述模板中，你會發現咱們可以在組件實例中訪問這個值，就像訪問 data 中的值同樣。

　　一個 prop 被註冊以後，你就能夠像這樣把數據做爲一個自定義特性傳遞進來：

<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>

　　父組件要定義自定義的屬性

　子向父組件傳值:

　　子組件中經過$emit()觸發父組件中的自定義的事件

　　父組件中聲明自定義的事件介紹

　　在父組件中,添加一個postFontSize數據屬性來支持這個功能:

new Vue({
  el: '#blog-posts-events-demo',
  data: {
    posts: [/* ... */],
    postFontSize: 1
  }
})

　　如今咱們在每篇博文正文以前添加一個按鈕來放大字號：　

Vue.component('blog-post', { props: ['post'], template: ` <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button> Enlarge text </button>
      <div v-html="post.content"></div>
    </div> ` })

　　Vue提供了一個自定義時間的系統來解決這個問題,能夠調用內建的$emit 方法並傳入事件的名字,向父級組件觸發一個事件:

<button v-on:click="$emit('enlarge-text')"> Enlarge text </button>

　　而後能夠用v- on 在博文組件上監聽這個事件,就像監聽原生DOM事件同樣:　

<blog-post ... v-on:enlarge-text="postFontSize += 0.1"
></blog-post>

　　平行組件傳值(待整理)

　　使用$on()和$emit() 綁定的是同一個實例化對象

　　 A==>B組件傳值

　　　　B組件中要使用$on(''事件的名字'',function(){})

　　　 A組件中使用$emit('事件的名字',值)

　　過濾器

　　　過濾器能夠用在兩個地方：雙花括號插值和 v-bind 表達式;

　　過濾器要被添加在JavaScript表達式的尾部,由 '|' 符號標識;

　　局部過濾器 --在當前組件內部使用過濾器:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="app">
        <App />
    </div>
    <script src="vue.js"></script>
    <script src="moment.js"></script>
    <script>
        <!-- 聲明一個局部組件,並在組件內設置局部過濾器 --> let App = { data(){ return { msg:"hello world", time:new Date() } }, template: // msg表示將要操做的數據,'|' 後爲過濾器名字 即便用該過濾器函數進行操做
 ` <div>我是一個APP {{ msg | myReverse }} <h2>{{ time | myTime('YYYY-MM-DD')}}</h2>
               </div>
 `, // 設置局部過濾器,能夠在組件內設置若干過濾器
 filters:{ // myReverse 式過濾器名字,後面跟函數 val 表示數據
 myReverse:function (val) { console.log(val); return val.split('').reverse().join('') }, //年-月- 日 年- 月
 myTime:function(val,formatStr){ return moment(val).format(formatStr); } } } new Vue({ el:'#app', data(){ return { } }, //掛載局部組件
 components:{ App } }) </script>
</body>
<html>

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

　　全局過濾器只要過濾器一建立,在任何組建中都可以使用:

Vue.filter('過濾器的名字'，function(val,a,b){})
在各個組件中都能使用
數據 | 過濾器的名字('alex'，'wusir')

生命週期鉤子函數

　　全部的生命週期鉤子自動綁定 this 上下文到實例中，所以你能夠訪問數據，對屬性和方法進行運算。這意味着你不能使用箭頭函數來定義一個生命週期方法 (例如 created: () => this.fetchTodos())。這是由於箭頭函數綁定了父上下文，所以 this 與你期待的 Vue 實例不一樣，this.fetchTodos 的行爲未定義。

　　beforeCreate　　

類型：Function
詳細：

數據更新時調用，發生在虛擬 DOM 打補丁以前。這裏適合在更新以前訪問現有的 DOM，好比手動移除已添加的事件監聽器。

該鉤子在服務器端渲染期間不被調用，由於只有初次渲染會在服務端進行。

　　created　　

類型：Function
詳細：

在實例建立完成後被當即調用。在這一步，實例已完成如下的配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見

　　虛擬DOM React

　　發送ajax獲取數據實現數據驅動視圖

　　beforeMount　　　

類型：Function
詳細：

在掛載開始以前被調用：相關的 render 函數首次被調用。

該鉤子在服務器端渲染期間不被調用。

　　mounted　　

類型：Function
詳細：

el 被新建立的 vm.$el 替換，並掛載到實例上去以後調用該鉤子。若是 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。

注意 mounted 不會承諾全部的子組件也都一塊兒被掛載。若是你但願等到整個視圖都渲染完畢，能夠用 vm.$nextTick 替換掉 mounted：
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
該鉤子在服務器端渲染期間不被調用。

　　獲取真實DOM

　　beforeUpdate

類型：Function
詳細：

數據更新時調用，發生在虛擬 DOM 打補丁以前。這裏適合在更新以前訪問現有的 DOM，好比手動移除已添加的事件監聽器。

該鉤子在服務器端渲染期間不被調用，由於只有初次渲染會在服務端進行。

　　updated

類型：Function
詳細：

因爲數據更改致使的虛擬 DOM 從新渲染和打補丁，在這以後會調用該鉤子。

當這個鉤子被調用時，組件 DOM 已經更新，因此你如今能夠執行依賴於 DOM 的操做。然而在大多數狀況下，你應該避免在此期間更改狀態。若是要相應狀態改變，一般最好使用計算屬性或 watcher 取而代之。

注意 updated 不會承諾全部的子組件也都一塊兒被重繪。若是你但願等到整個視圖都重繪完畢，能夠用 vm.$nextTick 替換掉 updated：
updated: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been re-rendered
})
}
該鉤子在服務器端渲染期間不被調用。

　　activated

類型：Function
詳細：

keep-alive 組件激活時調用。

該鉤子在服務器端渲染期間不被調用。
參考：
- 構建組件 - keep-alive
- 動態組件 - keep-alive

　　deactivated

類型：Function
詳細：

keep-alive 組件停用時調用。

該鉤子在服務器端渲染期間不被調用。
參考：
- 構建組件 - keep-alive
- 動態組件 - keep-alive

　　beforeDestroy

類型：Function
詳細：

實例銷燬以前調用。在這一步，實例仍然徹底可用。

該鉤子在服務器端渲染期間不被調用。

　　destroyed

　　若是開了定時器,必定要關閉定時器.

vue-router

　　是vue的核心插件

　　vue + vue-router 主要來作SPA(SIngle Page Application) 單頁面應用

　　爲何要使用單頁面應用:

　　　　傳統的路由跳轉,若是後端資源過多,會致使頁面出現白屏現象,讓前端來作路由,在某個生命週期的鉤子函數中發送ajax,數據驅動.爲了用戶體驗使用vue-router

　　npm安裝:　　

npm install vue-router

　　與模塊系統一塊兒使用時，必須經過Vue.use()如下方式顯式安裝路由器：

import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)

　　使用全局腳本標記時不須要執行此操做.

　　1. 將組件映射到路由:　

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!--使用router-link組件進行導航. -->

    <!-- 經過傳遞'to'道具來指定鏈接. -->
    <!-- 默認狀況下,'<router-link>'將呈現爲'<a>'標記 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 線路出口 -->
  <!-- 線路匹配的組件將呈如今此處 -->
  <router-view></router-view>
</div>

// 0. 若是使用模塊系統(如: 經過vue-cli),則導入VueRouter // 而後調用'Vue.use(VueRouter)'`.

// 1. 定義路徑組件.這些能夠從其餘文件導入
const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } // 2. 定義一些線路每條線路都映射到一個組件.'組件'能夠經過建立的實際組件構造
　　函數 'Vue.extend()',或者只是一個組件選項對象.

const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] // 3. 建立路由器實例並傳遞'router'選項,你能夠在這裏傳遞其餘選項

const router = new VueRouter({ routes // short for `routes: routes`
}) // 4.建立並掛載根實例.確保爲路由器注入路由器選項,整個應用路由器感知.
const app = new Vue({ router }).$mount('#app')

　　2.動態路由器配:

　　咱們常常須要將具備給定模式的路線映射到同一個組件。例如，咱們可能有一個User應該爲全部用戶呈現但具備不一樣用戶ID的組件。在vue-router咱們能夠在路徑中使用動態段以實現：

const User = { template: '<div>User</div>' } const router = new VueRouter({ routes: [ // dynamic segments start with a colon
    { path: '/user/:id', component: User } ] })

　　如今，URL /user/foo和/user/bar將映射到相同的路由。

動態段由冒號表示:/。匹配路徑時，動態段的值將this.$route.params在每一個組件中公開。所以，咱們能夠經過更新User模板來呈現當前用戶ID ：　　

const User = { template: '<div>User {{ $route.params.id }}</div>' }

　能夠在同一路線中擁有多個動態細分，它們將映射到相應的字段$route.params。例子:

　　使用帶有params的路由時要注意的一點是，當用戶導航/user/foo到時/user/bar，將重用相同的組件實例。因爲兩個路由都呈現相同的組件，所以這比銷燬舊實例而後建立新實例更有效。可是，這也意味着不會調用組件的生命週期鉤子。

　　要對同一組件中的params更改作出反應，您只需觀察$route對象便可：　　

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // react to route changes...
    }
  }
}

　　例子:　

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
    //若是之後是模塊化編程，Vue.proptotype.$VueRouter = VueRouter
    // Vue.use(VueRouter)
    //路由範式：
    //http://127.0.0.1:8080/index/user
    //http://127.0.0.1:8080/user/1 params
    //http://127.0.0.1:8080/user/2
    //http://127.0.0.1:8080/user?user_id =1 query const User = { data() { return { user_id:null } }, template: `<div>我是用戶{{ user_id}}</div>`,
 created() { console.log(this.$route); //路由信息對象 // 提醒一下，當使用路由參數時，例如從 /user/foo 導航到 /user/bar， // 原來的組件實例會被複用。由於兩個路由都渲染同個組件，比起銷燬再建立， // 複用則顯得更加高效。不過，這也意味着組件的生命週期鉤子不會再被調用。
 }, watch: { '$route'(to, from) { // 對路由變化做出響應...
 console.log(to.params.id); console.log(from); this.user_id = to.params.id; //發送ajax
 } } } //建立路由
 const router = new VueRouter({ //定義路由規則
 routes: [ { path: '/user/:id', name: 'User', component: User } ] }) let App = { data() { return {} }, // router-link和router-view 是vue-router 提供的兩個全局組件
        //router-view 是路由組件的出口
 template: ` <div>
                <div class="header">
                    <router-link :to = '{name:"User",params:{id:1}}'>用戶1</router-link>
                    <router-link :to = '{name:"User",params:{id:2}}'>用戶2</router-link>
                </div>
                <router-view></router-view>
            </div> ` } new Vue({ el: '#app', //掛載 路由對象
 router, data() { return {} }, template: `<App />`,
 components: { App } }) </script>
</body>
</html>

　　編程式導航

　　除了使用<router-link>爲聲明性導航建立錨標籤以外，咱們可使用路由器的實例方法以編程方式執行此操做。(router.push(location, onComplete?, onAbort?))

　　要導航到其餘URL,請使用router.push . 此方法將新條目推送到歷史堆棧中,所以當用戶單擊瀏覽器後退按鈕時,他們將被帶到先前的URL.

　　當您單擊a時<router-link>，這是內部調用的方法，所以單擊<router-link :to="...">等同於調用router.push(...)。

陳述	編程
`<router-link :to="...">`	`router.push(...)`

　　獲取原生的DOM的方式:　　

給標籤或者組件 添加ref
<div ref = 'pan'>哈哈哈</div>
<p ref = 'a'></p>
<Home ref = 'b'></Home>

this.$refs.pan獲取原始的DOM對象
this.$refs.b 獲取的是組件實例化對象

　　scoped

　　 vue提供的屬性,當前的樣式只對當前的組件有效,對其餘組件無做用

　　DIY腳手架　　　

　　一、nodejs 安裝

　　二、npm init --yes 默認生成一個package.json文件（管理整個項目中的包）

　　vue-cli 是一個官方發佈 vue.js 項目腳手架，使用 vue-cli 能夠快速建立 vue 項目。

　　vue init webpack(模板名)+項目名 ----> 建立項目　

　　webpack模板配置完成後,在terminal中進入當前項目文件執行 npm run dev 便可運行該項目.　

　　webpack（前端中工做項目上線以前對整個前端項目優化）

entry 整個項目的程序入口（main.js或index.js）
output 輸出的出口
loader 加載器對es6代碼的解析 babel-loader, css-loader 解析css文件，style-loader 將css代碼添加一個style標籤插入header標籤中，url-loader\
plugins html-webpack-plugin 醜陋

　　 build 和 config 文件 : webpack的配置文件

　　 src/main.js 文件 : 項目的入口

　　 router/index 文件夾 : 項目路由

　　element-ui的使用

　　　　npm安裝 : npm i element-ui -s

　　　　下載安裝後要在main.js 中引入element-ui:　　

import ElementUI from 'element-ui'; import 'element-ui'/lib/theme-chalk/index.css;

/*而後在下面表示以後就能夠在組建中使用了*/
Vue.use(ElementUI)

　　axios的使用

　　　　是一個基於promise的HTTP庫,能夠用在就覽器和node.js中.

　　　　至關於jquery ajax

　　　　官網:https://www.kancloud.cn/yunye/axios/234845

　　　　將axios掛載到vue的原型上,那麼在各個組件中都能使用,由於面向對象(繼承).

　　　　　npm安裝 : $npm install axios

　　vuex

　　Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。

　　下載npm i vuex -s

　　詳見vuex官網 https://vuex.vuejs.org/zh/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。