學習Vue(一)：vue的基本指令

• Vue是一款漸進式的js框架，所謂的漸進式，就是說在開發的過程中，可以很適合的隨時的嵌入項目中，使用的時候沒有額外的負擔。
• Vue的基本指令

1. 在創建vue實例的時候，其中有兩個固定參數        el ：與DOM的id進行綁定，相互關聯；data：表示json格式的數據，而這些數據都是響應式的

   <div id="app">
     <span v-bind:title="message">
       鼠標懸停查看動態綁定的提示信息！
     </span>
   </div>

   var app = new Vue({
     el: '#app',
     data: {
       message: '頁面加載於 ' + new Date().toLocaleString()
     }
   })

   　　v-bind特性被稱為指令。指令帶有前綴 v-，表示它們是 Vue 提供的特殊特性。它們會在渲染的 DOM 上應用特殊的響應式行為。在這里，該指令的意思是：“將這個元素節點的 title 特性和 Vue 實例的 message 屬性保持一致”。v-bind:style可以縮寫為:style;點擊指令v-on:click可縮寫為@click

2. 條件與循環

   <div id="app">
     <p v-if="seen">控制這里的數據是否顯示</p>
   </div>
   var app3 = new Vue({
     el: '#app',
     data: {
       seen: true
     }
   })

   v-if 是vue的判斷指令，其值必須與vue對象data屬性中保持一致

   <li v-for="num in list">
       {{num}}
   </li>
   
   data:{
       list:["A","B","C"]
   }

   v-for是vue的循環指令，用法如上

3. 樣式的綁定：一般使用三目運算符

   <div id="app">
       <p v-bind:class="{active:isShow}">顯示數據</p>
       <p v-bind:class="isShow?active:error">顏色不同顯示數據</p>
   </div>
   <script type="text/javascript">
       var vue = new Vue({
           el:'#app',
           data:{
               isShow:false,
               active:"active",
               error:'error'
           }
       })
   </script>
   <style type="text/css">
       .active {
           background-color: #0fffff;
       }
       .error {
           background-color: #7FFF00;
       }
   </style>                        

   還可以使用數組的形式來改變樣式，設定是根據<style>中的先后順序指定的

   <div id="app">
       <p v-bind:class="items">顏色不同顯示數據</p>
   </div>
   <script type="text/javascript">
       var vue = new Vue({
           el:'#app',
           data:{
               items:['what','active','errot']
               }
           })
   </script>
   <style type="text/css">
       .what {
           background-color: green; /*綠色 */
       }
       .active {
           background-color: blue;/* 藍色 */
       }
       .errot {
           background-color: red;/* 紅色 */
       }    
   </style>    

    

4. 內聯樣式的綁定

   <div id="app">
       <p v-bind:style="objectStyle">綁定內聯樣式</p>
   </div>
   <script type="text/javascript">
       var vue = new Vue({
       el:'#app',
       data:{
           objectStyle:{
               color:'red',
               fontSize:'25px'
               }
           }
       })
   </script>

   當使用內聯樣式的時候，我們需要使用v-bind:style指令，值得注意的是data中的數據是json格式的，所以要使用key-value的形式，並且屬性值需要使用駝峰命名法。同樣可以使用數組形式。

5. 數據綁定

   <div id="app">
       <button @click ="reverse">反轉數據</button>
       <p>{{message}}</p>
       <input v-model:value="message" />
   </div>
   <script type="text/javascript">
       var vue = new Vue({
           el:'#app',
           data:{
               message:'Hello Vue'
           },
           methods:{
               reverse:function() {
                   this.message = this.message.split('').reverse().join('');
               }
           }
       })
   </script>

   使用v-model指令實現雙向數據綁定，值得注意的是所有的函數都要定義在methods中

• Vue的生命周期
  • 每個 Vue 實例在被創建時都要經過一系列的初始化過程——例如，需要設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鈎子的函數，這給了用戶在不同階段添加自己的代碼的機會。比如說created ,mounted ,updated等鈎子函數。

    <div id="app">
        <p>{{message}}</p>
        <button type="button" @click="change">點擊更新</button>
    </div>
    <script type="text/javascript">
        var vue = new Vue({
            el:'#app',
            data:{
                message:'Hello Vue'
            },
            methods:{
                change:function(){
                    this.message = this.message.split('').reverse().join('');
                }
            },
            created () {
                console.log('Vue對象被創建時調用!');
            },
            mounted() {
                console.log('與dom元素進行掛載時調用!');
            },
            updated() {
                console.log('data中數據被更新時調用!')
            }
        })
    </script>

    這只是最基本三個鈎子函數，在實際中往往需要很多的這樣的鈎子來滿足日常開發所需，需要后續學習