首页 >web前端 >Vue.js > 正文

使用vue.js需要注意什么

原创2021-01-07 17:31:5908679

使用vue.js需要注意:1、过滤器主要用于简单的文本转换;2、computed和methods的区别;3、key的使用;4、数组的使用;5、组件的使用;6、组件通信。

本文环境:windows10、vue2.9,Dell G3电脑。

(学习视频分享:javascript视频教程

使用vue.js需要注意以下问题:

1、过滤器主要用于简单的文本转换,如果要实现复杂的数据变换,应使用计算属性

2、指令的使用

  • v-bind基本用于HTML元素上的属性,如id、class、href、src等

  • v-on用来绑定事件监听器,如click、dblclick、keyup、mousemove等,method内的this指向的是当前Vue实例

  • v-show不能使用在template上

  • - v-if 和 v-show使用场景

  • v-if 条件为false则不会编译渲染元素。v-show只是简单的CSS属性切换,无论true/false,都会编译。v-if适合条件不常改变的场景v-show适用频繁切换条件

3、computed和methods的区别

  • methods有括号(),computed不带括号。

  • computed是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。

  • methods在重新渲染的时候,函数总会重新调用执行。

4、key的使用

Vue渲染元素时,考虑效率,会尽可能复用已有的元素。此时需要在被重用的元素加上key属性

<input key="go">

5、数组的使用

  • filter()、concat()、slice()不会更改原数组,将返回一个新数组

  • 用新数组替换原数组,无性能影响。Vue渲染时,会尽量复用DOM元素

    部分数组变动无法被Vue检测到,并更新视图

  • app.books[3]={}app.books.length=1以上情况可以分别使用Vue.set和app.books.splice(1)处理

6、组件的使用

<table>、<ul>、<ol>、<select>等标签受HTML限制,只允许出现限制的标签,自定义的组件标签是无效的。
这时候可以使用is属性挂载组件

<table>    
    <tbody is="my-component"></tbody>
</table>

<tbody>渲染时会替换为组件my-component的内容

注:但使用字符串模板时,不受限。如.vue文件

7、组件通信

  • 父->子 prop

  • 子->父 $emit v-model

相关推荐:js教程

以上就是使用vue.js需要注意什么的详细内容,更多请关注php中文网其它相关文章!

php中文网直播班

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:vue.js
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    推荐视频教程
  • 麦子学院Vue.js视频教程麦子学院Vue.js视频教程
  • Vue.js + Node.js构建音乐播放器实战视频教学Vue.js + Node.js构建音乐播放器实战视频教学
  • 视频教程分类