文章目录
一、v-on可以监听多个方法吗?
v-on可以监听多个方法,例如:
<input type=“text” :value=“name” @input=“onInput” @focus=“onFocus” @blur=“onBlur” />
但是同一种事件类型的方法,vue-cli工程会报错,例如:
<a href=“javascript:;” @click=“methodsOne” @click=“methodsTwo”>
二、Vue 组件 data 为什么必须是函数(必会)
1、每个组件都是 Vue 的实例,
2、组件共享 data 属性,当 data 的值是同一个引用类型的值时,改变其中一个会影响其他,
3、组件中的 data 写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的 data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份 data,就会造成一个变了全都会变的结果。
三、Vue-loader 是什么?使用它的用途有哪些?(必会)
Vue-loader 会解析文件,提取出每个语言块,如果有必要会通过其他 loader处理,最后将他们组装成一个 commonjs 模块;module.exports 出一个 Vue.js 组件对象;
1)< temlate>语言块
(1)默认语言:html
(2)每个.Vue 文件最多包含一个< template>块
(3)内容将被提取为字符串,将编译用作 Vue 组件的 template 选项;
2)< script>
(1)默认语言:JS(在监测到 babel-loader 或者 buble-loader 配置时,自动支持 ES2015)
(2)每个.Vue 文件最多包含一个< script>块
(3)该脚本在类 CommonJS 环境中执行(就像通过 webpack 打包的正常 JS 模块)。所以你可以 require()其他依赖。在 ES2015 支持下,也可以使用 import跟 export 语法
(4)脚本必须导出 Vue.js 组件对象,也可以导出由 Vue.extend()创建的扩展对象;但是普通对象是更好的选择;
3)< style>
默认语言:css
1、一个.Vue 文件可以包含多个< style>标签
2、这个标签可以有 scoped 或者 module 属性来帮助你讲样式封装到当前组件;具有不同封装模式的多个< style>标签可以在同一个组件中混合使用
3、默认情况下,可以使用 style-loader 提取内容,并且通过< style>标签动态假如文档的< head>中,也可以配置 webpack 将所有的 styles 提取到单个CSS 文件中;
4)自定义块
可以在.Vue 文件中添加额外的自定义块来实现项目的特殊需求;例如< docs>块;Vue-loader 将会使用标签名来查找对应的 webpack loaders 来应用到对应的模块上;webpack 需要在 Vue-loader 的选项 loaders 中指定;Vue-loader 支持使用非默认语言,比如 CSS 预处理器,预编译HTML 模板语言,
通过设置语言块的 lang 属性:
简单的说,他就是基于webpack的一个的loader,解析和转换 .vue 文件,提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template,再分别把它们交给对应的 Loader 去处理,核心的作用,就是提取,划重点。
四、vue组件中写 name 选项有什么作用?(必会)
- 项目使用 keep-alive 时,可搭配组件 name 进行缓存过滤;
2.DOM 做递归组件时需要调用自身 name; - Vue-devtools 调试工具里显示的组见名称是由 Vue 中组件 name 决定的。
五、Vue 的最大的优势是什么
首先解释vue的基本概念,然后对比其他框架,介绍vue的特点和优势,不要看到最大就只说一个优势点。
Vue 作为一款轻量级框架、简单易学、数据绑定、组件化、数据和结构的分离、虚拟 DOM、运行速度快,并且作者是华人尤雨溪,对应的 API 文档对国内开发者优化,作为前端开发人员的首选入门框架,Vue 有很多优势:
Vue.js 可以进行组件化开发,使代码编写量大大减少,读者更加易于解。
Vue.js 最突出的优势在于可以对数据进行双向绑定。
相比传统的页面通过超链接实现页面的切换和跳转,Vue 使用路由不会刷新页面。
Vue 是单页面应用,使页面局部刷新,不用每次跳转页面都要请求所有数据和 dom,这样大大加快了访问速度和提升用户体验。
而且他的第三方 UI 组件库使用起来节省很多开发时间,从而提升开发效率。
六、vue中子组件调用父组件的方法
通过v-on 监听 和 e m i t 触发来实现: 1 、在父组件中通过 v − o n 监听当前实例上的自定义事件。 2 、在子组件中通 过 ′ emit触发来实现: 1、在父组件中 通过v-on 监听 当前实例上的 自定义事件。 2、在子组件 中 通过' emit触发来实现:1、在父组件中通过v−on监听当前实例上的自定义事件。2、在子组件中通过′emit’触发 当前实例上的 自定义事件。
七、v-show 和 v-if 指令的共同点和不同点?(必会)
1)相同点:
v-show 和 v-if 都能控制元素的显示和隐藏。
2)不同点:
实现本质方法不同
v-show 本质就是通过设置 css 中的 display 设置为 none,控制隐藏
v-if 是动态的向 DOM 树内添加或者删除 DOM 元素
3)编译的区别
v-show 其实就是在控制 css
v-if 切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部
的事件监听和子组件
4)编译的条件
v-show 都会编译,初始值为 false,只是将 display 设为 none,但它也编译了
v-if 初始值为 false,就不会编译了
5)性能比较
v-show 只编译一次,后面其实就是控制 css,而 v-if 不停的销毁和创建,
故 v-show 性能更好一点。
注意点:因为 v-show 实际是操作 display:" "或者 none,当 css 本身有 display:none 时,v-show 无法让显示
总结(适用场景):如果要频繁切换某节点时,使用 v-show(无论 true 或者 false初始都会进行渲染,此后通过 css 来控制显示隐藏,因此切换开销比较小,初始开销较大),如果不需要频繁切换某节点时,使用 v-if(因为懒加载,初始为 false时,不会渲染,但是因为它是通过添加和删除 dom 元素来控制显示和隐藏的,因此初始渲染开销较小,切换开销比较大)
八、什么是vue.js中的自定义指令?
自定义一些指令对底层DOM进行操作。
Vue里面有许多内置的指令,比如v-if和v-show,这些丰富的指令能满足我们的绝大部分业务需求,不过在需要一些特殊功能时,我们仍然希望对DOM进行底层的操作,这时就要用到自定义指令。
九、如何在vuex中使用异步修改?
在调用vuex中的方法action的时候,用promise实现异步修改
const actions = {
asyncInCrement({ commit }, n){
return new Promise(resolve => {
setTimeout(() => {
commit(types.TEST_INCREMENT, n);
resolve();
},3000)
})
}
}
十、vue如何禁止弹窗后面的滚动条滚动?
methods : {//禁止滚动stop(){
var mo=function(e){e.preventDefault();};
document.body.style.overflow=‘hidden’;
document.addEventListener(“touchmove”,mo,false);//禁止页面滑动},/取消滑动限制/move(){
var mo=function(e){e.preventDefault();};
document.body.style.overflow=‘’;//出现滚动条
document.removeEventListener(“touchmove”,mo,false);}
}