Vue 思维导图模板_ProcessOn思维导图、流程图

实例和模板语法

实例

生命周期

创建一个vue对象会经过一系列初始化过程，我们可以在生命周期的各个阶段加入我们想要执行的代码

模板语法

插值

文本

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定

<span v-once>这个将不会改变: {{ msg }}</span>

原始HTML

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html

例子

使用JavaScript

指令

<p v-if="seen">现在你看到我了</p>//（这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。）

<a v-bind:href="url">...</a>//在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。

<a v-on:click="doSomething">...</a>//它用于监听 DOM 事件：

缩写

内置指令

基本指令

v-cloak

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码

例子

v-once

使用v-once的标签在Vue对象数据发生改变时不会随其改变而改变

例子

v-text

v-html

<br>

v-bind

作用

用来绑定标签上的属性值和样式

缩写

:

v-on

作用

监听事件，后可接函数名或js表达式

简写

@

阻止冒泡行为

条件渲染

v-if,v-else-if,v-else

v-show

与v-if区别

v-show没有销毁dom只是隐藏（display=false），v-if销毁了

例子

列表渲染

v-for

数组更新检测

变更方法

以下方法对数组的调用都将引起视图的改变

方法

push()

pop()

shift()

移除第一项

unshift()

在数组前端添加任意项

arrayObject.unshift(newelement1,newelement2,....,newelementX)

splice()

arrayObject.splice(index,howmany,item1,.....,itemX)

<br>参数

index

必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。

howmany

必需。要删除的项目数量。如果设置为 0，则不会删除项目。

item1, ..., itemX

可选。向数组添加的新项目。

sort()

reverse()

替换数组

不会改变原来数组的值，会返回一个新的数组

方法

concat()

先创建一个数组副本，然后将接收到的参数加载副本后面

slice()

有两个参数，开始和结束，从开始到结束位置截取一个新的数组出来

map()

Array.map(fucntion(){})

对被调用的数组元素执行指定的函数，返回一个新的数组

filter()

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

事件处理

监听事件

使用v-on

v-on:+事件类型 = 执行方法

事件处理方法

事件修饰符

stop

本图内部指令中基本指令有例子

capture

事件捕获

即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。<br>就是谁有该事件修饰符，就先触发谁。

self

self修饰符会跳过冒泡事件和事件监听

once

被修饰的v-on:click.once 将只被执行一次<br>

prevent

阻止页面的跳转如a标签

按键修饰符

按键事件

keydown

按下

keyup

抬起

keypress

按下和抬起之间

修饰符

.enter

.tab

.delete

.esc

.space

.up

.down

.left

.right

例子（可用在v-on上）

<br><input v-on:keyup.enter="submit">

系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器

.ctrl

.alt

.shift

.meta

组件技术

组件基础

定义

是一个自定义的功能强大的HTML元素，Vue对该标签的注册可以对其进行监听

是可复用的Vue实例，他可以接受除el外和new Vue相同的选项（data，methods，watch，computed）

格式

template

html

script

js

style

样式

组件的注册

全局

Vue.component

全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。

局部

挂在一个Vue实例上除了该实例之前其他地方无法使用

通过 Prop 向子组件传递数据

Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。(设置自定义元素的属性)<br>

问题

组将中data项为什么只能是个函数？

原因：Vue组件是一个可复用的实例，data设计成一个函数是因为每次使用该实例时每个实例都有自己独有的data作用域，实例之间相互隔离。

组件的数据通信

监听子组件事件

$emit()

组件值传递

父传递给子

通过v-bind方式接受父组件的值

子传递给父

$emit()

点击子组件触发父类方法

插槽

匿名插槽

具名插槽

作用域插槽

数据请求/路由/Vuex状态管理

数据请求

vue-resource

get

post

Axios

引入

npm install axios<br>

路由

Vuex状态管理

概念

前端技术的发展介绍

介绍

1.html/Xhtml/Xml CSS JS

2.Jquery,Bootstrap,LayUI,Zepto,Prototype

3.模块化组件 ES6 Module , AMD-RequireJS等

4.前端三大框架 AngularJS,React,Vue

5.nodejs,npm,webpack前端工程化工具

设计思想的转变

Model与ViewModel使用了观察者模式，当数据发生改变时会触发观察者的update方法

前端技术栈

Vue特点

Vue是什么

Vue的特点

易用

灵活

高效

响应式编程

组件化

核心

1.响应式的数据绑定：当数据发生改变，视图可以自动更新，可以不用关心dom操作，而专心数据操作<br>

2.可组合的视图组件：把视图按照功能切分成若干基本单元，组件可以一级一级组合整个应用形成倒置组件树，可维护，可重用，可测试

开发特点

低耦合

重用性

HTML模块化

数据自动处理

双向绑定

Vue的简单使用

安装Vue的方法

<script> 引入

NPM安装

命令行工具

https://cn.vuejs.org/v2/guide/index.html

引入本地vue.js

使用

计算属性和监听器

计算属性

产生

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护

语法

例子

example

相比方法的优势

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

监听器

监听数据（将数据与函数进行绑定）

vm.$watch(数据， function(){})

new Vue({watch : { data1: function(){} }})

例子

过滤器

定义

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

使用

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示： {{ msg | msgFormat(msg)}} ，<div v-bind:id="rawId | formatId"></div><br>

例子

页面元素样式的绑定

style样绑定

数组形式绑定

对象形式绑定

表单输入绑定

双向绑定

数据双向绑定就是视图的数据变化会引起Vue中数据的变化，Vue中数据的变化也会反映到视图上去

v-model(可实现数据的双向绑定)

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

文本

多行文本

复选框

单选框

子主题

选择框

值绑定

对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：

修饰符

.lazy

当添加.lazy修饰符之后，改变input框中的内容并不会使得span中的内容发生变化，此时当输入框失去焦点后触发change事件.控制台中输出相应内容。<br>

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

前端工程化