VUE常用重要指令·小白必看

最新推荐文章于 2024-02-01 10:31:41 发布

BiangBaing

最新推荐文章于 2024-02-01 10:31:41 发布

阅读量320

点赞数 2

文章标签： vue.js vue js javascript

本文链接：https://blog.csdn.net/BiangBaing/article/details/110477381

版权

VUE的常用指令

前言
一、常用指令
二、v-if 与 v-show
- 1、v-if用法
- 2、v-show用法
总结

前言

什么是VUE指令？

来自百度：

VUE指令是在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令, 以v-xxx表示，类似于html页面中的属性 `。
比如在angular中以ng-xxx开头的就叫做指令，在vue中以v-xxx开头的就叫做指令。
指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值，框架会进行相关DOM操作的绑定

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

一、常用指令

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>

二、v-if 与 v-show

v-if 与 v-show都是条件渲染，相比之下v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。(来自VUE官网)

v-if也是“惰性”的，如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。(来自VUE官网)

1、v-if用法

v-if也可用做条件判断，用法与js中的if判断类似，v-else-if 必须紧跟在带 v-if 或者 v-else-if
的元素之后。(来自VUE官网)

<div id="app">
  <p v-if='suc>=90&&suc<=100'>优秀</p>
  <p v-else-if='suc>=80&&suc<90'>良好</p>
  <p v-else-if='suc>60&&suc<80'>一般</p>
  <p v-else>{{suc}}同志仍需努力</p>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            suc: 69
        }
    })
</script>

2、v-show用法

v-if 与 v-show都是条件渲染，相比之下v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。(来自VUE官网)

<body>
    <div id="app">
        <a v-show='show'>看不到我</a>
    </div>
</body>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
 //v-show现为假，会将该元素的display值设为none，元素隐藏
            show:false
 //v-show如若改为true，会将该元素的display值取消，元素显示
        }
    })
</script>