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