简单总结一些作者君在面试前初学Vue时整理的基础知识，部分知识在面试中也有所提及，让大家对于Vue有个初步理解
一个Vue示例
var app=new Vue({
el:”#app”， //对应实例的id
data:{//
message:”传入组件的数据(任意类型的数据)”,
seen：false,//是否插入/删除该字段
},
method:{
func:function(){
//自定义的响应数据，无缓存，每次调用必须重新执行，获取组件数据分发为this.message
}
},
//倒勾函数 不允许使用箭头函数 倒勾函数就是组件在不同生命周期执行的函数，常用有created、mounted、updated、destoryed等
created:function(){},//实例在被创建后执行
computed:{//是计算属性 用于模板渲染 一个属性收到多个属性影响 商品购物结算
//用于数据转换，有缓存，对于非响应式依赖数据计算属性后可能不在变化
//计算属性一般计算属性的get方法 和设置属性值set方法，若想使用在函数名前面加set
func1:function(){},//get需要有return返回 ,set直接通过this赋值
}
watch：{//常用于一条数据影响多条数据
//监听到值的变化就会执行回调，在回调中可进行一系列操作 搜索
func1:function(){},
}
//添加组件
component：{
已导入项目中的组件
data可以为对象，也可以为一个函数(用return返回对象)，保证每次复用组件都是返回一个新的data，让各个组件实例维护各自数据
}
//指定方法，只有得到认可的组件才有权访问
provide：function(){
return{getMap:this.getMap}
}
inject：[‘getMap’] //子代组件有权限接收父组件指定方法
filters:{ capitalize:function(value){}//设置过滤规则
render
})
组件注册
Vue.component(
‘todo-item’, //注册的组件名称
props:[‘todo’], //对象,数据由父组件传递 {checked :Boolean}规定传入对象的类型
template:’
- {{todo.test}}
- ’, //组件模板 自己写
template：’#ids’,//模板为一个id=”ids”的template
//组件data建议为一个函数(用return返回对象)，保证每次复用组件都是返回一个新的data，让各个组件实例维护各自数据，共用一份data会导致一变全变了
data(){
return{}
}inheritAttrs：false //禁用attribute继承
model：{
prop：’checked’, //初始化时传入组件的对象
event: ‘change’
}
)
一般在实际项目中都会直接通过import导入对应组件，然后再主页面component中加入组件常用指令
v-bind 绑定属性（绑定在property上）
//title可以为[] v-bind:class=”{active:isActive}” //添加class isActive在data中赋值 v-bind:class=”classObject” // 在data中添加classObject对象 v-bind:style=”{color:activeColor,fontSize:fontSize}” v-model 表单元素输入与应用状态绑定 普通标签 是一种语法糖 对于不同的内部输入元素使用不同的property，并抛出不同事件 示例 < input v-model=”message”> v-if 判断 注v-if 可与 v-else-if v-else 连用 若切换的的元素有多个，则需要用将多个元素包裹起来；v-if只有为真时才会渲染 适合切换不频繁条件场景 示例 v-if=”seen” //切换元素 插入或删除
缩写 :[key]=””
示例v-show 数据切换
注：不支持 和v-else；初始化时即渲染；数据渲染会保留在Dom里，不满足只是通过display:none将节点隐藏 适合切换频繁条件场景
示例
v-show=”ok” //v-for 循环
注：v-for的优先级要高于v-if ，若同时存在就是在v-for中嵌套v-if 尽量使用计算属性解决，注意添加唯一key（否则vue会尽可能修改复用相同元素使differ算法更精确，更快速）
示例v-on 监听事件
缩写 @[key] =””
示例
//监听点击事件，点击时间发生调用组件method中的func函数
v-on:click=”counter+1” //对绑定数据进行操作
v-on:click=” e m i t ( ‘ c l i c k ’ , n , emit(‘click’,n, emit(‘click’,n,event)” //n自定义
v-on =”{focus：onFocus，}” //n自定义事件修饰符
v-on:click.stop //阻止单击事件继续传播
v-on:click.capture //元素自身触发的事件先在此处处理，交由内部元素自己处理
v-on:click.self //当前元素触发，内部元素不触发
v-on:click.once //只触发一次
passive //滚动时触发
.native//在组件根元素监听一个原生事件
v-model.lazy //change事件之后进行同步
v-model.number //用户输入自动转为数值
v-model.trim //用户输入首尾去空
v-on:submit.prevent //提交事件不在重载页面，阻止标签默认行为
键盘修饰符
系统修饰符
鼠标修饰符
v-html 插入innerHtml,不会当成字符串处理，注意xxs攻击
示例v-once 一次性操作 定义静态内容
示例
{{msg}}
v-clock 这个指令保持在元素上指导关联结束编辑 解决初始化慢页面闪动的情况
v-text 更新元素的textContent
v-pre 跳过该元素及其子元素的编译过程，以此加快整个项目编译速度常用函数
Object.freeze(obj) //阻止修改现有的property
app. d a t a / / data // data//调用id为app组件中的数据与方法
this. r o o t . d a t a / / 获 取 根 组 件 数 据 t h i s . root.data //获取根组件数据 this. root.data//获取根组件数据this.parent.data //访问父节点
this. r e f s . u s e r n a m e I n p u t / / 访 问 r e f 为 u s e r n a m e I n p u t 的 子 组 件 t h i s . refs.usernameInput //访问ref为usernameInput的子组件 this. refs.usernameInput//访问ref为usernameInput的子组件this.once(eventName,eventHandler)//一次性侦听一个事件
this. o n ( e v e n t N a m e , e v e n t H a n d l e r ) / / 侦 听 一 个 事 件 t h i s . on(eventName,eventHandler)//侦听一个事件 this. on(eventName,eventHandler)//侦听一个事件this.off(eventName,eventHandler)//停止侦听一个事件
n e x t T i c k / / 当 你 修 改 d a t a 值 后 马 上 获 取 这 个 d o m 元 素 之 值 ， 无 法 获 取 更 新 后 的 值 需 要 使 用 nextTick //当你修改data值后马上获取这个dom元素之值，无法获取更新后的值需要使用 nextTick//当你修改data值后马上获取这个dom元素之值，无法获取更新后的值需要使用nextTick这个回调，让修改后的值渲染到DOM元素之后在获取