初识Vue(3)——Vue常用的指令

最新推荐文章于 2024-04-17 00:09:29 发布

源魔方

最新推荐文章于 2024-04-17 00:09:29 发布

阅读量654

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_45149720/article/details/108552091

版权

vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

Vue的指令

v-for
v-on
v-once
v-html
v-text
v-pre
v-cloak
v-bind

v-for

v-for用于遍历数据，用在table和ur标签里面是可以自动生成遍历结果和标签效果

<div id="app">
    <ul>
        <li v-for="item in movice">{{item}}</li>
    </ul>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message:"你好",
            movice:["海贼王","火影","龙珠"]
        }
    })
</script>

在这里插入图片描述

v-on

v-on绑定事件监听器。事件类型由参数指定。其语法糖是@（v-on=“click”,简写为：@=“click”）

<body>
<div id="app">
    <h1>{{count}}</h1>
    <button @click="Increase">+</button>
    <button @click="decrease">-</button>
</div>
</body>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            count:0,
        },
        methods:{
            Increase (){this.count++},
            decrease: function (){this.count--},
        }
    })
</script>

以上代码实现点击按钮增加减少数字。

v-once

默认情况下,界面上的模板语法mustache插值会根据M的变化而变化,有时需要将初次的值渲染到界面上,随后界面上的值不会根据M的改变而改变,无表达式的指令v-once告诉浏览器的Vue编译器,只渲染该元素或组件一次.

<body>
<div id="app">
    <h1 v-once>有v-once：{{count}}</h1>
    <h1>无v-once：{{count}}</h1>
    <button @click="Increase">+</button>
    <button @click="decrease">-</button>
</div>
</body>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            count:0,
        },
        methods:{
            Increase (){this.count++},
            decrease: function (){this.count--},
        }
    })
</script>

在这里插入图片描述

v-html

当data对象里面存储了一个html标签，我们需要在mustache语法中读出这个标签具体的内容时，需要用的v-html去解译。

<body>

<div id="app">
    <h2>{{url}}</h2>
    <h2 v-html="url"></h2>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            url: '<a href="http://www.baidu.com">百度一下</a>'
        }
    })
</script>
</body>

在这里插入图片描述

v-text

v-text用于渲染普通文本，无论何时，绑定的数据对象上 msg属性发生了改变，插值处的内容都会更新。（我理解的和mustache语法相同结果）

<body>

<div id="app">
  <h2>{{message}}, 路飞!</h2>
  <h2 v-text="message">, 路飞!</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好'
    }
  })
</script>
</body>

在这里插入图片描述

v-pre

一些静态的内容不需要编辑加这个指令可以加快编辑

<body>

<div id="app">
  <h2>{{message}}</h2>
  <h2 v-pre>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

在这里插入图片描述

v-cloak

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码，这时使用v-cloak会使这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。

<body>

<div id="app" v-cloak>
  <h2>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  // 在vue解析之前, div中有一个属性v-cloak
  // 在vue解析之后, div中没有一个属性v-cloak
  setTimeout(function () {
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊'
      }
    })
  }, 1000)
  //setTimeout延迟1000毫秒
</script>

</body>

v-bind

主要用于属性绑定，普通形式：v-bind:，语法糖形式：:

<body>

<div id="app">
  <!-- 错误的做法: 这里不可以使用mustache语法-->
  <!--<img src="{{imgURL}}" alt="">-->
  <!-- 正确的做法: 使用v-bind指令 -->
  <img v-bind:src="imgURL" alt="">
  <a v-bind:href="aHref">百度一下</a>
  <!--<h2>{{}}</h2>-->

  <!--语法糖的写法-->
  <img :src="imgURL" alt="">
  <a :href="aHref">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      imgURL: '图片地址',
      aHref: 'http://www.baidu.com'
    }
  })
</script>
</body>

源魔方

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
初识Vue(3)——Vue常用的指令

Vue的指令v-forv-onv-oncev-htmlv-textv-prev-cloakv-bindv-forv-for用于遍历数据，用在table和ur标签里面是可以自动生成遍历结果和标签效果<div id="app"> <ul> <li v-for="item in movice">{{item}}</li> </ul></div><script> const app
复制链接

扫一扫