Vue常用指令秒学会

最新推荐文章于 2023-07-16 17:40:08 发布

无风不起浪y

最新推荐文章于 2023-07-16 17:40:08 发布

阅读量131

点赞数 4

分类专栏：前端 JS VUE 文章标签： vue js 前端 javascript vue.js

本文链接：https://blog.csdn.net/Fate_B/article/details/110505081

版权

前端同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

VUE

2 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

Vue常用指令秒学会

指令：就是vue.js为我们提供的方便操作的自定义属性

1.v-cloak指令

如果源码过多，加载过慢时，会显示出源码。加上v-cloak时就不会显示出来。
代码如下（示例）：

	<div id="a">
        <!-- 在使用模板语法的标签上添加v-cloak指令 -->
        <p v-cloak>{{msg}}</p>
    </div>
    <script>
        //创建一个Vue环境   创建一个VM层
        let vm = new Vue({
            el: '#a',
            data: {//Model层
                msg: '今天我寒夜里看雪飘过！'
            }
        })
    </script>

2.v-text指令

文本模式的转换只能写入文本
代码如下（示例）：

	<div id="b">
        <!-- {{name}} -->
        <p v-text="text"></p>
    </div>
    <script>
        new Vue({
            el: '#b',
            data: {
                text: '拽犯法吗？香港有哪条法律进人不能拽的！'
            }
        })
    </script>

3.v-html指令

html格式转换可以解析html样式
代码如下（示例）：

	<div id="c">
        <!-- {{tetx}}   在这里h1标签是不能使用的-->
        <div v-html='tetx'></div>
    </div>
    <script>
        new Vue({
            el:'#c',
            data:{
                tetx:'<h1>拽犯法吗？香港有哪条法律进人不能拽的!</h1>'
            }
        })
    </script>

4.v-pre指令

接收到的还是{{mag}}
代码如下（示例）：

	<div id="d">
        <!-- 不被编译 -->
        <span v-pre>{{mag}}</span>
    </div>
    <script>
        new Vue({
            el: '#c',
            data: {
                mag:'拽犯法吗？香港有哪条法律进人不能拽的!'
            }
        })
    </script>

结果：在这里插入图片描述

5.v-once指令

当添加生命周期时如果不添加v-once接受到的是最新的，添加后会接受最开始的
代码如下（示例）：

	<div id="e">
        <p v-once>{{mag}}</p>
        <p>{{mag}}</p>
    </div>
    <script>
        let vm = new Vue({
            el:'#e',
            data:{
                mag:'你最初的梦想是当太空人！'
            },
            //生命周期
            mounted(){
                this.mag = '最后你的爷爷奶奶给了你最爱吃的大嘴巴子！'
            }
        })
    </script>

结果：在这里插入图片描述

6.v-model指令

双向绑定在input中更改{{text}}时，显示的内容也会随时跟着改变
代码如下（示例）：

	<div id="f">
        <input type="text" value="" v-model='text'>
        <p>{{text}}</p>
    </div>
    <script>
        new Vue({
            el: '#f',
            data: {
                text: '拽犯法吗？香港有哪条法律进人不能拽的！'
            }
        })
    </script>

结果：在这里插入图片描述

7.v-on指令

v-on:是用来绑定事件的可以简写为@ 这样写起来更简洁方便
代码如下（示例）：

	<div id="g">
        <input type="text" v-model='num'><br />
        <input type="button" value="+1" v-on:click='add'>
        <input type="button" value="-1" v-on:click='sub'>
    </div>
    <script>
        new Vue({
            el: '#g',
            data: {
                num: 1
            },
            methods: {
                add() {
                    this.num += 1;
                },
                sub() {
                    this.num -= 1;
                }
            }
        })
    </script>

结果：
在这里插入图片描述

8.v-bind指令

v-bind: 用来绑定属性的简写为 : （冒号）
代码如下（示例）：

<div id="a">
        <img v-bind:src="img" alt="" style="width: 400px; height: 700px;">
    </div>
    <script>
        new Vue({
            el: '#a',
            data: {
                img: '../img/街道.jpg'
            },
            mounted() {
                this.img = '../img/艺伎.jpg'
            }
        })
    </script>

9.v-if 、v-else、v-else-if指令

v-if: 根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
当和 v-if 一起使用时，v-for 的优先级比 v-if 更高
v-else: 前一兄弟元素必须有 v-if 或 v-else-if
v-else-if: 前一兄弟元素必须有 v-if 或 v-else-if(来源于Vue.js官网)
代码如下（示例）：

<body>
    <div id="app">
        <!-- <div v-show='flag'>测试成绩：</div> -->
        <div v-if='score>=90'>优秀</div>
        <div v-else-if='score<90&&score>=80'>良好</div>
        <div v-else-if='score<80&&score>=60'>一般</div>
        <div v-else>优秀</div>
        <!-- <button @click='dj'>点击</button> -->
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                score: 60,
                flag: false
            },
            // methods: {
            //     dj() {
            //         this.flag = !this.flag
            //     }
            // }
        })
    </script>
</body>

10.v-for指令

v-for:基于源数据多次渲染元素或模板块(来源于Vue.js官网本指令的用法等来自Vue.js官网)
代码如下（示例）：

为当前遍历的元素提供别名：

<div v-for="item in items">
  {{ item.text }}
</div>

另外也可以为数组索引指定别名 (或者用于对象的键)：

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>

v-for 的默认行为会尝试原地修改元素而不是移动它们。
要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示：

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

11.v-show指令

v-show：根据表达式之真假值，切换元素的 display CSS property。
当条件变化时该指令触发过渡效果。(来源于Vue.js官网)
代码如下（示例）：

<div id="app">
        <button @click='cgShow'>显示图片</button>
         <!-- 用于频繁切换 -->
        <div v-show='isShow'></div> 
        <!-- <div v-if='isShow'> -->
        <img src="img/街道.jpg" alt="">
        请登录
        </div>
        <div v-else>
            用户：已登陆
        </div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                isShow:false//布尔值
            },
            methods:{
                cgShow(){
                    this.isShow = !this.isShow
                }
            }
        })
    </script>