记录自己在写Vue积累的一些经验
1. filter,method,computed的使用
刚用这几个东西的时候,可能会搞混。所以总结了一些相同点和不同点,具体选哪个要看需求,要准确判断
- 过滤器(能传参)=>绑定属性和放在插值里
- 计算属性(不能传参)=>绑定属性和放在插值里(计算属性的值不能改,只能读)
- 方法(可以传参)=>可以绑定属性和事件和放在插值里
计算属性和方法的不同和相同之处
- 计算属性会基于依赖进行缓存,如果其依赖不变,则改函数不会执行
- 方法不管其值有没有改变,都会重新计算一遍
- 两者都会根据数据改变而出发
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.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函数
- v-show指令无法绑定,只能通过手写if,else
data() {
return {
mark: true
}
}
render: (createElement) => {
return createElement('h1', this.mark ? '标题' : '');
}
- 自定义指令
16. Vuex
- GEtters可以将state里的数据过滤后返回
getters: {
formatTime: _s => formatTime(_s.timeStr)
}
- Actions 一般用来异步改变数据,也就是在回调里调用mutations
17. v-model绑定input,如果input是数字类型,并且输入的为非数字,vue返回的值为空字符串
18. 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: '../../'