3分钟教你学会VUE常用指令

最新推荐文章于 2025-12-05 08:37:05 发布

原创最新推荐文章于 2025-12-05 08:37:05 发布 · 210 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #css #es6 #前端

小知识专栏收录该内容

43 篇文章

订阅专栏

该博客主要介绍了Vue.js的多种指令，包括v-html、v-text、v-pre、v-once、v-cloak、v-model、v-bind、v-on指令及其扩展，为前端开发中使用Vue.js提供了相关指令知识。

v-html指令

<body>
    <div class="qaz">
        <!-- 网页中可以识别标签--[v-html] -->
        <p v-html="bqm">
            {{bqm}}
        </p>
    </div>
    <script>
        let vm = new Vue ({
            el:'.qaz',
            data: {
                bqm:'<h1>你好</h1>'
            }
        })
    </script>
</body>

v-text指令

<div id="asd">
        <p v-text="msg">
            {{msg}}
        </p>
    </div>
    <script>
        new Vue ({
            el:'#asd',
            data:{
                msg:'All the best in 2020'
            }
        })
    </script>

v-pre指令

 <div class="wsx">
        <p v-pre>
            {{say}}
        </p>
    </div>
    <script>
        new Vue ({
            el:'.wsx',
            data: {
                say:'All the best!'
            }
        })
    </script>

v-once指令

 <div class="aa">
        <!-- 只执行第一个的同名信息--[v-once] -->
        <span v-once>
            {{name}}
        </span>
    </div>
    <script>
        var vm = new Vue ({
            el:'.aa',
            data: {
                name:'一不做~'
            },
            mounted () {
                this.name = '二不休！'
            }
        })
    </script>

v-cloak指令

<style>
    /* 全局指令，可以让网页不显示源码--[v-cloak] */
    [v-cloak] {
        display: none;
    }
</style>

<body>
    <!-- 对于 MVVM 的理解 -->
    <!-- 解放DOM -->
    <!-- 指令，就是vuejs为我们提供的方便操作的自定义属性 -->


    <!-- View层 -->
    <div id="asd">
        <!-- 1，在使用模板语法的标签上添加 v-cloak 的指令 -->
        <p v-cloak>
            {{msg+1+1+1+1+1+1}}
        </p>
        <!-- 模板语法 -->
    </div>
    <!-- View 层结束 -->

    <script>
        //创建一个Vue环境，创建一个 VM 层
        let vm = new Vue({
            el: '#asd',
            data: {//Model 层
                msg: 'Hello world!'
            }
        })
    </script>
</body>

v-model指令

 <div class="qwqw">
        <!-- 数据的双向绑定--[v-model] -->
        <input type="text" value="" v-model='username'>
        <span>
            {{username}}
        </span>
    </div>
    <script>
        var vm = new Vue ({
            el:'.qwqw',
            data: {
                username:'All the best!'
            }
        })
    </script>

v-bind指令

 <div id="abc">
        <img :src='picture'>
    </div>
    <script>
        let vm = new Vue ({
            el: '#abc',
            data: {
                picture: './img/01.jpg'
            },
            mounted () {
                //这个this必须有，它指当前的一个 VM 实例
                this.picture = './img/02.jpg'
            }
        })
    </script>

v-on指令

 <!-- 解放DOM -->
    <div class="asd">
        <input type="text" value="" v-model='num'>
        <!-- 事件绑定指令--[v-on] 简写@ -->
        <input type="button" value="+1" v-on:click="add">
        <input type="button" value="-1" @click='sub'>
    </div>
    <script>
        let vm = new Vue({
            el: '.asd',
            data: {
                num: 1
            },
            //操作num的值
            //methods: 用来写页面需要的方法的配置项
            methods: {
                add: function () {
                    this.num += 1
                    // this.num = this.num+1
                },
                sub() {
                    this.num -= 1
                }
            }
        })
    </script>

v-on指令扩展

（不理解的请联合参考上面v-on指令）

<div id="poi">
        <input type="text" value="" v-model='num'>
        <input type="button" value="+1" @click='add'>
        <input type="button" value="-1" @click='sub(1,2,$event)'>
    </div>
    <script>
        let vm = new Vue ({
            el:'#poi',
            data:{
                num: 1
            },
            methods:{
                add(event){
                    console.log(event.target.value);
                    this.num +=1
                },
                sub(a,b,event){//event只能作为最后一个参数
                    console.log(a);
                    console.log(b);
                    console.log(event);
                    this.num -=1
                }
            }
        })
    </script>