Vue基础2

新的常识
每一个div要对应一个Vue()函数

属性绑定

href标签里面的连接具体地址要使用v-bind进行绑定；

html页面：
   <div id="top">
        <a v-bind:href="web">百度</a>
    </div>
js:
var top = new Vue({
    el:'#top',
    data:{
        web:"http://www.baidu.com"
    }
});

给页面加一个新的标签，改变原有页面结构，使用v-html标签

html页面：
<div id="top">
        <p v-html="webTag"></p>
    </div>
js：
var top = new Vue({
    el:'#top',
    data:{
        webTag:"<a href = 'http://www.baidu.com'>百度</a>"
    }
});

点击绑定

1、直接使用v-on标签

<div id = "vue-app">
        <button v-on:click = "add">涨一岁</button>
        <button v-on:click = "sub">减一岁</button>
        <p>My age is {{ age }}</p>
    </div>

js:
var app = new Vue({
    el:'#vue-app',
    data:{
        age:20,
    }
})

2、在js中使用function函数进行自加自减的操作

<div id = "vue-app">
        <button v-on:click = "add">涨一岁</button>
        <button v-on:click = "sub">减一岁</button>
        <button v-on:dblclick = "add">双击涨一岁</button>
        <button v-on:dblclick = "sub">双击减一岁</button>
        <p>My age is {{ age }}</p>
    </div>

var app = new Vue({
    el:'#vue-app',
    data:{
        age:20,
    },
    methods:{
        add:function(){
            this.age++;
        },
        sub:function(){
            this.age--;
        }
    }
})

还可以进行传值操作

<div id = "vue-app">
        <button v-on:click = "add(1)">涨一岁</button>
        <button v-on:click = "sub(1)">减一岁</button>
        <button v-on:dblclick = "add(10)">双击涨一岁</button>
        <button v-on:dblclick = "sub(10)">双击减一岁</button>
        <p>My age is {{ age }}</p>
    </div>

var app = new Vue({
    el:'#vue-app',
    data:{
        age:20,
    },
    methods:{
        add:function(inc){
            this.age+=inc;
        },
        sub:function(dec){
            this.age-=dec;
        }
    }
})