vue部份 1、优点 2、vue父组件向子组件传递数据 3、子组件向父组件传递风波 4、v-show和v-if指令得共同点和不同点 5、让CSS只在当前组件中起作用 6、得作用 7、如何获取dom 8、vue当中得指令和它得用法 9、vue-loader是哪些?用途是? 10、为什么用key 11、axios及安装 12、v-model的使用 13、vue.cli项目中src目录每位文件夹和文件的用法 14、computed和watch的使用场景 15、v-on可以窃听多个方式? 16、$nextTick的使用 17、vue组件中data为何必须是一个函数 18、渐进式框架的理解 19、vue在单向数据绑定式的实现 20、单页面应用和多页面应用区别及缺点 21、vue项目中为何要在列表组件中写key,其作用是?
key是给每一个vnode的惟一id,可以借助key,更准确,更快的领到oldVnode中对应的vnode节点
22、父组件和子组件生命周期钩子执行次序 23、nextTick的理解
当更改了data的值之后马上获取这个dom元素的值,是不能获取到更新后的值,需要使用$nextTick这个反弹,让修改后的data值渲染更新到dom元素然后再获取,才能成功
24、vue组件中data为何必须是一个函数
再component中,data必须以函数的方式存在,不可以是对象。组建中的data写出一个函数,数据以函数返回值的方式定义,这样每次复用组件的时侯,都会返回一份新的data,相当于每位组件实例都有自己私有的数据空间,它们只负责各自维护的数据,不会引起混乱。
25、vue和jQuery的区别 26、delete和Vue.delete删掉字段的区别 27、SPA首屏加载慢怎么解决
安装动态懒加载所需插件;使用CDN资源。
28、vue项目是打包了一个js文件,一个css文件,还是多个?
根据vue-cli脚手架规范,一个js文件,一个cs文件
29、vue更新字段时触发视图更新的方式
push(); pop(); shift(); unshift(); splice(); sort(); reverse()
30、vue生命周期及其作用 作用:生命周期中有多个风波钩子,让我们在控制整个Vue实例的过程中更容易产生好的逻辑 31、第一次页面加载会触发哪几个钩子 32、vue获取数据通常在那个周期函数 33、created和mounted的区别 34、vue生命周期的理解 35、vuex是哪些? 36、vuex有哪几种属性?
State:基本数据(数据源储存地)
Getters:从基本数据派生下来的数据
Mutations:提交修改数据的方式,同步!
Actions:像一个装潢器,包裹mutations,使之可以异步
Modules: 模块化Vuex
37、vue全家桶
vue-cli、vuex、vueRouter、Axios
38、vue-cli工程常用的npm命令? 39、vue-cli工程中每位文件夹和文件的好处 40、v-if和v-show有哪些区别 性能消耗 使用场景 41、v-if和v-for的优先级
v-for和v-if同时使用,有一个先后运行的优先级,v-for比v-if优先级更高,这就说明再v-for每次的循环形参中每一次调用v-if的判定,所以不推荐v-if和v-for在同一标签中同时使用
42、vue常用的修饰符 事件修饰符 v-model的修饰符 按键风波修饰符 系统修饰符 键盘按键修饰符 43、vue风波中怎样使用event对象
<button @click="Event($event)">事件对象button>
44、组件传值形式 父传子:子组件通过props[‘xx’]来接收父组件传递的属性xx的值子传父:子组件通过this.$emit(‘fnName’,value)来传递,父组件通过接收fnName风波方式来接收反弹其他方法:通过创建一个bus,进行传值使用vuex 45、vue中子组件调用父组件的方式 46、让CSS只在当前组件中起作用
在组件中的style上面加上scoped
47、获取dom
ref = “domName” 用法:this.$refs.domName
48、vue路由跳转
<router-link :to="{name:'home', params: {id:1}}">
<router-link :to="{name:'home', query: {id:1}}">
<router-link :to="/home/:id">
//传递对象
<router-link :to="{name:'detail', query: {item:JSON.stringify(obj)}}"></router-link>
<router-link :to="{name:'home', params: {id:1}}">
<router-link :to="{name:'home', query: {id:1}}">
<router-link :to="/home/:id">
//传递对象
<router-link :to="{name:'detail', query: {item:JSON.stringify(obj)}}"></router-link>
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
1.路由配置:
name: 'home',
path: '/home'
2.跳转:
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
3.获取参数
html取参: $route.query.id
script取参: this.$route.query.id
1.路由配置:
name: 'home',
path: '/home/:id'(或者path: '/home:id')
2.跳转:
this.$router.push({name:'home',params: {id:'1'}})
注意:
// 只能用 name匹配路由不能用path
// params传参数(类似post) 路由配置 path: "/home/:id" 或者 path: "/home:id"否则刷新参数消失
3.获取参数
html取参:$route.params.id
script取参:this.$route.params.id
1.路由配置:
name: 'home',
path: '/home/:id'
2.跳转:
this.$router.push({path:'/home/123'})
或者:
this.$router.push('/home/123')
3.获取参数:
this.$route.params.id
49、vue.js单向绑定的原理 50、computed和watch的区别 51、computed和methods的区别 53、axios