【无标题】vue 基础知识

<!-- 容器，通常绑定id值 -->
<div id="a">
    <!-- {{}}插值 -->
    {{message}}
</div>


<div id="app">
    {{abc}}  {{d+e}}
    <h1><a v-band:href="f">百度</a></h1>
    
    <!-- 绑定事件v-on:或者@ -->
    <button v-on:click="func()">按钮</button>
    <button @click="func2()">按钮2</button>

    <button @click="func3(1)">按钮3</button>
    <button @click="func4(2)">按钮4</button>
    <h1><a v-band:href="loca">百度</a></h1>
    
</div>


<script src="vue.js"></script>
<script>
Vue.config.productinonTip = false
// 创建实例化vue
var vm = new Vue({
    // el绑定创建的容器
    el:"#a",
    // 用于定义变量的地方,通常与插值提供
    data:{
        message:"Hello Word",
    }
})

    var vm = new Vue({
    el:"#app",
    // vm.$mount("#app");
    data:function(){
        return{
        abc:"我爱你",
        d:1,
        e:2,
        f:"http://www.baidu.com",
    }
    },
    methods:{
    func(){
        console.log(111111);
    },
    func2:function(){
        console.log(222222);
    },
    func3(user){
        if(user==1){
            this.loca="http://www.baidu.com";
        }else{
            this.loca="http://www.vue.com";
        }
    }
}
})