常用
vue的优缺点
1.性能高 效率高
2.简单易用
3.前后端分离
4.它不适于seo优化 封装的比较厉害 适合中小型项目
5.不支持低版本的浏览器，最低IE9;
6.首屏加载耗时长，加载整个项目的css/js(可优化)
什么是mvvm
1.model 数据层
2.view 视图层
3.viewModel 根据 model 来更新view 是同步model和view的对象(桥梁)
mvvm 和mvc的区别
1.都是一种设计思想
2.mvc是操作dom来更新ui
3.mvvm是操作数据来更ui
v-show v-if
1.v-show改变的是css的display属性
2.v-if是改变dom是否渲染
3.应用场景: 如果要频繁的显示和隐藏 用v-show 否则使用v-if
v-for 与 v-if 的优先级
v-for的优先级比v-if高。
说出至少 4 种 vue 当中的指令和它的用法
v-if(判断是否隐藏)
v-for(把数据遍历出来)
v-bind(绑定属性)
v-model(双向绑定)
父子组件传递数据
1.父向子传递
<Child :msg='num' />(num是定义在父组件的data中的数据)
子组件
props: ['msg']
props: {
msg: {
required: true,
type: Number,
default: 0
}
}
2.子向父传递
子组件
通过$emit <button @click='deliverMsg' ></button>
deliverMsg () {
childMsg 为父组件调用子组件上定义的方法名字
this.$emit('childMsg','传递的数据')
}
父组件
<Child @childMsg='getChildMsg'/>
getChildMsg(msg) {
console.log(msg); // 传递的数据
}
父子组件调用事件
方法一
this.$parent.事件名() 子调父
方法二(子调父的方法)
父组件
<child @fatherMethod="fatherMethod"></child>
fatherMethod() {
console.log('测试');
}
子组件
<button @click="childMethod()">点击</button>
childMethod() {
this.$emit('fatherMethod');
}
方法三(父调子的方法)
父组件
<child ref="child"></child>
click() {
this.$refs.child.$emit('childMethod','发送给方法一的数据') // 方法1:触发监听事件
this.$refs.child.callMethod() // 方法2:直接调用
},
子组件
export default {
mounted() {
this.monitoring() // 注册监听事件
},
methods: {
monitoring() { // 监听事件
this.$on('childMethod', (res) => {
console.log('方法1:触发监听事件监听成功')
console.log(res)
})
},
callMethod() {
console.log('方法2:直接调用调用成功')
},
}
}
生命周期
beforeCreate
created
beforeMounte
mounted
beforeUpdate
updated
beforeDestroy
destroy
第一次页面加载调用的钩子函数
beforeCreate
created
beforeMounte
mounted
vue.js的两个核心是什么？
数据驱动和组件化。
vue 的双向绑定的原理是什么
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的
vue常用的修饰符
v-model.number="age"
v-on:click.stop="doThis"
v-on:submit.prevent="onSubmit"
等等
vue中key值的作用
key的作用主要是为了高效的更新虚拟DOM。
另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们
vue的动态组件。
多个组件通过同一个挂载点进行组件的切换，is的值是哪个组件的名称，那么页面就会显示哪个组件。
主要考查这 component的 is属性。
