Vue.js的自我总结

vue项目的环境搭建:


全局安装vue-cli的后,后续就不用再安装了,全局安装是将安装包放在 /usr/local 下或者你 node 的安装目录,以后可以直接在命令行里使用

1、v-if和v-show的区别

使用v-if,标签不显示时,会从dom中删除,显示时,标签会重新添加

使用v-show,标签不会删除,会使用display的布尔值控制显示和隐藏。

v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。


2、data要和methods同一级别,方法才会生效,注意{}的控制范围

3、Vue.js中严格区分大小写,比如复选框的type为:checkbox,而不是用checkBox,不然无法完成数据绑定

4、父组件和子组件通讯中,父组件的事件绑定不支持事件名称的“驼峰写法“,即 MyEvent ,应改为my-event或者myevent.

5、 vue高级组件实现过渡效果时,如果是两个相同的标签实现效果时要给每个标签加上key值,否则是不会渲染过滤效果的

    比如:

  <transition name ="my-trans">
      <p v-if="show"> I am show</p>
      <p v-else> not show</p>
    </transition> 此时是不会显示过滤效果的,需要在每个P标签上加上key值才可以。

未完待续.....

猜你喜欢

转载自blog.csdn.net/lm891108647/article/details/80375666
今日推荐