超全面的vue.js使用总结(3)

<span v-el:msg>hello</span> <span v-el:other-msg>world</span> this.$els.msg.textContent // -> "hello" this.$els.otherMsg.textContent // -> "world" this.$els.msg //-><span>hello</span>

十四、关于vuejs中使用事件名

在vuejs中,我们经常要绑定一些事件,有时候给DOM元素绑定,有时候给组件绑定。绑定事件在HTML中用v-on:click-"event" ,这时evet的名字不要出现大写,因为在1.x中不区分大小写,所以如果我们在HTML写v-on:click="myEvent"而在js中写myEvent就出错误,所以在vuejs的1.x绑定事件时候,要尽量避免使用大写字母。在2.0中没有该限制!

十五、v-if与v-show的区别

v-if直接不渲染这个DOM元素,而v-show是会渲染DOM元素,只是使用display:none隐藏,打开开发者工具可以看到该DOM

十六、关于transition全局钩子如何在组件中使用

Vue.transition是定义一个全局transition钩子的,如果想针对组件定义,则需要如下写法:

export default{ transition:{ 'fade':{ enter() {}, leave() {} } } }

这样fade这个过度钩子只会作用于组件内,如果同时有同名的全局钩子,则会优先使用组建定义的

十七、利用vue-router如何实现组件在渲染出来前执行某个事件

export default{ data(){ return{ selected:0, currentView:'view_0' } }, methods:{ choose(index) { this.selected=index; this.currentView='view_'+index; } }, route:{ data() { /*每次切换路由,在渲染出页面前都会执行*/ } } }

总结

以上就是关于vue.js使用总结的全部内容了,希望本文的内容对大家学习或者使用vue.js能带来一定的帮助,如果有疑问大家可以留言交流。

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwggsz.html