安裝

$ npm install vue

安裝完目錄檔案介紹

然後新建一個頁面，引入vue.js, 建立vue物件

<div id="app"></div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",      //掛載點
        //el:document.getElementById('app'),
        //或者可以這麼寫,更為優化，將元素直接找到，避免vue內部做判斷
 

        template:"<h1>{{text}} Vue</h1>",   //模版，
        data:function(){		//動態資料的宣告，data後也可以直接是一個物件
            return{
                text:"hello"
            }
        }
    })
</script>

插值表示式

{{text}}叫做插值表示式，{{}}裡可以是物件，字串，布林值或者三元表示式。
！注意：{{}}裡的值或者表示式必須在data這個函式返回的物件中宣告

指令

在vue中提供了一些對於頁面＋資料的更為方便的輸出，這些操作就叫做指令，以v-xxx表示。
指令中封裝了一些DOM行為，結合屬性作為一個暗號，暗號有對應的值，根據不同的值，框架會進行相關DOM操作的繫結。
 

1.v-text和v-html

必須用於雙標籤
v-text  相當於innerText
v-html  相當於innerTHTML

<div id="app"> 
    <div v-text="val1">啊哈哈哈哈哈</div>
    <div v-html="val2">啊哈哈哈哈哈</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:
 
"#app",      //發生行為的目的地
        data:function(){
            return{
                val1: '<h1>val2</h1>',
                val2: '<h1>val2</h1>',
            }
        }
    })
</script>

效果圖：

2.v-if , v-else-if , v-else

v-if通過操作dom渲染，消耗記憶體和效能的  如果為假，直接清除掉dom節點 
以上三個指令的使用必須是相鄰的dom元素

<div id="app"> 
    <h1 v-if="num == 1">顯示v-if</h1>
    <h1 v-else-if="num == 2">顯示v-else-if</h1>       
    <h1 v-else>顯示v-else</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",      //發生行為的目的地
        data:function(){
            return{
                num:2,
            }
        }
    })
</script>

效果圖：

3.v-show

顯示隱藏，只改變css，不消耗記憶體和效能|
為false時候相當於給元素新增display；none屬性，dom節點還存在

<div id="app"> 
    <h2 v-show="isShow">
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",      //發生行為的目的地
        data:function(){
            return{
                isShow:false,
            }
        }
    })
</script>

4.v-bind

給元素屬性賦值，v-bind:屬性名，可以簡寫為 :屬性名
是從vue到頁面的單向資料流

<div id="app"> 
    <div :class="{ active: isActive}">測試1</div>
    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">測試2</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",      //發生行為的目的地
        data:function(){
            return{
                activeColor: 'red',
                fontSize: 30,
                isActive: false
            }
        }
    })
</script>

5.v-on

給元素繫結事件 v-on:原生事件名字="進行的操作或者函式名"，
可以簡寫為 @原生事件名字="進行的操作或者函式名"

<div id="app"> 
    <button @click="add">add</button>
    <button @click="del">del</button>      
    {{counter}}
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",      //發生行為的目的地
        data:function(){
            return{
                counter:999,
            }
        },
        methods:{
            add(){
                console.log(this);
                this.counter ++;
                
            },
            del(){
                this.counter --;
            }
        }
    })
</script>

控制檯看下列印的this：

關於this
1. vue已經把以前this是window或者事件物件的問題搞定了
2. methods和data本身是在同一個物件中的，所以在該物件中可以通過this.隨意取
3. this.xxx取data中的值，this.xxxMethod呼叫methods中的函式。

6.v-model

雙向資料繫結
！注意：v-model只能給具有value屬性的元素進行雙向資料繫結

<div id="app"> 
    <input type="text" v-model="counter"/>當輸入100時候下面按鈕顯示出來
    <br/>
    <button v-show=" counter == '100' ">按鈕</button>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",      //發生行為的目的地
        data:function(){
            return{
                counter:999
            }
        }
    })
</script>

7.v-for

陣列迴圈 v-for="value,index in arr
物件迴圈 v-for="value,key,index in obj

<div id="app"> 
    <ul>
        <li v-for="value,index in arr">     
            {{value}}--{{index}}
        </li>
    </ul>
    <ol>
	    <li v-for="value,key,index in obj">     
	        {{key}}---{{value}}--{{index}}
	    </li>
    </ol> 
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",      //發生行為的目的地
        data:function(){
            return{
                arr: [1,2,3,4,5,6],
                    obj:{
                        name:"緣滅",
                        age:18,
                    }
            }
        }
    })
</script>

效果圖：