Vue中的操作指令

最新推荐文章于 2024-04-23 01:07:42 发布

周帅帅Love

最新推荐文章于 2024-04-23 01:07:42 发布

阅读量1.3k

点赞数

分类专栏： Vue3.0学习文章标签：前端 vue.js

本文链接：https://blog.csdn.net/qq_36982349/article/details/124033302

版权

Vue3.0学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

指令

v-if

<body>
  <div id="root">
  </div>
  <script>
    // data & methods & computed & watcher
    const app = Vue.createApp({
      data () {
        return {
          tip: 'Vue学习第四天',
          show: true
        }
      },
      template: `
      <div v-if="show">
        {{tip}}
      </div>
      `
    })
    const vm = app.mount('#root')
  </script>
</body>

当show为true时,控制台显示结果:

当show为false时,控制台显示结果:

我们发现v-if为true时,对应的dom元素是显示的,当为false时,dom会消失,我们通过控制台显示结果可以看出。

v-show

<body>
  <div id="root">
  </div>
  <script>
    // data & methods & computed & watcher
    const app = Vue.createApp({
      data () {
        return {
          tip: 'Vue学习第四天',
          show: true
        }
      },
      template: `
      <div v-show="show">
        {{tip}}
      </div>
      `
    })
    const vm = app.mount('#root')
  </script>
</body>

当show为true时,控制台显示结果:

当show为false时,控制台显示结果:

我们发现v-show为true时,对应的dom元素显示的样式为display:block,当为false时,对应的dom元素显示的样式为display:none,我们通过控制台显示结果可以看出,通过这两个显示我们也能知道v-show和v-if的区别,v-if是控制dom的显示和隐藏,v-show是控制样式的display为block或者none,所以当我们如果频繁操作dom时,我们更建议使用v-show从而来提高性能,如果不涉及频繁操作dom,这两个就差距不大了。

拓展知识

除了v-if和v-show之外,还有v-else,但是v-else只能和v-if在一起使用,而且要上下两行,中间不能隔着别的div元素,不然vue会报警告,也不能与v-show在一起使用

<body>
  <div id="root">
  </div>
  <script>
    // data & methods & computed & watcher
    const app = Vue.createApp({
      data () {
        return {
          tip: 'Vue学习第四天',
          show: false
        }
      },
      template: `
      <div v-if="show">{{tip}}</div>
      <div v-else>今天不用学习了</div>
      `
    })
    const vm = app.mount('#root')
  </script>
</body>

控制台显示结果如下:

当v-if为false时,就会执行v-else的操作,所以控制台会显示对应的字段。

而且还可以使用v-else-if,代码如下

<body>
  <div id="root">
  </div>
  <script>
    // data & methods & computed & watcher
    const app = Vue.createApp({
      data () {
        return {
          tip: 'Vue学习第四天',
          show: false,
          showTwo: false
        }
      },
      template: `
      <div v-if="show">{{tip}}</div>
      <div v-else-if="showTwo" >elseif</div>
      <div v-else>else</div>
      `
    })
    const vm = app.mount('#root')
  </script>
</body>

当v-if和v-else-if都不成立,就会显示v-else中的内容,控制台显示结果如下：

列表循环渲染

v-for

循环数组

当我们在vue中想循环数组并展示出来,我们可以使用v-for的指令

<body>
  <div id="root">
  </div>
  <script>
    // data & methods & computed & watcher
    const app = Vue.createApp({
      data () {
        return {
          vueList: ['vue', 'vue2', 'vue3']
        }
      },
      template: `
      <div v-for="(item, index) in vueList" :key="index">{{item}} -- {{index}}</div>
      `
    })
    const vm = app.mount('#root')
  </script>
</body>

控制台显示结果：

如上面代码中所写,其中的item代表的是每一项的值,index显示的是对应的下标,但是记住index下标是从0开始的。

循环对象

下面我们看下循环对象和循环数组的区别？

<body>
  <div id="root">
  </div>
  <script>
    // data & methods & computed & watcher
    const app = Vue.createApp({
      data () {
        return {
          vueList: ['vue', 'vue2', 'vue3'],
          vueObj: {
            one: 'vue学习第一天',
            two: 'vue学习第二天',
            three: 'vue学习第三天'
          }
        }
      },
      template: `
      <div v-for="(value, key, index) in vueObj" :key="index">{{value}} -- {{key}} -- {{index}}</div>
      `
    })
    const vm = app.mount('#root')
  </script>
</body>

控制台显示结果：

从结果看,我们知道对象里面的参数不是2个,而是3个,其中value表示的是对象的值,可以表示的是对象的名,index表示的索引值。

数组和对象

当我们在点击按钮,在数组中增加值时,代码如下

第一种方法通过数据的变更函数[push, pop, unshift, shift, splice, sort, reverse]处理,下面只举例了push方法,其他的方法自行测试一下

<body>
  <div id="root">
  </div>
  <script>
    // data & methods & computed & watcher
    const app = Vue.createApp({
      data () {
        return {
          vueList: ['vue', 'vue2', 'vue3'],
          vueObj: {
            one: 'vue学习第一天',
            two: 'vue学习第二天',
            three: 'vue学习第三天'
          }
        }
      },
      methods: {
          addItemClick() {
             // 使用数组的变更函数
            this.vueList.push('vue4')
          }
      },
      template: `
      <div v-for="(value, index) in vueList" :key="index">{{value}} -- {{index}}</div>
      <button @click="addItemClick">新增按钮</button>
      `
    })
    const vm = app.mount('#root')
  </script>
</body>

当我们点击新增按钮时,控制台结果显示如下:

当我们点击新增按钮时,发现vue4已经添加到页面中了。在vue中当我们添加一个元素时,vue会找到我们存在的直接复用,而不存在的才添加。vue本身不知道哪些是添加或者可以复用的,此时我们就需要在循坏列表中增加key值,key值尽量用唯一的,如代码:key="index",我们并不建议用index。

v-on

v-on指令用于监听DOM事件，可以简写为@，在methods去定义对应的方法，定义之后可以直接通过组件实例去访问，还可以从组件的模板中去访问这些方法。我们需要注意的是不要使用箭头函数，因为箭头函数绑定的是父级作用域，导致this指向的不是组件实例。如果使用箭头函数的话，this获取的数据时undefined。我们一般不在指令表达式中书写js语句，这是因为写太多看起来不方便而且逻辑处理也比较麻烦。在页面渲染时，不会将指令所在元素上的js事件属性进行渲染。当我们在指令上绑定事件处理器的时候，可以直接使用$event传入dom对象并且在事件处理方法中访问原生事件对象event.preventDefault。

v-bind

v-bind主要是用于将一个或者多个属性或一个组件的props动态绑定到表达式。简写为:。v-bind指令还可以绑定一个包含属性名-值对的对象。使用时该指令不需要接收参数，直接使用就行。

v-bind="forData"

v-model

v-model指令用于双向绑定。用于监听用户输入事件并更新数据。当我们在input中有内容时，我们可以在浏览器控制台中输入控件内容，并且当我们在console中修改内容时，页面中对应的控件内容也会发生改变。该指令多用于表单控件。

事件修饰符

事件处理中我们使用过event.preventDefault()方法或者event.stopPropagation()方法，在vue中我们可以在v-on指令中使用stop或者prevent去代替上面两个方法。除此之外还有capture表示添加事件监听器时去使用。self表示仅当事件是从特定按键触发时才触发回调。once表示仅仅触发一次回调，再次点击时也不会再触发。left表示当按鼠标左键时触发。right表示当按鼠标右键时触发。middle表示当按鼠标中间的键时触发。passive表示当为true模式添加侦听器。修饰符还可以串起来去使用，但是需要注意书写顺序。v-on:click.prevent.self表示会阻止所有的单击。v-on:click.self.prevent表示只会阻止对元素自身的单击。

<div v-on:click.self="btnClick"></div>
<div v-on:click.once="intClick"></div>

键盘修饰符

键盘修饰符有很多，例如enter、space、ctrl、alt、shift、meta等，需要注意的是mac系统和windows系统有些对应的键是不一样的。例如有meta。还有当修饰键和keyup事件一起使用时，事件触发修饰键必须处于按下状态。

<input @keyup.ctrl.a="btnClick">

上面表示只有当我们同时按下ctrl和a键的时候,btnClick方法不会被调用，但是当我们按住ctrl键，但是松开a键的时候，就会触发btnClick事件。如果我们想要同时按下时去触发btnClick事件，我们可以用ctrl对应的数字就替代这个键。

v-text/v-html

v-text指令用于更新元素的文本内容。v-html指令用于更新元素的innerHTML，相当于我们可以将内容当做html代码插入进去。但是我们需要注意的是，插入的html代码可以带来安全性问题，所以我们尽量不要在用户提交当面使用该指令。

v-once

v-once这个指令可以让元素或者组件只渲染一次，不需要使用表达式，当渲染过之后，再次渲染时，就会把渲染过的东西当做静态内容或者跳过。从而提高性能优化。

v-cloak

v-cloak主要用于当浏览器加载页面时，当我们的网速比较慢或者内容太多时。结合css中设置display为none。就会解决页面加载慢闪烁的问题。

自定义指令

自定义指令可以通过全局注册或者本地注册两种方法，只有注册后才能去使用。使用directive()方法注册全局自定义指令。接收两个参数分别为指令的名字和定义对象或者函数对象。

vm.directive(name, [define])

周帅帅Love

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的操作指令

指令v-if<body> <div id="root"> </div> <script> // data & methods & computed & watcher const app = Vue.createApp({ data () { return { tip: 'Vue学习第四天', show: true }
复制链接

扫一扫