動態綁定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'",
?
