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

最新推荐文章于 2024-02-04 14:52:21 发布

原创最新推荐文章于 2024-02-04 14:52:21 发布 · 617 阅读

1 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

8 篇文章

订阅专栏

本文深入探讨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>

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