Vue.js常用指令介绍

最新推荐文章于 2024-08-05 19:35:10 发布

羽枫760

最新推荐文章于 2024-08-05 19:35:10 发布

阅读量139

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_39185919/article/details/99461708

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本篇文章整理一下Vue的常用指令。

插值表达式

        使用示例：
        <p>{{ 绑定的数据}}</p>
        作用：实现页面和数据对象的数据绑定，当插值表达式中绑定的数据改变时，页面上的数据会跟着改变。但是插值表达式只是向页面中插入数据，并不会覆盖原本的数据。

v-text指令

        使用示例：
        <h4 v-text="绑定的数据">==================</h4>
        作用：v-text指令的作用也是向页面插入数据，但是v-text会覆盖掉页面上原本的数据。同样也是绑定数据的修改会影响到页面数据。

v-html指令

        使用示例：
        <h4 v-htnl="绑定的数据">==================</h4>
        作用：v-html的作用同样是向页面插入数据，但是v-html绑定的数据会被浏览器当成heml标签，浏览器会将其解析后再向页面输出。

v-bind指令

        使用示例：
        <input type="button" value="按钮" v-bind:title="mytitle+'123'">
        作用：v-bind指令的作用一样是数据绑定，它不仅可以绑定数据，还可以在绑定的地方书写合理的js代码，如上代码就进行了字符串拼接。
        简写形式：v-bind指令可以简写为‘：’形式。比如上边的实例代码可以改为：
        <input type="button" value="按钮" :title="mytitle+'123'">
        拓展：v-bind指令同样可以用于绑定样式，我们在Vue实例中预先定义好样式，直接绑定到对应元素上。如下代码：
在这里插入图片描述

v-on指令

        使用示例：
        <input type="button" value="按钮" :title="mytitle + '123'" v-on:click="alert('hello')">
        作用：v-on指令用于方法的绑定，它可以为页面上的元素绑定一个js方法。如上示例代码就为input元素绑定一个点击事件，点击时间绑定的方法为alert()方法。
        简写形式：v-on指令可以简写为‘@’形式，比如上边的代码可以修改为：
        <input type="button" value="按钮" @click="show">
        这里我绑定了一个我们的自定义方法。

v-model指令

        使用示例：
        <input type="text" style="width:100%;" v-model="绑定的数据">
        作用：以上提到的数据绑定，只是数据的单向绑定，也就是，绑定的数据会影响到页面元素，而页面元素数据改变不会影响到绑定的数据。v-model指令可以实现数据的双向绑定，页面元素和绑定的数据会互相影响，任何一方数据改变就会影响到另一方。
        注意：v-mode只能由于表单元素，不能使用在其他元素。
        下面来一段完整的代码感受一下

<body>
  <div id="app">
    <p v-cloak>++++++++ {{ msg }} ----------</p>
    <h4 v-text="msg">==================</h4>
    <div>{{msg1}}</div>
    <div v-text="msg2"></div>
    <div v-html="msg2">1212112</div>
    <input type="button" value="按钮" @click="show">
    <input type="text" style="width:100%;" v-model="msg">
  </div>
  <script src="./lib/vue-2.4.0.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '123',
        msg2: '<h1>我是一个大大的H1标签</h1>',
        mytitle: '这是一个自己定义的title'
      },
      methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
        show: function () {
          alert('Hello')
        }
      }
    })
  </script>
</body>

以上是数据绑定的相关指令，下面介绍一些循环遍历和条件渲染的指令。

v-for指令

        使用示例：（v-for中的形式为：别名 in 待遍历的数据。）
        <p v-for="(item, i) in list">索引值：{{i}} --- 每一项：{{item}}</p>
        作用：v-for指令用户遍历数据，当data属性中的数据有多条是，可以使用v-for指令对数据进行循环遍历最终将每一条数据都渲染至页面。如上代码：item为遍历元素的别名，i为每一条元素的索引值，可以不写，但是建议写上。list为要遍历的数据，list可以是普通数组或者数字，也可以是对象，还可以是对象数组。如果list为数字时，代表for循环执行的次数，in是默认写法。

v-if指令

        使用示例：
        <h3 v-if="flag">这是用v-if控制的元素</h3>
        <input type="button" value="toggle" @click="flag=!flag">
        作用：v-if指令用于对页面进行条件渲染，通过条件判断，控制元素的显隐。如上代码，flag是我在data中定义的布尔类型的属性，通过对input元素使用v-bind指令绑定js表达是修改布尔值来控制元素的显隐。

v-show指令

        使用示例：
        <h3 v-show="flag">这是用v-show控制的元素</h3>
        <input type="button" value="toggle" @click="flag=!flag">
        作用：v-show指令也是用于对页面进行条件渲染，功能完全一样通过条件判断，控制元素的显隐。如上代码，flag是我在data中定义的布尔类型的属性，通过对input元素使用v-bind指令绑定js表达是修改布尔值来控制元素的显隐。

v-show和v-if的比较

        v-if 的特点：每次都会重新删除或创建元素
        v-show 的特点：每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式
        v-if 有较高的切换性能消耗
        v-show 有较高的初始渲染消耗
        如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show
        如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if