Vue
2018-07-11 15:14:23 68 举报AI智能生成
登录查看完整内容
Vue基础使用
作者其他创作
大纲/内容
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}
:class=\"classObject\"
data : { classObject : { active : true }}
计算属性
computed : { classObject(){ return { active : true }; }}
数组语法
:class=[activeClass]
data : { activeClass : 'active'}
用在组件
绑定内联样式
:style={color : activeColor}
data : { activeColor : 'red'}
:style=classObject
computed : { classObject(){ return { color : 'red'}; }}
多重值
自动添加前缀
条件渲染
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>
data : { items : [ message : 'hello' ]}
一个对象的 v-for
<ul id=\"example-1\"><li v-for=\
key
数组更新检测
变异方法
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>
v-for with v-if
一个组件的 v-for
事件处理
监听事件
v-on/@
事件处理方法
@click=\"click\"
methods : { 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=\
<input type=\"radio\" :value=\"man\" v-model=\"sex\"/>
多选框
<input type=\"checkbox\" v-model=\"movies\" true-value = \"\" false-value = \"\"/>
修饰符
.lazy
v-model.lazy
.number
v-model.number
.trim
v-model.trim
组件 基础
基本示例
组件的复用
data必须是一个函数
组件的组织
通过Prop向子组件传递数据
单个根元素
通过事件向父级组件发送消息
使用事件抛出一个值
在组件上使用v-model
:value绑定属性
@input 发送属性值
通过插槽分发内容
动态组件
解析DOM模板时的注意事项
0 条评论
回复 删除
下一页
