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 : {<br> isActive : true<br>}
:class="classObject"
data : {<br> classObject : {<br> active : true<br> }<br>}
计算属性
computed : {<br> classObject(){<br> return {<br> active : true<br> };<br> }<br>}
数组语法
:class=[activeClass]
data : {<br> activeClass : 'active'<br><br>}
:class=[{active : isActive}, errorClass]
data : {<br> isActive : true,<br> errorClass : 'error'<br><br>}
:class=[isActive ? activeClass : '', errorClass]
data : {<br> isActive : true,<br> errorClass : 'error',<br>}
用在组件
绑定内联样式
对象语法
:style={color : activeColor}
data : {<br> activeColor : 'red'<br><br>}
:style=classObject
data : {<br> classObject : {<br> color : 'red',<br> fontSize : '30px'<br> }<br>}
计算属性
computed : {<br> classObject(){<br> return { color : 'red'};<br> }<br>}
数组语法
:style=[activeClass, errorClass]
data : {<br> activeClass : {<br> color : 'blue',<br> },<br> errorClass : {<br> fontSize : '30px',<br><br> }<br>}
多重值
: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"><br><br> <li v-for="item in items"><br><br> {{ item.message }}<br><br> </li><br><br></ul>
data : {<br> items : [<br> message : 'hello'<br> ]<br><br>}
一个对象的 v-for
<ul id="example-1"><br><li v-for="(v, k, i) in obj"><br>{{ `${k} - ${v} - ${i}` }}<br></li><br></ul>
data : {<br> obj : {<br> name : 'n',<br> sex : 'M',<br> }<br>}
key
<ul id="example-1"><br><li v-for="(v, k, i) in obj" :key="i"><br>{{ `${k} - ${v} - ${i}` }}<br></li><br></ul>
data : {<br> obj : {<br> name : 'n',<br> sex : 'M',<br> }<br>}
数组更新检测
变异方法
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">
<br> <li> {{ i }} </li>
<br> </template>
v-for with v-if
一个组件的 v-for
事件处理
监听事件
v-on/@
事件处理方法
@click="click"
methods : {<br> click(){}<br>}
内联处理器中的方法
@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"><br> <option :value="{v : 1, id : 1}"></option><br><br></select>
单选框
<input type="radio" :value="man" v-model="sex"/>
多选框
<input type="checkbox" v-model="movies" <br> true-value = ""<br> false-value = ""<br>/>
修饰符
.lazy
v-model.lazy
.number
v-model.number
.trim
v-model.trim
组件 基础
基本示例
组件的复用
data必须是一个函数
组件的组织
通过Prop向子组件传递数据
单个根元素
通过事件向父级组件发送消息
使用事件抛出一个值
在组件上使用v-model
:value绑定属性
@input 发送属性值
通过插槽分发内容
动态组件
解析DOM模板时的注意事项
0 条评论
下一页
