框架

框架与库的区别：框架有自己的书写规则而库只是单纯被引用其方法

VUE 渐进式框架（可简单引用或用其中状态管理等功能）
VUE应用：new Vue()方法中传对象对象属性大概有[el:’#元素id’][data方法:message],这样的话就可直接在HTML中挂在的id元素内书写{{message}}就可在页面中显示该message的值
new的Vue对象自带的属性或方法可通过对象.$属性快速查找
Vue生命周期：出生到死亡的过程
before加状态（状态首字母大写）：该状态之前
created:被创建调用
mounted：挂载时调用
updated:更新时调用
destroyed:被销毁调用

Vue语法的使用(作为HTML的属性用)
v-cloak 由于Vue渲染需要时间页面刷新是会先显示语法模板（{{}}），挂上该属性后再在样式表中书写[v-cloak]{display: none;}就可以实现在加载是显示语法模板的情况
v-html=""：引号的Vue属性值为HTML字符串会被解析为HTML，{{}}只会解析为字符串
v-bind: 跟一个标签属性，该属性的值就可动态 可简写为：。它的属性的值也可是个对象，对象的值为属性的值（多作为类名或样式的传输）如：
test: { abc: true, ghi: false //页面中不会显示 }
v-if=""/v-else-if/v-else 表达式的真假取决该元素显不显示 （v-show相同且该表达式即使为false也会渲染不过该渲染的元素display为none）
watch 可作为Veu的属性也可作为一个单独的方法Vue.$watch(‘元素’，方法（新值，旧值）)用于监听值的改变：方法的watch有一个返回值可以让一个变量等于它再将该变量作为函数调用就可以停止监听（因为watch必须有返回的方法被调用才会停止）
key 由于Vue的渲染机制为了效率会复用之前渲染过的元素导致一些情况下某些标签不会更新；将key等于一个唯一值挂在重复的标签上就可解决

v-for="item in items"
Vue中for会比if先执行（for优先级高于if）
items为被便利的变量 item 接受 标签内为 item的属性
item 为‘不定参数’两个值时：（item,index）index为便利的下标 三个值时（value,key,index）key为便利的属性名

注意：Vue中变量的改变方法会全部重新执行,但属性只会重新渲染涉及到的变量。
	 且Vue无法无法检测直接改变数组某一项和直接改变数组长度

事件绑定（@事件名=“方法名”）
事件修饰符（v-on:click.修饰符="**"）

stop：//阻止冒泡
prevent：//阻止默认事件
self：//只在当前元素触发
once://只触发一次
enter：//按键回车
esc：//按键件返回
space ：//按键空格
up，down，left，right：//上下左右
native//表示组件监听DOM原生事件
表单修饰
v-model.lazy  //lazy会在（input）失去焦点触发渲染
number  //转换为数字
trim  //去除左右空格
等....

Vue组件
（Vue.component(元素名, // 元素内容 template:该元素内容必须都在一个根元素下， data: function () {//数据为返回值 return { name: 'zhangsan' } }, methods:{//方法} );）//局部组件书写在Vue对象中

props: ['元素属性名‘] 用于传递值给子组件；也可设为一个对象在对象中对属性进行验证

非父子组件通信
新创建一个Vue对象保存，用该对象触发$emit的事件（$emit(‘test’, ‘参数’)）接收的组件用该对象$on监听该事件this.$parent，.$children 访问组件所有父组件或子组件

插槽 slot
在组件元素内容中书写为标签，标签为空渲染组件在HTML中的内容，不为空的为默认值 HTML用v-slot元素内容的slot添加name以区分元素插入位置

过滤器 Vue.filter()

全局：Vue.filter('my-filter1', function (value) {})
局部：filters: {'my-filter2': function (value) {}}

在HTML中与属性值名用 | 隔开
如：<p>{{ name | my-filter1 | my-filter2 }}</p>
my-filter1是作为函数调用所以可传参数且相比计算属性过滤器影响HTML整洁但可多重过滤（|隔开多个方法）

自定义属性
使用Vue.directive('focus',{ inserted : function(el){ el.focus();//input默认选中 } });注册focus为Vue属性