vue 搭建项目:vue init webpack ‘项目名称’
vue中stylue、stylue-loader安装使用:
npm install stylue --save
npm install stylue-loader@3.0.2 --save
移动端计算单位
css <style lang="stylus" rel="stylesheet/stylus"> c(p) { (p / 108) rem; } </style>
:style="" 动态设置css样式
vue中监听浏览器大小改变:
mounted() {
const that = this;
window.onresize = () => {
return (() => {
that.height = document.documentElement.clientHeight + 'px';
})()
};
},
v-if与v-show:
if是从dom中删除
show是display:none
v-for循环后如何在数组中添加内容
通过splice(start,num,…arr)
slot
name属性,通过标签调用name属性进行替换
例:
<slot name="item-txt"></slot>
<div slot="item-txt">分类</div>
vue-router 报错
问题:NavigationDuplicated: Avoided redundant navigation to current location
解答:
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}`
v-bind 绑定class、style:
如果过于复杂可以f放在methods、computed中
例:
<div :style="activeStyle"><slot name="item-txt"></slot></div>
computed:{
isActive(){
return this.$route.path.indexOf(this.path) !== -1
},
activeStyle(){
return this.isActive ? { color : this.activeColor } : {}
}
},
vue下webpack配置别名
cli4.x(文件):node_modules/@vue/cli-serve/lib/config/base.js
配置:
.alias
.set('@', api.resolve('src'))
.set('assets', api.resolve('src/assets'))
.set('components', api.resolve('src/components'))
使用:
import comp from 'components/comp'
<img slot="item-icon" src="~assets/image/img.png" alt="">
vuex状态管理
通过this.
s
t
o
r
e
.
s
t
a
t
e
属
性
来
访
问
状
态
通
过
t
h
i
s
.
store.state属性来访问状态 通过this.
store.state属性来访问状态通过this.store.commit( ’ mutation中方法 ’ )来修改状态
核心
getters
mutations
actions
modules
state | 单一状态树 |
---|---|
getters | 类似计算属性 |
mutation | 状态更新( 必须同步操作 ) |
modules | 将store分割成模块,每个模块都有自己的state、getters、mutation… |
vue响应式数据
vue.set( ’ ’ )
vue.delete( ’ ’ )
项目基本依赖
css : normalize.css ( github中 )
js :vue.config.js ( 配置别名 )
.editorconfig( 规范 )