jequery 就是為驅(qū)動dom
Vue 完全為視圖層服務(wù) 數(shù)據(jù)驅(qū)動型

框架說明：

MVVM
MVC
M: model模型 當(dāng)前視圖中可以用到的數(shù)據(jù)
V：view視圖 渲染的UI
VM： model 和 view 的集合體
大前提(src="lib/vue.js")

//數(shù)據(jù)構(gòu)建
<script type="text/javascript">
    window.onload = function() {
        new Vue({
            el: "#my",
            data: {
                msg: 'Hello abc',
                name: "abc",
                age: "26",
                flag: true,
                arr:["a","b","c"],
                obj:{id:1,name:"aaa"},
                arrObj: [{name: "a1",age:10},{name: "a2",age:20},{name: "a3",age:30}]
            },
            methods: {
                action:function() {
                    this.msg = 'click';
                },
                action1:function() {
                    this.age = '20';
                },
                action2:function() {
                    this.age = '110';
                }
            }

        })
    }
</script>

注意：2.0不允許掛載到html,body元素上

格式：表達式：{{ 輸出數(shù)據(jù)}} 輸出data里面的數(shù)據(jù) 直接渲染頁面

指令

雙向數(shù)據(jù)綁定

v-model 用于表單 （表單的value）

 <div id="my">
      <input type="text" v-model="msg" />{{msg}} 
</div>

image.png

當(dāng)輸入框輸入內(nèi)容是，msg會跟隨變化

v-for 用于對象和數(shù)組進行循環(huán)

  <div id="my">
    <!-- 數(shù)組 arr -->
    <ul>
        <li v-for="item in arr">{{item}}</li>
    </ul>
    <!-- 數(shù)組 arr   v  value   i  index -->
    <ul>
        <li v-for="(v,i) in arr">{{v}}======{{i}}</li>
    </ul>

     <!-- 對象   v  value   k key -->
    <ul>
        <li v-for="(v,k) in obj">{{v}}======{{k}}</li>
    </ul>

    <!--  數(shù)組對象   v  value   i index -->
    <ul>
        <li v-for="(v,i) in obj2">{{v.name}}={{v.age}}======{{i}}</li>
    </ul>
    <ul>
        <li v-for="v in obj2">{{v.name}}</li>
    </ul>
</div>

v-on 事件執(zhí)行 //簡寫： @

    <div id="my">
        <button v-on:click="action">click</button>
        <button v-on:mouseover="action1" v-on:mouseout="action2">mouseover</button>{{age}}
        <!--  v-on 簡寫 -->
        <button @click="action2">on簡寫</button>{{age}}
    </div>

v-show/v-if //顯示隱藏

  <div id="my">
        <button v-show="flag">show</button>
        <p v-if="age>25">{{age}}</p>
        <p v-else>{{name}}</p>
    </div>