2018-01-11Vue-1

jequery 就是为驱动dom
Vue 完全为视图层服务 数据驱动型

框架说明：

MVVM
MVC
M: model模型 当前视图中可以用到的数据
V：view视图 渲染的UI
VM： model 和 view 的集合体
大前提(src="lib/vue.js")

//数据构建
<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元素上

格式：表达式：{{ 输出数据}} 输出data里面的数据 直接渲染页面

指令

双向数据绑定

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

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

image.png

当输入框输入内容是，msg会跟随变化

v-for 用于对象和数组进行循环

  <div id="my">
    <!-- 数组 arr -->
    <ul>
        <li v-for="item in arr">{{item}}</li>
    </ul>
    <!-- 数组 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>

    <!--  数组对象   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 事件执行 //简写： @

    <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>