Vue
2018-07-11 15:14:23 69 举报AI智能生成
Vue基础使用
作者其他创作
大纲/内容
mustache
插值
html
v-html
文本
{{}}
html特性
v-bind:属性
: 简写
javascript表达式
{{ msg}}
{{ 1 + 1}}
{{ true ? 1 : 0}}
<a @click="'btn' + click"></a>
指令
v-前缀
值为单个表达式
参数
只能接受一个参数
修饰符 .结尾
触发指定事件
缩写
v-bind
:
v-on
@
计算属性和侦听器
computed
get
set
methods
watch
Class与Style绑定
绑定HTML Class
对象语法
<div :class ="{active : isActive}"></div>
data : {
isActive : true
}
isActive : true
}
:class="classObject"
data : {
classObject : {
active : true
}
}
classObject : {
active : true
}
}
计算属性
computed : {
classObject(){
return {
active : true
};
}
}
classObject(){
return {
active : true
};
}
}
数组语法
:class=[activeClass]
data : {
activeClass : 'active'
}
activeClass : 'active'
}
:class=[{active : isActive}, errorClass]
data : {
isActive : true,
errorClass : 'error'
}
isActive : true,
errorClass : 'error'
}
:class=[isActive ? activeClass : '', errorClass]
data : {
isActive : true,
errorClass : 'error',
}
isActive : true,
errorClass : 'error',
}
用在组件
绑定内联样式
对象语法
:style={color : activeColor}
data : {
activeColor : 'red'
}
activeColor : 'red'
}
:style=classObject
data : {
classObject : {
color : 'red',
fontSize : '30px'
}
}
classObject : {
color : 'red',
fontSize : '30px'
}
}
计算属性
computed : {
classObject(){
return { color : 'red'};
}
}
classObject(){
return { color : 'red'};
}
}
数组语法
:style=[activeClass, errorClass]
data : {
activeClass : {
color : 'blue',
},
errorClass : {
fontSize : '30px',
}
}
activeClass : {
color : 'blue',
},
errorClass : {
fontSize : '30px',
}
}
多重值
:style = {display : ['-webkit-box', '-ms-flexbox', 'flex']}
自动添加前缀
条件渲染
v-if
可作用于template元素
v-else-if
v-else
可使用key复用元素
v-show
只控制元素的display属性
不可用于template元素
v-if vs v-show
v-if惰性
用于切换次数少
v-show始终求值
切换次数多
v-if and for
列表渲染
用 v-for 把一个数组对应为一组元素
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
data : {
items : [
message : 'hello'
]
}
items : [
message : 'hello'
]
}
一个对象的 v-for
<ul id="example-1">
<li v-for="(v, k, i) in obj">
{{ `${k} - ${v} - ${i}` }}
</li>
</ul>
<li v-for="(v, k, i) in obj">
{{ `${k} - ${v} - ${i}` }}
</li>
</ul>
data : {
obj : {
name : 'n',
sex : 'M',
}
}
obj : {
name : 'n',
sex : 'M',
}
}
key
<ul id="example-1">
<li v-for="(v, k, i) in obj" :key="i">
{{ `${k} - ${v} - ${i}` }}
</li>
</ul>
<li v-for="(v, k, i) in obj" :key="i">
{{ `${k} - ${v} - ${i}` }}
</li>
</ul>
data : {
obj : {
name : 'n',
sex : 'M',
}
}
obj : {
name : 'n',
sex : 'M',
}
}
数组更新检测
变异方法
push
pop
shift
unshift
splice
reverse
sort
替换数组
用新数组直接替换现有数组即可
注意事项
无法检测，通过索引赋值
可以用Vue.set解决
splice也可以
对象更改检测注意事项
无法检测动态添加的属性
可用Vue.set
显示过滤/排序结果
使用计算属性/方法
一段取值范围的 v-for
v-for="i in 10"
v-for on a <template>
<template v-for="i in 3" v-if="i % 2 === 0">
<li> {{ i }} </li>
</template>
<li> {{ i }} </li>
</template>
v-for with v-if
一个组件的 v-for
事件处理
监听事件
v-on/@
事件处理方法
@click="click"
methods : {
click(){}
}
click(){}
}
内联处理器中的方法
@click="say()"
事件修饰符
.stop
阻止事件传播
<a @click.stop="click"></a>
.prevent
阻止事件
.passive
.once
只处理一次
.self
只处理当前元素，不处理子元素
.capture
元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
按键修饰符
常用按键别名
.enter
delete
esc
space
up
down
left
right
.tab
自定义按键别名
Vue.config.keyCodes.别名=键值
使用方式
@keyup.enter
系统修饰键
.ctrl
@click.ctrl.up
.shift
.meta
.alt
.exact
精准控制
只能按下特殊键位才触发
@click.alt.67.exact
alt+c，其余键位不触发
鼠标按钮修饰键
.left
@click.left
.right
.middle
为什么在HTML中监听事件
扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。
表单输入绑定
基础用法
文本
<input type="text" v-model="name"/>
单选框
<input type="radio" v-model="sex"/>
复选框
<input type="checkbox" v-model="movies"/>
下拉框
<select v-model="character"></select>
文本域
<textarea v-model="desc"></textarea>
值绑定
下拉框
<select v-model="character">
<option :value="{v : 1, id : 1}"></option>
</select>
<option :value="{v : 1, id : 1}"></option>
</select>
单选框
<input type="radio" :value="man" v-model="sex"/>
多选框
<input type="checkbox" v-model="movies"
true-value = ""
false-value = ""
/>
true-value = ""
false-value = ""
/>
修饰符
.lazy
v-model.lazy
.number
v-model.number
.trim
v-model.trim
组件 基础
基本示例
组件的复用
data必须是一个函数
组件的组织
通过Prop向子组件传递数据
单个根元素
通过事件向父级组件发送消息
使用事件抛出一个值
在组件上使用v-model
:value绑定属性
@input 发送属性值
通过插槽分发内容
动态组件
解析DOM模板时的注意事项
0 条评论
下一页
