登录免费注册



Vue

首页  思维导图  详情



Vue

2016-10-22 22:07:37   0  举报





仅支持查看

AI智能生成

vue相关知识点整理

vue

fe

模版推荐

作者其他创作

大纲/内容

Vue实例

构造器构造：var vm = new Vue({})

生命周期

计算属性（Computed）

条件渲染

v-if

v-else

template v-if

v-show

方法与事件处理器

v-on 监听dom事件

事件修饰符 stop & prevent

按键修饰符

过渡

transition

概述

视图层框架

子主题

响应式的数据绑定

原理：针对data用Object.defineProperty转为getter/setter, 然后watcher

组合的视图组件

数据绑定

插值，字面量 or raw html

表达式 | 过滤器

指令（Directives）<br><p class="p1"><span class="s1">职责就是当其表达式的值改变时把某些特殊的行为应用到</span><span class="s2"> DOM </span><span class="s1">上</span></p>

参数

修饰符

缩写

Class & Style 绑定

对象语法

<span class="s1"><div </span><span class="s2">v-bind:class</span><span class="s1">=</span><span class="s3">"{ 'class-a': isA, 'class-b': isB }"</span><span class="s1">></div></span>

<span class="s1"><div </span><span class="s2">v-bind:class</span><span class="s1">=</span><span class="s3">"classObject"</span><span class="s1">></div></span>

<span class="s1"><div </span><span class="s2">v-bind:style</span><span class="s1">=</span><span class="s3">"{ color: activeColor, fontSize: fontSize + 'px' }"</span><span class="s1">></div></span>

<span class="s1"><div </span><span class="s2">v-bind:style</span><span class="s1">=</span><span class="s3">"styleObject"</span><span class="s1">></div></span>

数据语法

<p class="p1"><span class="s1"><div </span><span class="s2">v-bind:class</span><span class="s1">=</span><span class="s3">"[classA, classB]"</span><span class="s1">></span></p> <p class="p1"><span class="s1"><div </span><span class="s2">v-bind:class</span><span class="s1">=</span><span class="s3">"[classA, { classB: isB, classC: isC }]"</span><span class="s1">></span></p>

<span class="s1"><div </span><span class="s2">v-bind:style</span><span class="s1">=</span><span class="s3">"[styleObjectA, styleObjectB]"</span><span class="s1">></span>

列表渲染

v-for

数组

$index

对象

$index

$key

值域

<pre style="font-family: "Roboto Mono", Monaco, courier, monospace; font-size: 0.8em; color: rgb(82, 82, 82); background-color: rgb(248, 248, 248); -webkit-font-smoothing: initial; padding: 1.2em 1.4em; line-height: 1.5em; margin-top: 0px; margin-bottom: 0px;"><span class="line"><span class="tag" style="color: rgb(41, 115, 183);"><<span class="title">span</span> <span class="attribute" style="color: rgb(233, 105, 0);">v-for</span>=<span class="value" style="color: rgb(66, 185, 131);">"n in 10"</span>></span>{{ n }} <span class="tag" style="color: rgb(41, 115, 183);"></<span class="title">span</span>></span></span></pre>

template v-for

数组变异与替换

track-by

提供一个唯一标识，提高已有元素的复用性

没有唯一标识，可以track-by="$index"

表单控件绑定

v-model

message

checked

array

picked

selected

number

debounce

lazy

☆组件

创建：var MyComponnent = Vue.extend({});

注册：Vue.compont('my-component', MyComponent)

 Collect

Get Started

vue

 Collect

Get Started

Vue全家桶

 Collect

Get Started

Vue入门

Vue学习笔记——从入门到实战

 Collect

Get Started

Vue学习笔记——从入门到实战













评论

0 条评论

下一页



图形选择

思维导图

主题

补充说明

AI生成





修改AI描述

去编辑

重新生成

提示 

关闭后当前内容将不会保存，是否继续？

取消

确定

Document