Vue

虚拟DOM
重绘/回流

表达式

Vue1.0中：单次插值 ：｛｛* val｝｝值插入后将不能改变
HTML插值 ：{{ htmlStr }} 输出html标记

 <!--插值-->
        {{ 5*4 }}
        {{[1,2,3].reverse().join("-")}}
        {{ 5>4? "真" :"假"}}
         {{msg}}

  //初始化vue程序，产生vue实例
    new Vue({
        el : ".box",//指定挂载元素
        data : { //初始化数据,将数据添加到实例身上
            msg:"Hello Vue"//务必在data 中初始化要使用的数据，否则会抛出警告
        }
    })

数据绑定

//指定挂载的元素
console.log(vm.$el)
//将 vue 实例挂载到指定的元素
vm.$mount(".box");
attr 是 v-bind:attr 的简写形式

<div class="box">
        {{555}}
        <span v-bind:title="msg" v-bind:id="a" v-bind:diy="msg" v-bind:style="styleObject">鼠标停一下</span>
        <!--:attr 是 v-bind:attr 的简写形式-->
        <span :style="styleObject">第二个span</span>
        <div :class="{a:isA , b:isB}">
            内容
        </div>
        <div :class="[first,second]">内容二</div>
        <div :class ="[first,isShow?'':third]">内容三</div>
        <div :style="[styleObject,styleObj2]">内容四</div>
    </div>

 var vm = new Vue({
        el: ".box",//指定挂载元素
        data: {
            msg: "hello vue",//务必在data 中初始化要使用的数据，否则会抛出警告
            a: "testId",
            isA: true,
            isB: true,
            first: "a",
            second: "c",
            isShow : true,
            third :"d",
            styleObject: {
                fontSize: "30px",
                color: "red"
            },
            styleObj2:{
                color:"pink"
            }
        }
    })

条件

ng-if v-if

列表渲染

ng-repeat v-for

    ng  track by $index
   Vue1.0   v-for="a in arr2 " track-by="$index"
   Vue2.0   v-for="a in arr2 " v-bind:key="a.id" 

事件

1.$().on('click')
v-on:eventName添加事件 v-on:click=" "
2.@eventName是 v-on:eventName 简写形式
3.$event是默认的参数，如果再事件处理程序中，想同时使用事件对象和其余的参数，需要显式传入$event
4.修饰符：v-on:eventName:modifier
stop 阻止冒泡
left

 <div class="box">
        <button v-on:click="isShow =! isShow">click</button>
        <button v-on:click="changeEvent">click Two</button>
        <button @click="changeEvent($event,'a','b')">click 3</button>
        <h1 v-show="isShow">This is h1</h1>
        {{foo()}}
        {{fullName()}}
        <div v-on:click="p1">This is div
            <button @click.stop="changeEvent">btn</button>
            <input type="text" v-model='firstName' @keydown.left.up.down.right.delete="input">
            {{firstName}}
        </div>
    </div>


<script src="./js/vue2.0.js" charset="utf-8"></script>
<script>
    var vm = new Vue({
        el: ".box",//指定挂载元素
        data: {
            isShow: true,
            firstName:"lu",
            lastName:"sun"
        },
        //创建方法
        methods: {
            changeEvent : function(e,arg1,arg2){
                this.isShow = !this.isShow;
                console.log(e);
                console.log(arg1+arg2)
            },
            foo : function(){
                return Math.random();
            },
            fullName:function(){
                return this.firstName+this.lastName;
            },
            p1 : function(){
                console.log("div click")
            },
            input:function(){
                console.log(this.firstName)
            }
            
        }
    })

model

v-model 将表单项与数据进行双向数据绑定

 <div class="box">
       <input type="text" v-model="msg">
       <input type="checkbox" v-model="c1">{{c1}}
       <br>
       <input type="checkbox" v-model="c2" value=1>1
       <input type="checkbox" v-model="c2" value=2>2
       <input type="checkbox" v-model="c2" value=3>3
       {{c2}}
       <h1>{{msg}}</h1>
       <br>
       <input type="checkbox" v-model="c3" :true-value='a' :false-value='b'>{{c3}}
    </div>

 var vm = new Vue({
        el: ".box",//指定挂载元素
        data: {
            msg:"hi",
            c1:true,
            c2:["tom"],
            c3:"",
            a:"真",
            b:"假"
        }
        
    })

计算属性