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、过渡