VUE学习和开发中的注意点总结(一)，便于回顾（不断完善补充。）

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”