十、VUE模块
基础部分
1. Vue组件间传值
答：
-[ ] 1.父子之间的传值
父组件向子组件传值通过prop子组件在props中创建一个属性，用以接收父组件传过来的值
子组件向父组件传值在响应该点击事件的函数中使用$emit来触发一个自定义事件在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
2.非父子之间的通讯
可以通过eventBus来实现通信.
所谓eventBus就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件
eventBus = new Vue();
组件1触发：
methods: {
eve() {
eventBus.$emit('change','hehe'); //Hub触发事件
}
}123456
组件2接收:
created() {
eventBus.$on('change', ()=> { //Hub接收事件
this.msg = 'hehe';
});
}123456
这样就实现了非父子组件之间的通信了.原理就是把eventBus当作一个中转站！
2. VUE是什么?
答：
-[ ] vue.js（读音 /vjuː/，类似于 view）是一套构建用户界面的渐进式框架
与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视
图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件
和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
3. React 和 Vue 的区别React 和 Vue 的相似之处：
答：
-[ ] 1.使用Virtual DOM
2.提供了响应式（Reactive）和组件化（Composable）的视图组件。
3.将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。
Vue与Angular、React的对比：
1. vue.js更轻量，gzip后只有20K+，angular:56K ,react:44K
2. vue.js更易上手，学习曲线平稳
3.吸收两家之长，有angular 的指令和 react组件化思想
优缺点：
优点：体积小。接口灵活。侵入性好，可用于页面的一部分，而不是整个页面。扩展性好。源码规范简洁。代码较为活跃，作者是中国人，可在官方论坛中文提问。github9000+。基于组件化的开发。它是一个轻量级 mvvm框架、数据驱动+组件化的前端开发、社区完善
缺点：社区不大，如果有问题可以读源码。功能仅限于view层，Ajax等功能需要额外的库。对开发人员要求较高。开发的话，需要 webpack，不然很难用，最好配合es6。
4. v-show 和 v-if的选择
答：
-[ ] v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
5. Vue.js核心思想
答：
-[ ] Vue.js是一个提供MVVM数据双向绑定的库，专注于UI层面，核心思想是：数据驱动、组件系统。
数据驱动：
Vue.js数据观测原理在技术实现上，利用的是ES5Object.defineProperty和存储器属性: getter和setter（所以只兼容IE9及以上版本），可称为基于依赖收集的观测机制。核心是VM，即ViewModel，保证数据和视图的一致性。
组件式编程
6. template参数选项的有无对生命周期的影响
答：
-[ ] 1.如果Vue实例对象中有template参数选项，则将其作为模板编译成render函数
2.如果没有template参数选项，则将外部的HTML作为模板编译（template），也就是说，template参数选项的优先级要比外部的HTML高
3.如果1,2条件都不具备，则报错
7.
实际工作部分
1. 怎么定义vue-router的动态路由？怎么获取传过来的动态参数？
答：
-[ ]对path属性加上/:id。 使用router对象的params.id
2. vue-router有哪几种导航钩子
答：
-[ ] 1. vue-router提供的导航钩子主要用来拦截导航，让它完成跳转或取消
三种：
第一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
第二种：组件内的钩子；
第三种：单独路由独享组件
3. 说出至少4种vue当中的指令和它的用法？
答：
-[ ] v-if：判断是否隐藏；
v-for：数据循环出来；
v-bind:class：绑定一个属性；
v-model：实现双向绑定
4. 8、简述一些vue项目中文件构成？
答：
-[ ] build文件夹：主要就是webpack的配置；
Config文件夹：主要的就是index.js 这个文件进行配置代理服务器
Src文件夹：
“assets”共用的样式和图片
“components”业务代码存放
“router”路由
“APP.vue”vue 文件入口界面
“main.js”对应App.vue创建的实例，也是入口文件，对应 webpack.base.config.js里的入口配置
Static文件夹：静态资源
Pack.json:scripts里面设置命令，例如设置了dev用于调试则我们开发时输入的是npm run dev ；例如设置了build 则是输入 npm run build 用于打包;另一部分是这里可以看到我们需要的依赖包,在dependencies和devDependencies中，分别对应全局下载和局部下载的依赖包
网友评论