Vue实战经验

2024年1月21日 160次阅读 来源: 韦磊

记录自己在写Vue积累的一些经验

1. filter，method，computed的使用

刚用这几个东西的时候，可能会搞混。所以总结了一些相同点和不同点,具体选哪个要看需求，要准确判断

  • 过滤器(能传参)=>绑定属性和放在插值里
  • 计算属性(不能传参)=>绑定属性和放在插值里（计算属性的值不能改，只能读）
  • 方法(可以传参)=>可以绑定属性和事件和放在插值里

计算属性和方法的不同和相同之处

  1. 计算属性会基于依赖进行缓存，如果其依赖不变，则改函数不会执行
  2. 方法不管其值有没有改变，都会重新计算一遍
  3. 两者都会根据数据改变而出发

2. vue组件按需加载的方法

const Acomponent= () => import('@/components/Acomponent')

3. vue的data里的变量名不能用带下划线的，取不到

data() {
    _a: 0       //取不到
}

4. 动态图片和动态图片背景(图片在本地，非绝对地址)

<img :src='imgUrl'>      //如果是写绝对地址没问题，但是相对地址就不行了，这是webpack的原因
  • 路径怎么写都是找不到的，除非把图片放到static文件夹里面，然后写相对路径才行,当然这种方法是不会用的；
  • 在data里或者方法里require(url)，这种方法也不可取，太麻烦了；
  • 如果是背景图片的话推荐写固定css，然后用绑定动态class或计算属性或过滤器来切换class；
.class1{
    background:url(url1)
}
.class2{
    background:url(url2)
}

<div :class='computedStyle'></div>
computedStyle(){
    if(xxx){
    return {.class1:true}
    }else{
    return {.class2:true}
    }
}

5. 对组件的理解

  • 组件的分离可以是因为组件可以被提取出来复用，无论是其逻辑还是其数据，比如标题栏；也可以是因为一个组件的代码太多，放在一起难以组织，这时也可以单独提出来
  • 我在写vue组件的时候，将组件分为公共组件和私有组件
  • 公有组件是弱耦合的，业务逻辑比较少的，而私有组件相反
  • 公有组件里面也有数据获取，有前台交互，但是这些数据获取和交互都要依赖父组件（私有组件，也就是页面）传递props或者父组件通过this.$children.func()来调用其逻辑

6. 过滤器除了用在{{}}里，还可以放在绑定属性后面

    <div :id="test | formatId"></div>

7. Vue控制dom

  • Dom文本：用插值法与数据绑定
  • Dom结构：用v-if v-else v-show等控制html结构
  • Dom样式：用属性绑定样式
  • Dom操作：用事件绑定

8. 父子组件消息传递

  1. 父组件传给子组件： props
  2. 子组件传给父组件： 子组件$emit,触发自定义事件并将数据作为参数传递给父组件，父组件用事件监听，并拿到传递过来的参数
    <div id="father" @listenChild="handle">father</div>
    handle(parma) {
        console.log(parma)
    }
    <div id="child" @click="handleClick">child</div>
    handleClick() {
        this.$emit('listenChild', parma)
    }
  1. 兄弟组件传递：this.$parent.$refs.component.$data
  2. 组件跨度太大建议用Vuex管理

9. Vue build配置assetspublicpath

如果是cdn静态资源，可以加上域名如www.cdn.com打包后的地址自动变为www.cdn.com/index.js

10. v-html 可以转义字符串,相当于innerHTML

11. v-cloak

<div id='app' v-cloak>
    {{msg}}
</div>

[v-cloak] {
    display: none;
}

这样当msg还没被渲染出来之前，是不会显示这个div的，即不会出现{{msg}}这个字符串

12. scoped

<style>标签里加上scoped，会在每个标签上加上一段data-v-xxx,编译出来的scc都会加上[data-v-xxx]来限定范围，只在这个页面有效，去掉scoped就不会产生data-v-xxx了。

13. input的focus要想有效果要放在$nextTick里，或者用setTimeout

this.$nextTick(() => {
    this.$refs.inout.$el.focus();
})

14. 在webpack打包的项目中引入jquery，如果版本低于2.0会报错，一般就是用npm安装最新版的jquery

15. Render函数

  1. v-show指令无法绑定，只能通过手写if，else
data() {
    return {
        mark: true
    }
}
render: (createElement) => {
    return createElement('h1', this.mark ? '标题' : '');
}
  1. 自定义指令

例子

16. Vuex

  • GEtters可以将state里的数据过滤后返回
getters: {
    formatTime: _s => formatTime(_s.timeStr)
}
  • Actions 一般用来异步改变数据，也就是在回调里调用mutations

17. v-model绑定input，如果input是数字类型，并且输入的为非数字，vue返回的值为空字符串

18. event bus 实现兄弟组件之间的通信

event bus

19. 用axios获取本地文件，写绝对路径部署只能部署到静态服务器的根目录问题

用axios获取本地文件，比如json文件的时候，一般放在static文件夹里，但是写路径时不能写绝对路径，应该写’./static/a.json’,虽然这个路径是错的，但是node会直接从static里去找。
写成这样的相对路径是因为打包后的json文件会放在static文件夹下，而index在static文件夹外面，所以为了调试和打包后部署在任何文件目录下都可以访问到本地的json文件，写错相对路径。

20. tag为router-link的属性，指定该标签渲染哪种的标签，默认为标签

<router-link tag='div' class="tab-item" to="/recommend">
    <span class="tab-link">推荐</span>
</router-link>

21. router-link标签在选中时默认会加上router-link-exact-active router-link-active两个class

22. 将build的assetsPublicPath改为./之后，css里的相对路径就会报错，还需要改一下css大打包路径，在utils里的50行后面加上

publicPath: '../../'

ue相对路径修改

    原文作者：韦磊
    原文地址: https://segmentfault.com/a/1190000011767361
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞