Vue零碎知识篇

1、Vue中的数据绑定
绑定数据有三种方式：
1】插值
也就是双大括号{ {name}}的形式，以文本的形式和实例data中对应的属性进行绑定
2】v-bind
双大括号写法不能在 HTML 属性中使用，所以，v-bind用于v-bind动态给HTML的属性绑定指令
比如：v-bind:class、v-bind:id、v-bind:value、v-bind:style
3】v-model
v-model 用在表单控件类型的html标签上面的，用于实现双向数据绑定，所以如果你用在除了表单控件以外的标签是没有任何效果的。
比如input控件：、select 控件：
v-model 的本质是 v-bind:value + v-on:input的语法糖

2、v-model
v-model其实是个语法糖，它实际上是做了两步动作：
1】通过v-bind去绑定数据value（v-bind:value）
2】v-on:input 去触发输入事件input
等同于：
<input type=“text” v-bind:value=“username” @input=“username=$event.target.value” />
用 js 来实现v-model：

3、v-if与v-show的区别
相同点：v-if与v-show都可以动态控制dom元素显示隐藏
不同点：
v-if：动态增删dom元素，在切换过程中会有更多性能上的花销，相当于display:none;
v-show：动态显示隐藏dom元素，隐藏则是为该元素添加visibility:hidden，dom元素还在，具有较高的初始渲染消耗
如果需要频繁地切换，则使用v-show指令比较好，反之则使用v-if 比较好

4、v-on可以监听多个方法吗
可以

5、vue常见修饰符
a、表单修饰符
v-model.lazy：在我们输入完所有东西，光标离开才更新视图
v-model.trim：去除前后空格
v-model.number：
如果你先输入数字，那它就会限制你输入的只能是数字
如果你先输入字符串，那它就相当于没有加.number
b、事件修饰符
.stop：阻止事件冒泡
.prevent：用于阻止事件的默认行为，例如，当点击提交按钮时阻止对表单的提交。相当于调用了event.preventDefault()方法
.once：这个修饰符的用法也是和名字一样简单粗暴，只能用一次，绑定了事件以后只能触发一次，第二次就不会触发
c、v-bind修饰符
.sync：实现双向绑定

6、vue-cli构建的项目，如何升级vue的版本
npm install -g @vue/cli

7、vue事件中如何使用event对象
将一个特殊变量 $event 传入到回调中

8、v-for 与 v-if 的优先级
当v-for和v-if在同一个元素标签上时，v-for优先级高于v-if，也就是说在v-for的每次循环运行中都会调用v-if的判断，所以会出现问题，vue官网推荐将v-if移到父元素

9、Vue子组件调用父组件的方法
a、子组件中通过this.$emit或者this.$parent.event来调用父组件的方法（相反，父调子的话this.$chi$