ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

VUE常用指令·小白必看

2020-12-03 12:02:07  阅读:144  来源: 互联网

标签:el VUE Vue 指令 小白必 msg new data Hello


VUE的常用指令


前言


提示:以下是本篇文章正文内容,下面案例可供参考

一、常用指令

1.v-cloak

v-cloak:解决网速过慢会导致数据还没显示在浏览器端,直接将代码源码呈现在浏览器端的问题。
使用方法:


//使用方法:
<body>
	<div id="app">
	//v-cloak直接添加在数据的父元素上
        <p v-cloak>{{ msg }} </p> 
	</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue~'
        }
     })
</script>

2.v-test

v-test:插入文本

<body>
    <div id="app">
        {{msg}}//Hello Vue ~~
        //=后写数据
        <p v-text=msg></p>//Hello Vue ~~
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: "Hello Vue ~~"
        }
})
</script>

3.v-html

v-html:可插入可被html解析的代码片段

<body>
    <div id="app">
        {{msg}}//<h1> Hello Vue ~~ </h1>
        
        <p v-html = msg></p>//Hello Vue ~~
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
         msg: "<h1> Hello Vue ~~ </h1>"
        }
    })
</script>

4.v-pre

v-pre:有些情况我们不需要data内的数据,想要直接插入值

<body>
    <div id="app">
        <p>{{ msg }}</p>//Hello Vue ~~
        
        <p v-pre>{{ msg }}</p>//msg 
     </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: " Hello Vue ~~ "
        }
})
</script>

5.v-once

v-once:避免数据被重新赋的新值覆盖

<body>
    <div id="app">
    	<p>{{msg}}</p>//现在的生活
    	//使用v-once之后,再重新赋值已经没有效果
        <p v-once>{{msg}}</p>//最初的梦想
    </div>
</body>
<script>
    new Vue({
               el: '#app',
        data: {
            msg: "最初的梦想"
        },
        mounted() {
            this.msg = '现在的生活'
        }
 })
</script>

6.v-model

v-model:数据的双向绑定,实时显示更改数据

<body>
    <div id="app">
        <input type="text" value="" v-model="msg">
        <p>{{ msg }}</p>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: " Hello Vue ~~ "
        }
    })
</script>

7.v-on

v-on:监听DOM事件,可简写为@

<body>
   <div id="app">
   //实现一个简易的加减功能
        <input type="text" value="" v-model="num">
        <button @click='add'>+1</button>
        <button @click='sub'>-1</button>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 1
        },
        methods: {
            add() {
                this.num += 1
            },
            sub() {
                this.num -= 1
            }
        }
    })
</script>

8.v-bind

v-bind:动态地绑定一个或多个属性

<body>
    <div id="app">
//将 srcUrl 绑定在src属性上,页面会呈现srcUrl的图片
        <img :src="srcUrl" alt="">
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            srcUrl: "./imgs/timg.jpg"
        },
        mounted() {
           this.srcUrl = './imgs/2.jpg'
        }
    })
</script>

二、使用步骤


总结

提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

标签:el,VUE,Vue,指令,小白必,msg,new,data,Hello
来源: https://blog.csdn.net/BiangBaing/article/details/110477381

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有