1、export 和export default 的區別？

在JavaScript ES6中，export與export default均可用于導出常量、函數、文件、模塊等，你可以在其它文件或模塊中通過import+(常量 | 函數 | 文件 | 模塊)名的方式，將其導入，以便能夠對其進行使用，但在一個文件或模塊中，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的時候會顯示錯誤的原因？

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

3、vue開發中使用watch 監聽屬性時注意

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

4、computed 計算方式和methods 方法的區別？

computed方法會在初始化的時候先執行一次，methods方法不會；computed用于后臺計算并返回該屬性名對應的數據，methods一般結合事件使用；

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

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

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

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

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

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

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

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

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

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

9、在vue中 $ref 的使用

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

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

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

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

10、當想實現在指定位置js判定后動態添加不同的組件怎么實現？

當需要動態將data中的組件數組渲染到指定位置時候，可以使用<component :is="which_to_show" ></component>實現；

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

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

12、vue.js中點擊怎么獲取當前元素

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

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

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

14、在谷歌瀏覽器中安裝可以調試vue文件的開發工具vuejs-devtools開發插件

參考網址https://www.cnblogs.com/alice-fee/p/8038367.html

15、vue開發中的報錯總結（待完善）

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

· 創建組件時候報錯：“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 導致的，v-for=”(item,index) in items “ :key=”index”

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。