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”



16、npm 安装时 -save-dev 和-save 命令代表的意思

-save-dev 是指将包信息添加到 package.json 里的 devDependencies节点,表示开发时依赖的包。

-save 是指将包信息添加到 package.json 里的dependencies节点,表示发布时依赖的包。



猜你喜欢

转载自blog.csdn.net/zhouzuoluo/article/details/80801542
今日推荐