Vue入門——Vue的核心

代碼部分請下載本文代碼閱讀，代碼均能正常運行並有詳細的註釋。

本文代碼下載地址

概述

無需置疑，Vue之因此能如此之火，主要受益於它是一個MVVM框架和它易學的文檔，幾乎全部以爲學習Vue有難度的開發者都是以爲組件腳手架等等不太好理解，可是這些都不是Vue的核心，Vue的核心表如今最易學的Vue指令和綁定，學好Vue指令和綁定基本就學好Vue的一大半了，把基礎核心的幾個知識點說完會作幾個完整的demo。

學習方法

學習編程切勿眼高手低，碰到簡單的如Vue指令相似的知識千萬不要忽略掉，最好能把指令熟記於心，對於新手更是這樣，這樣在講解複雜知識點的時候就不用再重述這些簡單的知識點了，當你對於簡單知識點爛熟於心的時候，你的注意力會集中在少數幾個最難的知識點上，更容易學好，因此讀者最好能對着下面的代碼和官方文檔把這些指令多理解多記憶，再學習後面的文章。

Vue指令的官方文檔

Vue指令大雜燴

<style>
      [cloak] {
        display: none;
      }

    </style>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <div id="demo">
        <!-- 插值就是把{{}}中的值當作一個變量，而後再用vue實例data中對應的變量值替換它 -->
        插值用法: {{demo1}} <hr>
        <!-- v-text指令 的功能和{{}}的功能如出一轍，只是爲了方便把這個指令單獨拿出來用{{}}表示 -->
        v-text用法: <span v-text = "demo2"></span> <hr>
        <!-- v-html 類式 v-text， 只是把這個變量字符串取出來渲染成了對應的html，而不是直接展現字符串 -->
        v-html用法: <span v-html = "demo3"></span> <hr>
        <!-- v-show對應變量的值應該是true或false,若是爲true則自動跟他添加display：block，不然添加display：none ,你只須要修改對應變量的值就能夠控制元素顯示隱藏-->
        v-show用法：<span v-show = "demo4">這是v-show內容，v-show的值控制這個元素顯示隱藏</span> <hr>
        <!-- v-if和v-show的用法類式，v-if的值s是true直接添加到dom元素，不然從dom商remove掉，而不是修改display屬性，這樣操做比較消耗性能，如無必要請使用v-show -->
        v-if用法：  <span v-if = "demo5">這是v-if的內容</span><hr>
        <!-- v-else 必須跟v-if聯合使用，就像js中的else也必須跟if一塊兒使用同樣，若是v-if元素的內容顯示，則v-else元素remove掉，反之v-if元素remove掉，v-else元素添加到dom上 -->
        v-else用法： <span v-if = "demo6">這是v-if的內容</span> <span v-else >這是v-else的內容</span>  <hr>
        <!-- v-else-if 必須跟v-if聯合使用，若是v-if的值爲和v-else-if的值都爲false則顯示v-else-if元素的內容,請參考js中的if、else if、else理解 -->
        v-else-if用法：<span v-if = "demo71">這是v-if的內容</span> <span v-else-if = "demo72" >這是v-else-if的內容</span> <span v-else> 這是v-else內容</span><hr>
        <!-- v-for 和js中的for in循環很相似，有了v-for你能夠輕鬆複製多個當前元素，有如下幾種寫法，前面兩種是for循環數組的，後兩種是循環json的，都有待index項和不帶的 -->
        <!-- <div v-for = "item in items">  -->
        <!-- <div v-for="(item, index) in items"> -->
        <!-- </div> <div v-for="(val, key) in object"></div> -->
        <!--  <div v-for="(val, key, index) in object"></div> -->
        v-for用法1： <span v-for="(item, index) in items1">{{"這是第"+index + "個" + ":" + item}}</span> <br>
        v-for用法2： <span v-for="(value,key,index) in items2" >{{"key:" +key + "|" +"value:" + value + "|" + "index:" + index + "     " }}</span> <hr>
        <!-- v-on 是綁定事件的方法，v-on:click="clickMethod"是c點擊事件，它能夠簡寫成@click ,它的值是methods中的方法 -->
        v-on用法：  <input type="text" name="name" v-on:keyup= "keyupEvent" style="border:solid 1px red;" /><hr>
        <!-- v-bind 後面接的是html標籤所帶的屬性，好比v-bind:value 能夠省略爲:value ，v-bind是單向數據綁定，意思是你改變了vue實例data中的數據，頁面dom中的值就會變化，反之不成立  -->
        v-bind用法：<input v-bind:value="demo8" style="border:solid 1px red;" /> <input :value="demo8" style="border:solid 1px red;" /><span>改變input的值並不能修改vue實例中的值，因此另外一個input不會修改</span><hr>
        <!-- v-model 和 v-bind 相似，v-model是雙向數據綁定， 可是當dom改變的時候vue實例data中的數據也會改變，因此叫雙向數據綁定 -->
        v-model用法： <input v-model:value="demo9" style="border:solid 1px red;" /> <input v-model:value="demo9" style="border:solid 1px red;" /><span>改變input的值能修改vue實例中的值，因此另外一個input會修改,這叫雙向數據綁定</span><hr>
        <!-- 和html中的pre標籤相似,{{item}}這種插值就會當作字符串處理，並不會解析成變量 -->
        v-pre用法：<span v-pre> {{demo10}}</span><hr>
        <!-- 因爲vue編譯渲染須要時間，在vue編譯完以前，{{item}}仍是以字符串的形式表現出來的，v-cloak 配合[v-cloak]{display:none} 可讓元素在vue編譯前先隱藏 -->
        v-cloak用法：<span v-cloak>{{demo11}}</span> | <span>{{demo11}}</span><hr>
        <!-- v-once 指令表示此元素只渲染一次，當data中的數據值改變的時候這個元素不會再改變渲染 -->
        v-once用法：
        <span v-once>{{demo12}}</span>

    </div>
    <script>
      //new 一個vue實例，Vue就能運行了,Vue方法傳入參數爲一個約定格式的json
      new Vue({
        //el表示這個vue實例的做用範圍爲id爲demo的元素內
        el:"#demo",
        //data的值是一個json，存儲的都是要顯示到頁面上的值，能夠理解成這裏放的都是js變量(數據)
        data:{
          //插值用法
          demo1:"這是demo1",
          //v-text用法：
          demo2:"這是demo2",
          //v-html用法
          demo3:"<span style='color:red'>這是v-html字符串，它是一個span</span>",
          //v-show用法：
          demo4:true,
          //v-if用法：
          demo5:true,
          //v-else用法：
          demo6:false,
          //v-else-if用法：
          demo71:false,
          demo72:true,
          //v-for用法：
          items1:["item1","itme2","item3"],
          items2:{key1:"value1",key2:"value2",kay3:"value3"},
          //v-bind用法：
          demo8:"這是demo8",
          //v-model用法：
          demo9:"這是demo9",
          //v-pre用法：
          demo10:"這是demo10",
          //v-cloak用法：
          demo11:"這是demo11"
          //v-once用法：
          demo12:"這是deom12"
        },
        methods:{
          //v-on用法：
          keyupEvent:function() {
            console.log("keyup被促發了");
          }
        },
       
      });
    </script>