前端框架之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-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>