vue 基础

vue 指令

// v-text 文本
<p v-text="msg"></p>
<script>
var app=new Vue({
    el:"#app",
    data:{
        msg:"文本"
    },
})

</script>

// v-html    设置标签的 innerHTML
<p v-heml="msg"></p>
<script>
var app=new Vue({
    el:"#app",
    data:{
        msg:"<a href="baidu.com">百度</a>"
    },
})

</script>

//元素绑定事件  v-on:click="getUser"  v-on:monseenter="getUser"  v-on:dblclick="getUser" v-on可以用@代替
<script>
var app=new Vue({
    el:"#app",
    methods:{ // 写绑定的事件方法
        getUser:function(){
            console.log("admin")
        }
    }

})

</script>

//根据表达式切换显示、隐藏 v-show="isShow" 操作样式  v-if 操作dom元素
<script>
var app=new Vue({
    el:"#app",
    data:{
        isShow:false
    },
    methods:{ // 写绑定的事件方法
        changeIsShow:function(){
            this.isShow = !this.isShow;
        }
    }

})

</script>

//设置元素的属性 v-bind:src    简洁语法 :src
<img v-bind:src="imgSrc">
<script>
var app=new Vue({
    el:"#app",
    data:{
        imgSrc:"地址"
    }
})

</script>

//根据数据生成列表结构 v-for="item in arr"    v-for="(item,index) in arr" index代表索引
<li v-for="item in arr">{{index+1}}  {{item}}</li>
<script>
var app=new Vue({
    el:"#app",
    data:{
        arr:[1,2,3]
    }
})

</script>

// 键修饰符 <input @keyup.enter="onEnter">

// 获取和设置表单元素的值（双向数据绑定） v-model="msg"
<script>
var app=new Vue({
    el:"#app",
    data:{
        msg:"消息"
    }
})

</script>