一、vue例項

/* html程式碼，view層，模板 */
   <div id="app">
        {{ message }}
    </div>
/* 引入相關檔案，然建立例項，在例項中寫各種方法就ok了 */
<script src="vue_2.2.0.js"></script>
<script type="text/javascript">
    var vm = new Vue({
       el: '#app',
       data: {
          message: 'hello,Datura!!!'
        }，
        methods: {
            test (){
                alert(
 
1);
            }
        },
        compontents:{
        //這裡存放元件
        }
     });
  /* vm就是new出來的例項 */
  console.log(vm.$data);//也就是資料data，後面還有很多掛載在vm（new出來的）例項上的屬性
</script>

二、常用指令

v-bind：動態繫結資料。簡寫為“:” 。=> 以後的:class="{red:boolean}"
v-on ：繫結時間監聽器。簡寫為“@”，例：@click="xxx"；
v
 
-text ：更新資料，會覆蓋已有結構。類似{{ msg }} ；
v-show ：根據值的真假，切換元素的display屬性；
v-if ：根據值的真假，切換元素會被銷燬、重建； => 在dom中已消失
v-else-if ：多條件判斷，為真則渲染；
v-else ：條件都不符合時渲染；
v-for ：基於源資料多次渲染元素或模組；
v-model ：在表單控制元件元素（input等）上建立雙向資料繫結（資料來源）；
v-pre ：跳過元素和子元素的編譯過程；
v-once ：只渲染一次，隨後資料更新也不重新渲染；
v-cloak ：隱藏未編譯的Mustache語法，在css中設定[v-cloak]{display:none;}

詳細用法：

1.v-if

v-if是條件渲染指令，它根據表示式的真假來刪除和插入元素
基本語法：
v-if="expression"
expression是一個返回布林值的表示式，表示式可以是一個布林屬性，也可以是一個返回布林的運算式。

<div id="app">
            <div v-if="isMale">男士</div>
            <div v-if="age>=20">age:{{age}}</div>
        </div>
        
var vm = new Vue({
            el: '#app',
            data: {
                age:25,
                isMale:true,
            }
        })

2.v-show

v-show和v-if區別。
v-show不管條件是否成立，都會渲染html,而v-if只有條件成立才會渲染

先看兩個截圖，第一個是當isMale為true時，第二張圖是isMale為false條件不成立時，可以看到v-if的html並沒有渲染出來，
而使用v-show的div僅僅是更改了它的樣式display: none;

<div id="app">
            <div v-if="isMale">男士v-if</div>
            <div v-show="isMale">男士v-show</div>
        </div>
var vm = new Vue({
            el: '#app',
            data: {
                isMale:false
            }
        })

3.v-else

v-else指令與v-if或者v-show同時使用，v-if條件不成立則會顯示v-else內容

<div id="app">
            <div v-if="isMale">男士</div>
            <div v-else>女士</div>
        </div>
        var vm = new Vue({
            el: '#app',
            data: {
                isMale:true
            }
        })

4.v-for

v-for指令基於一個數組渲染一個列表，它和JavaScript的遍歷語法相似
v-for="item in list"
list是一個數組，item是當前遍歷的陣列元素
v-for="(item,index) in list"其中index是當前迴圈的索引，下標從0開始

<div id="app">
            <table>
                <tr class="thead">
                    <td>序號</td>
                    <td>姓名</td>
                    <td>年齡</td>
                </tr>
                <tr v-for="(item,index) in list">
                    <td v-text="index+1"></td>
                    <td v-text="item.name"></td>
                    <td v-text="item.age"></td>
                </tr>
            </table>
        </div>
        
var vm = new Vue({
            el: '#app',
            data: {
                list:[{
                    name:'章三',
                    age:18
                },{
                    name:'李四',
                    age:23
                }]
            }
        })

5.v-bind

v-bind動態地繫結一個或多個特性，可以在其名稱後面帶一個引數，中間放一個冒號隔開，這個引數通常是HTML元素的特性（attribute），如v-bind: class

class可以和v-bind:class同時存在 ，也就是說有class了，再新增v-bind:class並不會覆蓋原來的樣式類，而是在原來基礎上新增新的類名

<div id="app">
            <img v-bind:src="img" class="logo" 
                v-bind:class="isLogo?'':'product'" 
                v-bind:style="{'border':hasBorder?'2px solid red':''}"></img>
        </div>
        
        var vm = new Vue({
            el: '#app',
            data: {
                img:'https://www.baidu.com/img/bd_logo1.png',
                isLogo:false,
                hasBorder:true
            }

v-bind:src也可簡寫成:src

6.v-on

v-on用於監聽DOM事件,用法和v-bind類似，例如給button新增點選事件

<button v-on:click="show">

同樣，和v-bind一樣，v-on也可以使用簡寫，用@符號代替，修改程式碼：

<button @click="show">

以下是一個點選隱藏和顯示p文字段落的程式碼:

<div id="app">
            <p v-show="isShow">微風輕輕的吹來，帶來了一絲絲涼意</p>
            <div>
                <button type="button" v-on:click="show(1)">顯示</button>
                <button type="button" v-on:click="show(0)">隱藏</button>
            </div>
        </div>
        
        var vm = new Vue({
            el: '#app',
            data: {
                isShow:true
            },
            methods:{
                show:function(type){
                    if(type){
                        this.isShow = true;
                    }else{
                        this.isShow = false;
                    }
                }
            }
        })

7.v-model

使用v-model指令在表單元素上建立雙向資料繫結

<!--這是我們的View-->
<div id="app">
    <p>{{ message }}</p>
    <input type="text" v-model="message"/>
</div>

將message繫結到文字框，當更改文字框的值時，<p>{{ message }}</p>中的內容也會被更新。
反過來，如果改變message的值，文字框的值也會被更新