Vue学习笔记——知识点

1、数据绑定{{}}
备注：
vue 属性
new vue= ({
	el:#ID,
	data:{
		//val
	},
	mothods:{
		//方法
	}
})
2、v-html ="massage" 输出html值 
3、v-bind html属性值
4、v-  特殊属性
5、v-on 监听dom事件
6、v-model 双向绑定事件
7、 {{ val | val }}  <div v-bind:id="rawId | formatId"></div>  | 过滤器
8、v-bind:href  = :href   v-on:click =  @click  
9、v-if | v-if v-else | v-if  v-else-if  v-else-if v-else  if/else/elseif 表达式
10、v-show 展示元素
11、v-for 
12、computed vs methods  computed基本依赖缓冲，只有数据发生变化时候调用，methods是每次加载调用
13、computed setter  默认只有getter，可以通过setter来重新匹配一个  在computed site  get:fuction(){}
14、watch 监听事件  vue.$watch('function',fuction(val,val){})
15、v-bind:class css样式绑定
   1)、<div v-bind:class="{ active: isActive }"></div>
   2)、<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
   3)、 <div id="app">
		  <div v-bind:class="classObject"></div>
		</div>
   4)、<div v-bind:class="[activeClass, errorClass]"></div>
   5)、<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
   6)、<div id="app">
			<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
		</div>
   7)、<div id="app">
		  <div v-bind:style="styleObject">菜鸟教程</div>
	   </div>
   8)、
16、事件修饰符
	<!-- 阻止单击事件冒泡 -->
	<a v-on:click.stop="doThis"></a>
	<!-- 提交事件不再重载页面 -->
	<form v-on:submit.prevent="onSubmit"></form>
	<!-- 修饰符可以串联  -->
	<a v-on:click.stop.prevent="doThat"></a>
	<!-- 只有修饰符 -->
	<form v-on:submit.prevent></form>
	<!-- 添加事件侦听器时使用事件捕获模式 -->
	<div v-on:click.capture="doThis">...</div>
	<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
	<div v-on:click.self="doThat">...</div>

	<!-- click 事件只能点击一次，2.1.4版本新增 -->
	<a v-on:click.once="doThis"></a>
17、按建别名
	.enter
	.tab
	.delete (捕获 "删除" 和 "退格" 键)
	.esc
	.space
	.up
	.down
	.left
	.right
	.ctrl
	.alt
	.shift
	.meta
	
18、vue.js  v-model双向绑定
	view 通过viewmodel 进行dom listeners vue 去 javascript model 获取对像 
	获取对像 返回 通过vue 数据绑定到指定的dom  显示到view中

19、v-model.lazy  修饰符
20、v-model.number 自动转换为数值
21、v-model.trim  自动过滤收尾空格
22、组件可以扩展 HTML 元素，封装可重用的代码。
23、使用 Vue.component(tagName, options)  tagName组件名称 options 参数
24、局部组件  在同页面中定义，只在当前页面中使用。 使用new Vue({,component:''})来定义
25、全部组件  在页面中使用 Vue.component 来定义
26、Prop 父组件传递过来一的自定义属性，  父通过props传给子组件，子组件可以通过声明props来声明prop
27、动态Prop  使用v-bind 绑定一个属性给html
28、prop是单向绑定 父发生变化会传给子，但是子发生变化不会传给父
29、prop验证
	type 可以是下面原生构造器：
	String
	Number
	Boolean
	Function
	Object
	Array
	type 也可以是一个自定义构造器，使用 instanceof 检测。
30、子组件把数据传回到父组件 需要用到的就是自定义事件
31、v-on 绑定自定义事件
	$on(eventName)   监听事件
	$emit(eventName) 触发事件
32、通过Vue.directive('focus',function(){}) 来注册一个全局指令
33、通过new Vue({directive:{}} 来注册一个局部指令
34、钩子函数
	指令定义函数提供了几个钩子函数（可选）：

	bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
	inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
	update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
	componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
	unbind: 只调用一次， 指令与元素解绑时调用。
	钩子函数参数
	钩子函数的参数有：
	el: 指令所绑定的元素，可以用来直接操作 DOM 。
	binding: 一个对象，包含以下属性：
	name: 指令名，不包括 v- 前缀。
	value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。
	oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
	expression: 绑定值的表达式或变量名。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
	arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
	modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
	vnode: Vue 编译生成的虚拟节点。
	oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
35、路由
36、过渡