> 慢慢增加,慢慢从有道迁过来 #### 绑定和渲染 1. 数据绑定 > {
{message}}
只绑定一次 {
{*message}} 2. 双向绑定 > {
{message}} 3. 绑定表达式 > {
{message?message:”init data”}} 4. 绑定HTML标签 >
5. v-show(操作的是样式,不支持template) >
hello
6. v-if(操作的是DOM) >
world
7. v-else(跟在v-if或v-else后面) 8. v-for >
- { {item}}
- { {index}}{ {item}}
-
{ { index }}. { { key }} : { { value }}
- v-bind
link
实例方法
- 在实例创建后,挂载以前不存在的属性,是不会刷新视图的
vm.$el
–>是一个HTML元素节点,即vm的el属性vm.$data
–>可以直接更改对象数据vm.$watch()
–>监听数据变化
生命周期属性
created
-> 先实例化,在实例化后(检测el)vm.$mount('#app')
-> 手动挂载实例beforeCompile
-> 开始编译之前compiled
-> 编译完成之后ready
-> 插入文档后vm.$destroy()
-> 手动销毁实例beforeDestroy
-> 将要销毁destroyed
-> 销毁实例
计算属性
computed:{ sum:function(){ return this.price*this.count } }
双向绑定,在一个input里面写count,最终价格实时更新在视图
computed:{ sum:{ get(){ return this.price*this.count }, set(val){ this.price = val } } }
解决闪烁
<div v-text="message"></div>
- 推荐用 ↓
[v-cloak]{ display:none; } <div v-cloak> { { message}} </div>
事件绑定
<div v-on:click="add"></div> <div @click="add"></div>
- 需要传参的时候 add后面要跟(),即add(1,$event,2)
methods:{ add:function(e){ console.log(e) } }
- 删除数组元素
remove:function(book){ this.books.$remove(book) }
- 阻止冒泡
<div @click.stop="child">child</div>
- 阻止默认动作
<div @click.prevent="child">child</div>
- 事件只绑定在自己身上
<div @click.self="child">child</div>
- 键盘事件
@keyup.enter="method"
- 延迟事件
@keyup="make | debounce 1000"
单位是毫秒 - 限制条数和从第几条开始显示
v-for="arr in arr1 | limitBy 3 2"
- 过滤数据
v-for="arr in arr1 | filterBy 'zfpx1'" //默认是从所有属性中筛选 v-for="arr in arr1 | filterBy 'zfpx1' in 'name' " //指定从哪个属性中进行筛选
- 排序
v-for="arr in arr1 | orderBy 'name' -1" -> 倒序
样式绑定
- 优雅绑定
:class
->动态绑定
- 普通,样式名
<div :class="class1">123</div>
- 对象语法
<div :class="{class1:true,class2:false}">123</div>
或者直接放个对象进去:class="classObject"
(classObject:{‘bg-danger’:true,’text-primary’:true}) - 数组绑定
<div :class="[class1,class2]">123</div>
数组里面的元素渲染到页页上去的字符串 -
- -
- 普通,样式名
watch
用于监测数据变化
watch:{ 'name':function(val,oldVal){ alert('新值是:'+val+' 旧值是:'+oldVal) } }
V-model
v-model.trim
-> 清除前后空格v-model.number
-> 把输入内容转成数字v-model.lazy
-> 把同步输入框的值与数据转变为在change事件中同步- 复选框 -> model里面是一个数组
<input type="checkbox" id="jack" value=
- v-bind