超全面的vue.js使用总结

则会导致上面的

transform: translate(-50%,-50%);

被添加到下面，认为这个是不变的。

十三、指令v-el的使用

有时候我们想就像使用jquery那样去访问一个元素，此时就可以使用v-el指令，去给这个元素注册一个索引，方便通过所属实例的$el访问这个元素。

注意

HTML不区分大小写，所以

v-el:someEl

将转换为全小写。可以用

v-el:some-el

然后设置

this.$el.someEl

。

示例

<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能带来一定的帮助，如果有疑问大家可以留言交流。