vue指令

1、v-cloak：防止界面闪烁

　　获取变量值的指令：

插值表达式{{}}，可以在前后插入一些内容

v-text：会替换掉元素里的内容

v-html：可以渲染html界面

   <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="box">
        <div v-cloak>{{title}}</div>
        <div v-text='intro'>啦啦啦啦啦</div>
        <div v-html='center'>1234</div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:'#box',
        data:{
            title:'vue指令',
            intro:'v-text指令',
            center:'<h3>v-html指令</h3>'
        }
    })

2、v-bind：界面元素属性值的绑定

　　注意：1.括号里不加引号的都是我们data里的数据读取

　　　　2.如果想使用字符串需要加上引

　　　　3.里面可以写表达式

　　　　4.里面也可以调用定义好的方法，拿到的是方法的返回值

 <div id="box">
        <div v-bind:name='name'>标题</div>
        <input v-bind:type='type'>
        <input :type='type'>
</div>

<script>
    var vm=new Vue({
        el:'#box',
        data:{
            name:'标题',
            type:'text',
        }
    })
</script>

3、v-on：事件的绑定，简写@

<div id="box">
            <h3>{{title}}</h3>
            <button v-on:click="click1 ('白胖胖',$event)">按钮1</button>
            <button @click="click2">按钮2</button>
</div>
 
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                title: '小企鹅',
            },
            methods: {
                click1(title,e) {
                    console.log(e);
                    this.title = title;
                },
                click2(e) {
                    console.log(e);
                    this.title = "圆滚滚";
                }
            }
        })
    </script>

 4、v-model：数据双向绑定

注意：绑定的是表单控件

   <div id="app">
        <input type="text" v-model:value="value">
        <button @click="click">按钮</button>
    </div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            value: "数据双向绑定",
        },
        methods: {
            click() {
                console.log(this.value);
            }
        }
    })
</script>

 

posted @ 2020-09-05 20:13  靡荼  阅读(159)  评论(0)  编辑  收藏  举报