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

本是古典何须时尚 2021-09-15 14:56 408阅读 0赞

## 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节点，表示发布时依赖的包。