前端框架之Vue學習（一）

1.Vue簡介

一、vue:是一套用於構建用戶界面的漸進式框架。
二、Vue的核心特點：
（1）相應的數據變化
當數據發生改變 --> 視圖自動更新
（2） 組合的視圖組件
UI頁面映射爲組件樹
劃分組件可維護、可複用、可測試
三、MVC和MVVM
MVC：有model、view、controller三部分組成，其中controller是中間橋樑，能夠上model和view進行數據交換。
MVVM：由model、view、viewmodel組成，viewmodel是Vue的核心。
四、Vue的初始化

<div id="app" v-cloak>{{msg}}</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'hello vue'
        }
    })
</script>

注意：當在頁面中引入多個文件時，有可能會因爲引入順序造成頁面加載出現問題。這是可以使用async和defer來實現異步。
defer是按照順序執行，async是誰先加載完誰先執行。
五、Vue中的數據雙向綁定
首先我們先用原生JS來模擬一下數據雙向綁定

<!-- 原生JS模擬數據雙向綁定 -->
  <div id="app">
    <input type="text" id="input">
    <span id="sp"></span>
  </div>
  <script>
      // ES5可以對對象的屬性進行監聽？
      // var obj = {}
      // var msg = '123'
      // Object.defineProperty(obj, 'msg', {
      //   // value: "helloworld!!!",
      //   // writable: false
      //   get() { 
      //     return msg;
      //   },
      //   set(val) {
      //     msg = val
      //   }
      // })
      // obj.msg = "112233"
      // console.log(obj.msg)

      var input = document.querySelector('#input')
      var span = document.querySelector('#sp')

      var obj = {}
      Object.defineProperty(obj, 'msg', {
        get() {

        },
        set(val) {
          span.innerHTML = val
          input.value=val
        }
      })
      input.addEventListener('input', function() {
        console.log("input值發生了表哈！！！")
        // UI -> 使得JS中的值發生了變化？
        // JS -> UI？
        obj.msg = input.value;
      })
  </script>

通過原生JS的模擬我們可以知道所謂的數據雙向綁定就是當js的值發生改變時UI的值也會發生改變，同樣的UI的值發生改變時js的值也會發生改變。當我們理解這些時就會發現Vue的數據雙向綁定也不過如此。

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
<script>
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

六、指令（directive）
所謂指令，相當於標籤上的自定義屬性。
常見的指令有：

指令	含義
v-text	文本指令
v-model	雙向綁定指令
v-bind	動態綁定屬性
v-once	只執行一次
v-HTML	HTML代碼解析
v-cloak	當Vue解析完，渲染div
v-on	綁定事件或監聽事件
v-for	循環指令

注意：其中v-on和v-bind指令可以進行簡寫
v-on === @
v-bind === ：

代碼示例

<div id="app">
        <span v-text="msg"></span>
        <img v-bind:src="url" alt="">
        <p v-html="p"></p>
        <ul>
            <li v-for="item in arr">{{item}}</li>
        </ul>
        <button v-on:click="alert('123')">點擊</button>
   </div>
 <script src="node_modules/vue/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"下一個天亮",
            url:"http://img3m3.ddimg.cn/84/36/27879573-1_l_6.jpg",
            p:"<p>此時此刻的雲</p>",
            arr:["星期一","星期二","星期三"]
        }
    })
</script>  

七、todoList案例

<div id="app">
        <input type="text" @keyUp.enter="addTodo" v-model="inputValue">添加
        <ul>
            <li v-for="(item,index) in arr">{{item}} <button @click="delTodo(index)">刪除</button></li>
        </ul>
    </div>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            inputValue: "",
            arr: []
        },
        methods: {
            addTodo() {
                if(this.inputValue.trim() === ""){
                    return
                }
                this.arr.push(this.inputValue)
                this.inputValue = ""
            },
            delTodo(index) {
                this.arr.splice(index, 1)
            }
        },
    })
</script>