自己用的vue总结

定义

vue是一款渐进式前端框架，由底向上增量开发，Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 ，Vue.js 也能完美地驱动复杂的单页应用。

vue基础

模板（视图）

封装好的应用程序，它只是js文件的封装。

业务逻辑

指令

文本渲染：{{}}、v-text、v-html，
属性绑定：v-bind：title、:title,
事件：v-on：函数、或者 @ 函数
修饰符：v-on.once：执行一次事件、v-on.stop：阻止事件冒泡。
按键修饰符：v-on.enter：回车按键、
v-on.esc：退出按键、等等
表单：v-model,用于实现双向绑定；
修饰符：v-model.lazy：懒加载、v-model.number：数字。
判断条件：v-if、v-else-if、v-else、v-show：v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
循环：v-for="(item,index) in linst" :key=“item”
class的用法：:class="“属性绑定、:class=”{key:val,key2:val2}" 对象方式–val值为真，key对应class会绑定上、:class="[name1,name2]" 数组方式
style的用法：:style="{key:val,key2:val2}"对象形式 驼峰css名称书写 font-size 改变为 fontSize、:style=“styles” styles 是data中定义的一个对象

vue的参数

模板指定：el（指定vue的模板）、template
数据：data（指定vue的初始数据）
方法：methods
计算：computed（从现有数据计算出新的数据）
监听：watch（监听数据的变化）
过滤：filters
自定义指令：directives
生命周期：创建前后：beforeCreate、created（当vue创建完毕 可以获取到this）、挂载前后：beforeMount、mounted（获取dom）；更新前后：beforeUpdate、updated；
卸载前后：beforeDestroy、destroyed(移除监听和事件)
props属性、mixin混合、路由守卫、components组件、filters 过滤管道
（数据的格式显示）
{{num|price}}
{{num|price("$")}}
filters:{
price:(val,type){
return “type”+val;
}
}

vue组件

全局组件：
整个项目不用注册Juin可以直接使用
定义：Vue.component(名称，参数对象)、Vue.component(“Count”{template,data,methods})
局部组件：
谁注册，谁使用
定义
var Counter = {template:"",methods,…}
注册
components：{Counter}
使用


驼峰式写法
组件的数据传递props 父传子

props验证默认值：

	props:{type:Number,default:1}
	Numbr,String,Object,Array,Boolean

组件的单向数据流：
父传入给子组件的数据时单向的 是只读
（保证组件的数据更改，不影响其他组件）
传参初始化：
父组件的值传入子组件，子组件接收。
props:[“count”]
created(){this.num = this.count}
(可以修改num的值)
组件的插槽
默认插槽：

	
   
嵌入内容

		

具名插槽：

		
   
嵌入内容

		

属性的 .sync 修饰符：

	:visible.synic="flag"
		:visible="flag"
		@update="flag = $event"
	< div v-if="visible">
       
	props:{visible:{type:Boolean,default:fasle}}