Vue实战经验

时间 2019-11-10

标签 vue 实战经验繁體版

原文原文链接

记录本身在写Vue积累的一些经验

1. filter，method，computed的使用

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

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

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

计算属性会基于依赖进行缓存，若是其依赖不变，则改函数不会执行
方法无论其值有没有改变，都会从新计算一遍
二者都会根据数据改变而出发

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. 父子组件消息传递

父组件传给子组件： props
子组件传给父组件：子组件$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)
    }

兄弟组件传递：this.$parent.$refs.component.$data
组件跨度太大建议用Vuex管理

9. Vue build配置assetspublicpath

若是是cdn静态资源，能够加上域名如www.cdn.com打包后的地址自动变为www.cdn.com/index.jsvue

10. v-html 能够转义字符串,至关于innerHTML

11. v-cloak

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

[v-cloak] {
    display: none;
}

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

12. scoped

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

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

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

15. Render函数

v-show指令没法绑定，只能经过手写if，else

data() {
    return {
        mark: true
    }
}
render: (createElement) => {
    return createElement('h1', this.mark ? '标题' : '');
}

自定义指令

例子webpack

16. Vuex

GEtters能够将state里的数据过滤后返回

getters: {
    formatTime: _s => formatTime(_s.timeStr)
}

Actions 通常用来异步改变数据，也就是在回调里调用mutations

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

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

event busios

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

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

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相对路径修改npm