动态绑定class : class:[ name?success:error,name?success:error ] {name:true}
router文件懒加载 components:{ default: ()=> import('xxx.vue') }
重定向 { path: '/', redirect: '/home'}, <==> { path: '/', redirect: { name: 'home' } }
别名{ path:'/', alias:'/index' } 通过 /index 访问的地址跟 path 路由是一样的
history模式: mode: 'history'地址栏没有# 但是需要后台配置支持,如果后端没有正确配置,就会返回404,所以呢，你要在服务端增加 个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个index.html页面,这个页面就是你的app依赖的页面 { path: '*',component:NotFountComponent }
slot插槽 <Children> <p slot="title"></p> </Children> <slot name="title"></slot>
动态组件 <component :is="components" />
保留缓存再次进入保持上次输入<keep-alive> <=组件=> </keep-alive>
跨级通讯
父组件定义 provide(){ return { name: '来自最上层父级' } }
只要是父组件的子组件 都可以 inject:[' name ']
vue命名视图
<router-view name=”viewOne ” ></router-view>
<router-view name=”viewTwo” ></router-view>
<router-view name=”viewThree ” ></router-view>
router文件下
path: '/home',
components: { default: Home, viewOne: a, viewTwo: b }
vuex
strict: true, 开启严格模式
设置命名空间namespaced: true,
mutations:{ increment( state, data ) { this.count = data } }
actions: { increment( context, data ){ context.commit( 'increment',data ) } }
getters:{ name: (state)=>state.name }
模块化触发 this.$store.commit("user/changeName","123123")
import { mapState,mapGetters, mapMutations,mapActions } from 'vuex'
直接获取的方法
computed:{
...mapGetters("模块名(可省略)",[ "name","pass" ]), <==> 最终会转换成 name() { return this.$store.state.name} 使用this.name
...mapState("模块名(可省略)",["name","pass"]) <==> 转换成name: 'a' || name: state => state.a, b: state => state.b
}
methods:{
...mapMutations( "模块名(可省略)" , [ 'changeUser' ]) //映射为this.changeUser(' changeUser ') //this.$store.commit('changeUser'));
...mapActions( "模块名(可省略)" ["user"] ) <==> ([user]) //映射为this.add("user") <==>this.$store.dispatch("user")
}
模块化要开启命名空间 exprot default{ namespaced: true, state, mutations, actions }
开启命名空间后 mapState、mapGetters、mapMutations、mapActions第一个参数是字符串（命名空间名称），第二个参数是数组（不需要重命名）/对象（需要重命名）, {add: "user"} 。 ...mapActions( "模块名(可省略)" ,['user'] )
路由跳转的几种方式
1、<router-link to="需要跳转到页面的路径">
2、this.$router.push()跳转到指定的url，并在history中添加记录，点击回退返回到上一个页面
3、this.$router.replace()跳转到指定的url，但是history中不会添加记录，点击回退到上上个页面
4、this.$touter.go(n)向前或者后跳转n个页面，n可以是正数也可以是负数
路由传参的4中方式
占位符 /:id
router下配置 path: /user/:id
this.$router.push({ path: `/user/${id}` }) // id是目标页面params.id id值
this.$route.params.id
②第二种获取方式 router下配置 path: /user/:id props:true, 组件 props:['id']
params / query传参: name 跳转可以 params 也可以 query params只能用name来引入路由
query 地址栏 ?name=123 //常用语查询类使用
params 地址栏不显示 或者为 :id作为占位符 params:{ id: 123 } //这样的话 params就为123 地址栏为 /index/123
这个name是 router 里面配置的 name
:to="{ name: 'yourPath', params: { name: 'name', dataObj: data }, || query: { name: 'name',dataObj: data }}">
编程跳转
this.$router.push( { name:'name',params: { userId: this.userName } } )
this.$router.push( { path:'name',query:{ userId: this.userName } } )
解决无法触发更新视图
Vue.set(arr, indexOfItem, newValue)
Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：<input v-model.trim="msg">
.native - 主要是给自定义的组件添加原生事件。
为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback)
this.$nextTick(()=>{ }) // 解决找不到dom元素问题
.trim去除首尾空格
.lazy在ange 事件中同步
.number数字类型
@keyup.enter || @keyup.13 = "submit"
.sync子组件接收改变值之后父组件同样改变 <child :user.sync="user" />
导航守卫
全局: router.beforeEach((to,from,next)=>) route.beforeResolve((to,from,next)=>) router.afterEach((to,from)=>) //写在main文件下
路由: beforeEnter //下载router文件下
组件内: 不能访问组件this==beforeRouteEnter(to,from,next){ }
beforeRouteUpdate{动态路由/:id 参数不一样时触发}
beforeRouteLeave(to,from,next){ }
document.title = to.meta.title; //每个页面不同的标题
next(vm=> vm <==> this ); //vm解决找不到this
next(' / ') <==> next( { path: '/' } )
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
在双花括号中 {{ message | capitalize }}
在 `v-bind` 中 <div v-bind:id="rawId | formatId"></div>
过滤器可以串联：{{ message | filterA | filterB }}
你可以在一个组件的选项中定义本地的过滤器：
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
vue.use和vue.prototype的区别
那假如有些插件不规范又或者不是按照vue规则设计（准确地说不是专门为VUE服务）；里面没有install方法，那么就通过添加到vue原型链上的方式使用。
v-pre跳过编译: <span> {{ message }} </span> 会原样输出不会编译
v-clock页面加载跳过闪烁{{message}}: 配合[v-clock]{display:none}.标签<span v-clock></span>
v-once只会渲染一次: 之后的重新渲染实例及所有子节点将被视为静态内容并跳过.
:key的作用: 为了提高 Vue 更新 DOM 的性能，你需要为每项提供一个唯一的key 属性，
有相同父元素的子元素必须有独特的 key 重复的 key 会造成渲染错误。
反向代理 vue@cli3以上在 vue.config.js
②proxyTable: { '/api': { target: 'http://192.168.0.127:8890', /* 跨域地址 */ changeOrigin: true, /*是否跨域*/ secure: false /*是否使用https*/}},
③module.exports = { devServer: { proxy: { '/api': {/*请求称号*/ target: 'http://127.0.0.1:3000', /*请求的接口*/ changeOrigin: true,/*允许跨域*/ pathRewrite: { '^/api': '/' } } } }}
-----------------------------------------------------
vue.config文件下写入： module.exports = { lintOnSave: false } 关闭eslint代码检测
-----------------------------------------------------
build打包上传服务器注意事项
服务器如(apach) 访问路径如果是 xxx.xx.xx:xx/index/index.html 在config index 的assetsPublicPath添加 '/index/'
生产环境__开发环境用的地址不是同一个地址, 开发环境使用的地址可能需要vue代理,而生产环境使用的是后台配置好的跨域接口.
vue-cli2中process.env.BASE_URL配置
process.env.BASE_API == config的dev <==> prod的 BASE_API: "'/api'",
网友评论