Vue中的操作指令

文档中心

指令

v-if

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

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

Vue中的操作指令

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

Vue中的操作指令

我们发现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: `       {{tip}}      
      `    })    const vm = app.mount('#root')  </script></body>

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

Vue中的操作指令

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

Vue中的操作指令

我们发现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: `      {{tip}}
      今天不用学习了
      `    })    const vm = app.mount('#root')  </script></body>

控制台显示结果如下:

Vue中的操作指令

当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: `      {{tip}}
      elseif
      else
      `    })    const vm = app.mount('#root')  </script></body>

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

Vue中的操作指令

列表循环渲染

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: `      {{item}} -- {{index}}
      `    })    const vm = app.mount('#root')  </script></body>

控制台显示结果：

Vue中的操作指令

如上面代码中所写,其中的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: `      {{value}} -- {{key}} -- {{index}}
      `    })    const vm = app.mount('#root')  </script></body>

控制台显示结果：

Vue中的操作指令

从结果看,我们知道对象里面的参数不是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: `      {{value}} -- {{index}}
            `    })    const vm = app.mount('#root')  </script></body>

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

Vue中的操作指令

当我们点击新增按钮时,发现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表示只会阻止对元素自身的单击。

键盘修饰符

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

上面表示只有当我们同时按下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])

8度云软件下载中心

Vue中的操作指令

指令

v-if

v-show

拓展知识

列表循环渲染

v-for

数组和对象

v-on

v-bind

v-model

事件修饰符

键盘修饰符

v-text/v-html

v-once

v-cloak

自定义指令

公告

标签

Vue中的操作指令

指令

v-if

v-show

拓展知识

列表循环渲染

v-for

数组和对象

v-on

v-bind

v-model

事件修饰符

键盘修饰符

v-text/v-html

v-once

v-cloak

自定义指令

相关问题

公告

标签