首页  思维导图  详情



 



Vue

2018-07-11 15:14:23   69  举报





AI智能生成

Vue基础使用

Vue

模板推荐

作者其他创作

大纲/内容

mustache

插值

html

v-html

文本

{{}}

html特性

v-bind:属性

: 简写

javascript表达式

指令

v-前缀

值为单个表达式

参数

只能接受一个参数

修饰符 .结尾

触发指定事件

缩写

v-bind

v-on

计算属性和侦听器

computed

get

set

methods

watch

Class与Style绑定

绑定HTML Class

对象语法

data : {   isActive : true }

:class="classObject"

data : {   classObject : {     active : true   } }

计算属性

computed : {   classObject(){     return {       active : true     };   } }

数组语法

:class=[activeClass]

data : {   activeClass : 'active' }

:class=[{active : isActive}, errorClass]

data : {   isActive : true,   errorClass : 'error' }

:class=[isActive ? activeClass : '', errorClass]

data : {   isActive : true,   errorClass : 'error', }

用在组件

绑定内联样式

对象语法

:style={color : activeColor}

data : {   activeColor : 'red' }

:style=classObject

data : {   classObject : {      color : 'red',      fontSize : '30px'   } }

计算属性

computed : {    classObject(){       return { color : 'red'};    } }

数组语法

:style=[activeClass, errorClass]

data : {   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>

data : {   items : [     message : 'hello'   ] }

一个对象的 v-for

data : {   obj : {     name : 'n',     sex : 'M',   } }

key

data : {   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>

v-for with v-if

一个组件的 v-for

事件处理

监听事件

v-on/@

事件处理方法

@click="click"

methods : {   click(){} }

内联处理器中的方法

@click="say()"

事件修饰符

.stop

阻止事件传播

.prevent

阻止事件

.passive

.once

只处理一次

.self

只处理当前元素，不处理子元素

.capture

元素自身触发的事件先在此处处理，然后才交由内部元素进行处理

按键修饰符

常用按键别名

.enter

delete

esc

space

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 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。

表单输入绑定

基础用法

文本

单选框

复选框

下拉框

文本域

值绑定

下拉框

单选框

多选框

修饰符

.lazy

v-model.lazy

.number

v-model.number

.trim

v-model.trim

组件基础

基本示例

组件的复用

data必须是一个函数

组件的组织

通过Prop向子组件传递数据

单个根元素

通过事件向父级组件发送消息

使用事件抛出一个值

在组件上使用v-model

:value绑定属性

@input 发送属性值

通过插槽分发内容

动态组件

解析DOM模板时的注意事项

 Collect

Get Started

Vue

 Collect

Get Started

Vue d'ensemble du systeme

 Collect

Get Started

Vue项目实战

 Collect

Get Started

Vue





0 条评论

下一页