1、export 和export default 的區(qū)別？

在JavaScript ES6中，export與export default均可用于導(dǎo)出常量、函數(shù)、文件、模塊等，你可以在其它文件或模塊中通過import+(常量 | 函數(shù) | 文件 | 模塊)名的方式，將其導(dǎo)入，以便能夠?qū)ζ溥M行使用，但在一個文件或模塊中，export、import可以有多個，export default僅有一個。如export const str="hello world" export function f(a){return a+1} ,引入則是import { str, f } from 'demo1' 或者 import str from 'demo1'

2、使用v-for的時候會顯示錯誤的原因？

當(dāng)我們使用v-for進行渲染時候，盡可能使用渲染元素自身屬性的id給渲染元素的元素綁定一個key值，這樣在當(dāng)前渲染元素的dom結(jié)構(gòu)發(fā)生改變時，能夠單獨響應(yīng)該元素而不觸發(fā)所有元素的渲染

3、vue開發(fā)中使用watch 監(jiān)聽屬性時注意

vue中的watch監(jiān)聽屬性時候，屬性后只能接函數(shù)或{}形式的對象，如watch：{value:{hander：function(newVal,oldVal){this.value2=newVal+oldVal}}}

4、computed 計算方式和methods 方法的區(qū)別？

computed方法會在初始化的時候先執(zhí)行一次，methods方法不會；computed用于后臺計算并返回該屬性名對應(yīng)的數(shù)據(jù)，methods一般結(jié)合事件使用；

5、如何使用事件修飾符？

.stop阻止事件冒泡，.once事件只能點擊一次，.self只能被本身觸發(fā)，不能被子元素觸發(fā)，submit.prevent提交事件不再重載頁面；按鍵修飾符，v-on:keyup.enter="hander";

6、如何使用表單修飾符號？

v-model.trim可以過濾用戶的輸入值，v-model.number可以將用戶輸入值轉(zhuǎn)換成number類型，NAN時候保持原值，v-model.lazy將input同步輸入值和數(shù)據(jù)轉(zhuǎn)變成change事件即在enter后數(shù)據(jù)才變更；

7、vue定義全局組件和局部組件

全局組件vue.component(“my-conponent”,{
Template:”<h1>hello world</h1>”
});

局部組件是在vue根實例下的conponents: {“my-conponent”,Child}；局部組件只能被當(dāng)前實例應(yīng)用。

8、組件之間傳參，父傳子和子傳父

父傳子利用props：父組件作用域中的子組件標(biāo)簽Child上需要使用<Child v-bind:myPropName="parentMsg"></Child>綁定要下傳的參數(shù)，子組件文件中需要聲明 props: ['myPropName'],

子傳父利用事件機制：this.$emit('incremenmt',this.counter) 中子組件觸發(fā)increment，父組件中使用v-on:increment=”incrementHander”去監(jiān)聽及被觸發(fā)后的函數(shù)；

9、在vue中 $ref 的使用

· 利用ref屬性可以獲取dom元素 或者子組件； 當(dāng)ref定義在dom元素上時，通過this.$refs.name可以獲取都沒對dom進行原生的操作，ref的屬性命名不能使用駝峰法；如<div class="foods-wrapper" ref="foods-wrapper"></div>，通過this.$refs來進行操作this.$refs.foods-wrapper.innerText="wangwang666"

· 通過在引用的子組件上使用ref實現(xiàn)父組件調(diào)用子組件的方法和屬性；如在父組件中引用子組件并定義ref屬性如<Child ?ref="getmsg22"></Child>，在父組件方法中使用this.$refs.getmsg22.Prop （父拿子值） 或 this.$refs.getmsg22.show()

· 子拿父值：在子組件的方法函數(shù)中，使用this.$parent.propName獲取父親組件的屬性值；

· 可用于實現(xiàn)dom中的js聯(lián)動效果，比如點擊表單提交按鈕后觸發(fā)表單重置按鈕，this.$refs.resetform.click()效果

10、當(dāng)想實現(xiàn)在指定位置js判定后動態(tài)添加不同的組件怎么實現(xiàn)？

當(dāng)需要動態(tài)將data中的組件數(shù)組渲染到指定位置時候，可以使用<component :is="which_to_show" ></component>實現(xiàn)；

11、在vue開發(fā)中使用element-ui 綁定事件無效時候解決辦法？

綁定點擊事件時使用事件修飾：.native ，否則事件無效

12、vue.js中點擊怎么獲取當(dāng)前元素

event.target是指點擊的是哪個元素，target獲取到的就是哪個元素；event.currentTarget指的是獲取到的是事件綁定的元素；

13、使用vue-cli 腳手架快速創(chuàng)建工程項目的命令

vue init webpack 工程名(比如my-projet) ,組件命名不能使用駝峰法，可以使用-短橫線分隔，首字母大寫；

14、在谷歌瀏覽器中安裝可以調(diào)試vue文件的開發(fā)工具vuejs-devtools開發(fā)插件

參考網(wǎng)址https://www.cnblogs.com/alice-fee/p/8038367.html

15、vue開發(fā)中的報錯總結(jié)（待完善）

· 使用vue腳手架快速搭建項目后運行出現(xiàn)錯誤 “ Module build failed: Error: No parser and no file path given, ”?
解決方式是：npm i prettier@~1.12.0 后重運行；

· 創(chuàng)建組件時候報錯：“The template root requires exactly one element.”
解決方式是：將組件的template下的元素用一個div包裹

· 使用v-for遍歷時候報錯：“[Vue warn]: Avoid using non-primitive value as key, use string/number value instead”

解決方式：代碼中使用 item 作為了 key 導(dǎo)致的，v-for=”(item,index) in items “ :key=”index”

16、npm 安裝時 -save-dev 和-save 命令代表的意思

-save-dev 是指將包信息添加到 package.json 里的 devDependencies節(jié)點，表示開發(fā)時依賴的包。

-save 是指將包信息添加到 package.json 里的dependencies節(jié)點，表示發(fā)布時依賴的包。

總結(jié)

以上是生活随笔為你收集整理的VUE学习和开发中的注意点总结(一)，便于回顾（不断完善补充。）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。