# 学Vue
2019-07-04 15:07 ylka 阅读(114) 评论(0) 编辑 收藏 举报2019-07-03 17:02:45
模板语法(基于html)
- 改变文本内容使用插值表达式:双括号 {{ msg }}
- 渲染html,用 v-html
- 改变html标签属性的值使用 v-bind
- 一些指令:v-if,v-for,v-else-if,v-else
- 绑定事件:v-on
- v-on,v-bind 支持动态属性
v-bind:[attributeName]
v-on:[eventName]
- 缩写
v-on:click -> @click
v-bind:id -> :id
计算属性(computed)
- 侦听功能,动态计算数据
- computed 与 data 平级
- 缓存:依赖的数据没变,其它地方使用都直接用缓存数据
- 有 setter 和 getter
- 当需要在数据变化时执行异步或开销较大的操作时,用侦听器watch
class绑定 - v-bind:class
- 可以传一个对象
<div v-bind:class="{ active: isActive }"></div>
- 可与 class 共存
- 可以传一个对象,也可以传一个返回对象的计算属性
- 可以传一个数组
- 组件模板中的 class 不会被根元素上面的 class 覆盖
- style 绑定与 class 绑定类似
条件渲染(v-if)
- Vue会复用已有元素
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
以上,input 被复用,不要复用的话,用 key
属性即可。
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
列表渲染(v-for)
- in\of 都可以
<div v-for="item in items"></div>
<div v-for="item of items"></div>
-
支持可选的第二个参数,即当前项的索引
<div v-for="(item, index) in items"></div>
-
可以遍历一个对象,支持3个参数
<div v-for="(value, name, index) in object">
-
尽可能使用 v-for 时提供 key 属性
-
Vue 不能检测以下数组的变动
vm.items[1] = 'x' // 不是响应性的
替代方法:// Vue.set Vue.set(vm.items, indexOfItem, newValue) // Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue)
-
当在组件上使用 v-for 时,key 现在是必须的
事件处理
-
事件修饰符,可以串联多个修饰符
1.stop
阻止事件继续传播
2.prevent
阻止默认行为
3.capture
4.self
5.onece
6.passive
-
按键修饰符
1.enter
2.tab
3.delete
4.esc
5.space
6.up
7.down
8.left
9.right
通过全局 config.keyCodes 自定义案件修饰符别名:
Vue.config.keyCodes.f1 = 112
-
系统组合按键
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
表单输入绑定(双向绑定)
-
双向绑定 MVVM 就是 model 到 view,view 到 model
-
适用的表单元素
<input>
,<textarea>
,<select>
,checkbox
,radio
-
v-model 其实是语法糖
1<text>
,<textarea>
使用value
作为 prop 和input
事件
2<checkbox>
,<radio>
使用checked
作为 prop 和change
事件
3<select>
使用value
作为 prop 和change
事件<input v-bind:value="searchText" v-on:input="searchText = $event.target.value" >
-
修饰符
1.lazy
<!-- 在“change”时而非“input”时更新 --> <input v-model.lazy="msg" >
2
.number
3.trim
组件
-
data 必须是一个函数
data: function () { return { count: 0 } }
-
通过 prop 向子组件传递数据
-
子组件可调用父级组件的事件,并能传递值给父组件
// 子组件 <button v-on:click="$emit('enlarge-text', 0.1)"> Enlarge text </button> // 父级组件 <blog-post ... v-on:enlarge-text="postFontSize += $event" ></blog-post> // 或者 父级组件使用函数 <blog-post ... v-on:enlarge-text="onEnlargeText" ></blog-post>
methods: { onEnlargeText: function (enlargeAmount) { this.postFontSize += enlargeAmount } }
-
组件 v-model
<custom-input v-model="searchText"></custom-input> Vue.component('custom-input', { props: ['value'], template: ` <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" > ` })