總結vue的實戰用的相關知識點
一、父子元件之間傳遞參數
- 可以使用$ref擷取dom元素或者是子元件
- 可以通過ref實作父元件調用子元件的函數
調用子元件的方法show()
this.$refs.childComponent.show()
- 子元件擷取父元件的資料 可以直接使用props屬性
二、vue中的生命周期鈎子
三、vue的static和assert檔案夾
寫在前面： 這是一篇vue-cli的幾個小知識點簡單介紹，适用于剛接觸vue-cli腳手架以及對此方面并不太了解的同學，大佬們繞道。有需要的朋友可以做一下參考，喜歡的可以點波贊，或者關注一下，希望可以幫到大家。
靜态資源處理： assets和static檔案夾的差別 相信有很多人知道vue-cli有兩個放置靜态資源的地方，分别是src/assets檔案夾和static檔案夾,這兩者的差別很多人可能不太清楚。
assets目錄中的檔案會被webpack處了解析為子產品依賴，隻支援相對路徑形式。例如，在
和 background: url(./logo.png)中，”./logo.png” 是相對的資源路徑，将由Webpack解析為子產品依賴。
static/ 目錄下的檔案并不會被Webpack處理：它們會直接被複制到最終的打包目錄(預設是dist/static)下。必須使用絕對路徑引用這些檔案，這是通過在 config.js 檔案中的 build.assetsPublicPath 和 build.assetsSubDirectory 連接配接來确定的。
任何放在 static/ 中檔案需要以絕對路徑的形式引用：/static/[filename]。
在我們實際的開發中，總的來說：static放不會變動的檔案 assets放可能會變動的檔案。
在js資料中如何引用圖檔 因為webpack會将圖檔當做子產品來引用，是以在js中需要使用require将圖檔引用進來，不能直接以字元串的形式。
js部分： data () { return { imgUrl: '圖檔位址',//錯誤寫法 imgUrl: require('圖檔位址')//正确的寫法 }}template部分：img标簽形式：或者p背景圖形式：
打包上線的背景圖檔的位址問題(包括字型圖示不顯示)
找到build/utils.js修改下面的代碼
if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', // 下面是新添加的，打包的時候會多兩級，加上下面的就正确了，圖檔小于10k的會轉為base64，大于的不會轉化 publicPath:'../../' }) } else { return ['vue-style-loader'].concat(loaders) } }
對圖檔位址進行動态指派時，圖檔最好放在放在static目錄下，此時引入圖檔時一定要用目前目錄./的形式，打包才不會出問題。
// 模闆 // jsdata () { return { blankImg: './static/images/blankLogo/ABC.png' } },
上面的引用打包時才不會出現問題
- vue的防抖節流實作
前段時間做項目的時候需要用到防抖去做驗證問題，遇到了不少問題，在這裡記錄總結下，以便日後使用
解決辦法： 在公共函數部分定義下面的函數
export function debounce(func, delay) { let timer return function (...args) { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { func.apply(this, args) }, delay) }}
我是直接把上面的公共檔案放到vue的原型上，可以在元件内直接使用
下面就是在元件内使用
created() { this.$watch('accout', debounce(() => { this.getRightAccout() }, 500))}
這樣就能夠正确使用防抖函數來解決問題。
- vue中實作自己的插件
在項目中總會遇到自定義的一些功能，可以使用通用函數，也可以實作自己的插件，簡單說下實作思路.
簡單實作
// 定義// plugin.jsexport default { install(Vue){ // install 函數類似于init，在vue的插件中必須使用install命名， this.isIphone(Vue) this.filterData() }, isIphone(Vue){ if(/iP(hone|od|ad)/.test(navigator.userAgent)) { document.body.className += 'iphone' // document.querySelector('input').style.tranform = 'caleY(2)' } }, filterData(){ const searching = 'het' let filterArr = this.data.map(val => { val.entities = val.entities.filter(entity => { console.log(entity.value.toLowerCase().indexOf(searching.toLowerCase())) return entity.value.toLowerCase().indexOf(searching.toLowerCase()) > -1 }) return val }) console.log(filterArr) return filterArr }, data: [{ "id": "fb18eee6-423e-475d-9077-c03dd4ffd80f