Vue基础：常用指令-CFANZ编程社区

v-cloak
v-text
v-html
v-pre
v-once
v-model
v-on:click
v-on:keyup
v-bind:
v-if
v-else-if
v-else
v-show
v-for
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/vue.css">
    <script type="text/javascript" src="../js/vue-2.6.14.js"></script>
</head>
<style type="text/css">
    [v-cloak] {
        display: none;
    }

    .obj {
        color: red
    }


</style>

<body>


    <div id="app">
        <div>{{msg}}</div>
        <div v-cloak>{{msg1}}</div>
        <div v-text='msg2'></div>
        <div v-html='msg3'></div>
        <div v-pre>{{v-pre显示原始信息}}</div>
        <div v-once>{{msg4}}</div>
        <!-- v=model双向数据绑定 -->
        v-model<input type="text" name="" id="" v-model="msg"><br>
        <!-- 事件绑定 -->
        v-on:click=@click<button @click='msg++'>点击++</button><br>
        methods<button @click='handle()'>点击--</button><br>
        <!-- 事件函数传递参数 -->
        <button @click='handle1(123,$event)'>点击传参</button><br>
        <!-- 事件修饰符 -->
        .stop=event.stopPropagation()<br>
        .prevent=event.preventDefault()<br>
        .prevent.self阻止所有点击<br>
        .self.prevent只阻止对元素自身的点击<br>
        <!-- 按键修饰符 -->
        用户名<input type="text" @keyup.delete="clearContent" v-model="uname">
        密码<input type="text" @keyup.enter="handleSumbit" v-model="password">
        <div>
            属性绑定<a v-bind:href="url">百度</a>
        </div>
        <!-- CSS样式绑定：数组/对象 -->
        <div v-bind:class="{obj}">class样式绑定true/false</div>
        <div v-bind:style="{color:obj1}">style属性绑定</div>
        <div v-if="score<=50">不及格</div>
        <div v-else-if="score>50&&score<=80">良好</div>
        <div v-else="score>80">优秀</div>
        <button @click="vif">测试v-if</button>
        <div v-show="flag">v-show</div>
        <button @click="vshow">测试v-show</button>
        <div>
            <li :key='index' v-for="(item,index) in Fruits">{{item+'--'+index}}</li>
        </div>
        <div v-if="value==12" v-for="(value,key,index) in obj2">{{value+'--'+key+'--'+index}}</div>




    </div>

</body>

<script>
    // 自定义按键修饰符
    Vue.config.keyCodes.abc = 65

    var vm = new Vue({
        el: '#app',
        data: {
            msg: '{{}}插值表达式',
            msg1: 'v-cloak解决闪动问题',
            msg2: 'v-text没有闪动',
            msg3: '<h4>v-html存在安全问题</h4>',
            msg4: 'v-once只编译一次',
            uname: '',
            password: '',
            url: 'http://www.baidu.com',
            obj:true,
            obj1:'blue',
            score:45,
            flag:true,
            Fruits:[
                'apple','orange','banana'
            ],
            obj2:{
                names:'liming',
                age:12,
                kk:12,
                male:'男'
            }
        },
        methods: {
            handle: function () {
                this.num--;
            },
            handle1: function (p, event) {
                console.log(p)
                console.log(event.target.innerHTML)
            },
            clearContent: function () {
                this.uname = ''
            },
            handleSumbit: function () {
                console.log(this.uname, this.password)
            },
            vif:function () { 
                this.score+=20;
             },
             vshow:function(){
                 this.flag=!this.flag;
             }
        }
    });
</script>

</html>