vue实例上常见属性和方法
vm.$el 指代的是当前的元素vm.$nextTick 延迟执行 dom操作必备vm.$watch 监控数据变化vm.$data 当前数据对象vm.$options 所有的选项vm.$setvm.$mount 挂载 单元测试 在内存中挂载vue实例 此时只能用$mount属性vue中的指令
template
vue自带的标签，能实现循环且渲染时不带标签名，可以理解为透明容器，template上不能增加key属性，需要给真实的元素添加key。
<template v-for="(item,key) in fruits"> <li :key="key">{{item}}</li> </template>v-if v-else
<div v-if="false"> <span>1</span> <input type="text" key="1"> </div> <div v-else> <span>2</span> <input type="text" key="2"> </div> <!--或者--> <template v-if="false"> <span>1</span> <input type="text" key="1"> </template> <template v-else> <span>2</span> <input type="text" key="2"> </template>v-show
<!--需要注意：v-show不能用在template标签上--> <div v-show="false"> <span>1</span> </div> <div v-show="true"> <span>2</span> </div>注意：v-if / else和v-show的区别：
v-if(else)处理是否添加dom节点到页面上，v-show则是在操作style,显示和隐藏，
另外v-show不能用在template标签上，即 <template v-show="false">不生效</template>
v-html
可以解析字符串里的标签，需要注意的是，搭配表单双向绑定时，不要直接把输入的内容显示出来，防止xss攻击。
XSS（Cross Site Scripting）攻击全称跨站脚本攻击，是为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆，故将跨站脚本攻击缩写为XSS，XSS是一种经常出现在web应用中的计算机安全漏洞，它允许恶意web用户将代码植入到提供给其它用户使用的页面中。比如这些代码包括HTML代码和客户端脚本。（摘自百度百科）
v-model
<input type="text" :value="value" @input="input"> <!--语法糖 实现双向绑定--> <input type="text" v-model="value">checkbox
多个checkbox时，需要给每一个设置value <!--一个复选框--> <input type="checkbox" v-model="checks">{{checks}} <!--多个复选框--> <input type="checkbox" v-model="checks" value="1"> <input type="checkbox" v-model="checks" value="2"> <input type="checkbox" v-model="checks" value="3">{{checks}}radio
实现radio的分组，也可以通过v-model
<input type="radio" v-model="gender" value="male">男 <input type="radio" v-model="gender" value="female">女select
<select v-model="select"> <option value="0" disabled>请选择</option> <option v-for="o in options" :value="o.id" :key="o.id">{{o.title}}</option> </select>filter
需要对展现的数据进行包装，但是不能改变原来的数据过滤器和指令都是没有this指向的filter定义的方法也可以绑在单独的实例里，但是一般都是直接绑在Vue上 <div id="app"> {{a | toUpper(3)}} </div> data(){ return { a:'12345' } }, Vue.filter('toUpper',function(value,count=1){ return value.slice(0,count).toUpperCase()+value.slice(count) })自定义指令
一个指令定义对象可以提供如下几个钩子函数
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
<div v-color="'red'">颜色</div> <!-- el 元素--> <!-- bingdings 绑定的属性--> <!-- vnode 虚拟节点--> <!-- oldVnode 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用--> Vue.directive('color',function(el,bingdings,vnode){ el.style.border = `1px solid $(bingdings.value)` })常见场景（原理:事件代理）
let vm = new Vue({ el:'#app', directives:{ 'click-outside'(el,bingdings,vnode,oldVnode){ //绑定给document 捕获到事件发生在谁身上 document.addEventListener('click',(e)=>{ if(!el.contains(e.target)){ vnode.context[bingdings.expression]() } }) } } })
