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 的简写形式

        {{555}}
        鼠标停一下
        
        第二个span
        

            内容
        
        
内容二
        
内容三
        
内容四
    

 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

 

        click
        click Two
        click 3
        
This is h1
        {{foo()}}
        {{fullName()}}
        
This is div
            btn
            
            {{firstName}}