Vue基础--vue的基础指令-（vue基础学习笔记-第二节）

最新推荐文章于 2024-07-06 16:47:02 发布

对方正在输入...311

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量28

点赞数

文章标签： vue.js 学习笔记

本文链接：https://blog.csdn.net/weixin_62952521/article/details/132589461

版权

1.关于vue的指令：指令就是带有”v-“前缀的特殊属性，分别拥有不同的功能

以下为vue最常用的几个指令

1. v-html

该标签类似于innerHtml，可以动态改变标签内的html元素

语法：v-html="表达式"

<body>
    <div id="me" v-html="my_html">
        {{msg}}
    </div>
   <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#me',
            data: {
                msg: '你好，vue',
                my_html:`<a href="https://www.baidu.com/">百度官网</a> `,
            }
        })
    </script>
</body>

注意这里v-html可以覆盖掉原本的{{msg}}，将对象app里的my_html进行调用，解析到id为me盒子里

2.v-if和v-show

这两个标签都可以控制页面中元素的显示与隐藏，不同点在于v-if的远离是控制元素在文件中的创建与删除来实现，而v-show是控制指定元素的css样式（display:none）来实现

在多数情况下v-if用于不频繁且具有判断性质的显示，如登录提醒等，而v-show用于频繁触发显示与隐藏的元素

<body>
    <div id="me" >
        <p v-show="show_or_not1">{{msg}}</p>
        <p v-show="show_or_not1">{{msg2}}</p>
        <p v-show="show_or_not2">{{msg3}}</p>
        <p v-show="show_or_not2">{{msg4}}</p>
        
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#me',
            data: {
                msg: '1你好，vue',
                msg2:'2早上好',
                msg3:'3中午好',
                msg4:'4晚上好',
                show_or_not1: true,
                show_or_not2:false
            }
        })
    </script>
</body>

我们得知当v-show为false时标签内会增加style=”display:none“来隐藏标签，当我们再把v-show换成v-if:

<div id="me" >
        <p v-if="if_or_not1">{{msg}}</p>
        <p v-if="if_or_not1">{{msg2}}</p>
        <p v-if="if_or_not2">{{msg3}}</p>
        <p v-if="if_or_not2">{{msg4}}</p>
        
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#me',
            data: {
                msg: '1你好，vue',
                msg2:'2早上好',
                msg3:'3中午好',
                msg4:'4晚上好',
                show_or_not1: true,
                show_or_not2:false,
                if_or_not1:true,
                if_or_not2:false
            }
        })
    </script>

调试窗口直接删除了v-if="false的标签"，两者在页面上的显示都是一样的

3.v-else和v-else-if

这两者必须搭配v-if使用，可以对标签依据条件判断是否渲染

<body>
    <div id="me">
        <p v-if="my_score>=90">棒棒哒</p>
        <p v-else-if="my_score>80">加油</p>
        <p v-else-if="my_score>=60">小心了</p>
        <p v-else>禁止启动游戏</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#me',
            data: {
                my_score: 99
            }
        })
    </script>
</body>

显示判断正确

4.v-on

语法：v-on:click(事件类型)=”count++“（内联语句）||@click(事件类型)=”count++“（内联语句）

v-on:click(事件类型)=”method中函数名“|| @click(事件类型)=”method中函数名“

（使用“@”代替“v-on:”）可以进行简写

这是一种在标签上绑定事件的指令，代替了原生Js中addEventListener

<body>
    <div id="me">
        <button @click="fn">点我执行fn</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#me',
            data: {
                my_score: 99
            },
            methods:{
                fn(){
                    console.log("fn被执行了");
                    console.log("你的分数是"+this.my_score)
                }
            }
        })
    </script>
</body>

这里需要注意，methods访问本身内部的data时，要加this.变量名

当我们调用的函数需要传入参数时,我们可以在指令后直接跟函数而不是函数名如：

@click=”fn(666)“

相应的methods内声明函数就应该写入一个形参，以下代码：每次按钮被按，扣除6分

<body>
    <div id="me">
        <button @click="fn(6)">点我执行fn</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#me',
            data: {
                my_score: 99
            },
            methods:{
                fn(num){
                    console.log("你的分数是"+this.my_score)
                    this.my_score-=num,
                    console.log(`奖励你-${num}分，你的分数是`+this.my_score)
                }
            }
        })
    </script>
</body>

5.v-bind

v-bind用与指定标签的标签属性

语法为：

v-bind:属性名=“表达式”

可以简写为：

:属性名=“表达式”

以下为测试代码

<body>
    <div id="me">
        <img :src="my_url" :title="my_tip">
        <img v-bind:src="my_url" v-bind:title="my_tip">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#me',
            data: {
                my_url:"https://img-home.csdnimg.cn/images/20201124032511.png",
                my_tip:'欢迎使用csdn'
            },
        })
    </script>
</body>

6.v-for

用于渲染数组中的数据

语法：

v-for="(item,index) in 数组名"

其中item为指定数组中每的一项，index为每项的下标，如果index不需要，可以省去为：

v-for="item in 数组名

<body>
    <div id="me">
        <ul>
            <li v-for="(item,index) in list_name">{{item}}{{index}}</li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#me',
            data: {
                list_name:["小李","小王","小张","小刚"]
            },
            methods:{
               
            }
        })
    </script>
</body>

v-for经常搭配 :key="唯一值" 使用，目的是保证被v-for遍历的数组发生改变时，vue进行创建新元素添加或者实质性地删除掉了旧的标签，而不是将标签内的元素简单重新排序整理，:key后面的唯一值多数情况使用数组对象的id值