vue.js — v- 的语句的基本用法

本文深入探讨Vue.js中五个常用指令的功能与应用:v-cloak解决页面闪烁问题,v-text与v-html处理文本和HTML内容,v-bind实现数据绑定,v-on用于事件监听。通过具体示例,帮助读者理解并掌握这些指令的使用场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近在学习vue.js,连续看了一个星期的视频教材,整个人都是懵的,于是打算停一下脚步,把在视频里面看到的知识整理一番,出一个自己的笔记。

vue.js中很多的修饰符都是以 v- 的形式出现的,下面将一些常用的指令:

1、v-cloak

我们用vue来传输数据的时候,往往会用到类似 {{ msg }} 这样的内容,正常情况下这样的内容只有程序员可以看到,而有一种情况,当用户的网络不ok,<script> 语句还没有将数渲染到浏览器的时候,用户会意外看到原本不应该看到的东西,这就影响了用户体验,这时 v-cloak 的作用就显现了。

v-cloak的作用,就是在数据没有用传输到浏览器之前,将 {{ msg }} 先隐藏起来,这就类似于css里面的 display:none和 display:bolck,数据没有传输过来的时为 none ,数据传输完成再给他显示为 block 。

v-cloak 主要解决页面闪烁问题

<h1 v-cloak> {{ msg }} </h1>

2、v-text

v-text 没有闪烁问题,因为一般用 v-text 的时候,不会在元素内添加别的值, v-text 会覆盖元素里面的值

<h1 v-text = 'msg'>这句话在数据传输完毕后会被 msg 里面的值覆盖</h1>

3、v-html

和 v-text 类似的一个指令 v-html 他们在写法上几乎一模一样,但 v-html 比 v-text 多了一个作用,就是支持 html 的编译,而 v-text 中的值会原样输出

<div id ="app" v-html = 'msg'></h1>
<script>
    var vm = new Vue({
        el:#app, // el 的值表示当前 new 这个实例要控制的区域
        data:{
            msg:'<h1>这句话将会以h1的格式显示在浏览器页面上</h1>' // data 里面存放的是 el 中要用到的数据
        },
        methods:{
            //这个 methods 属性定义了当前 Vue 实例所有可用的方法
        }
    });
</script>

4、v-bind

v-bind 是 vue 中用于绑定数据的属性的指令, v-bind 中可以写合法的 js 指令,同时 v-bind 也可以简写为 : +绑定的属性。

<input id = "app" type ="text" v-bind:value="myvalue" :title ="mytitle">
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            text:"按钮",
            mytitle:"这是一个标题。"
        },

    })
</script>

5、v-on

v-on 是 vue 中用于绑定事件方法的指令, v-bind 中可以写合法的 js 指令 , 同时 v-bind 也可以简写为 @ +绑定属性。

<input id ="app" type = "button" :value ="myvalue" v-on:click="show">//此处的 v-on 完全可以用@来表示
<script>
    var vm =new Vue({
        el:'#app',
        data:{
            myvalue:"点击"
        },
        methods:{
            show:function(){
                alert("你好,世界!")
            }
        }
   });
</script>

暂时就先写这五个,后面再补充

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值