Vue.js

Vue.js

MVVM(Model-View-ViewModel)

前端开发概念

M（Model）

V（View）

VM（ViewModel）

Vue基本的代码结构

View模块

<div class=\"app\">\t <p>{{ msg }}</p></div>  

Model模块

 data:{ msg:\"欢迎学习vue\

ViewModel模块

整体代码

基本指令

{{ msg }}

插值表达式

v-cloak

设置样式

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。

v-text

渲染数据，不解析标签

v-html

渲染数据，解析标签

v-bind

用于绑定数据和元素属性

缩写为:

v-on

用于绑定事件

缩写为@

事件修饰符

.stop

阻止冒泡

.prevent

阻止默认事件

.capture

添加事件侦听时使用事件捕获模式

.self

只当事件在该元素本身(比如不是子元素)触发时回调

.once

事件只触发一次

用法举例

v-on:click.stop

按键修饰符

常用的按键码的别名

.enter

.tab

.delete

.down

.space

.up

.left

.right

.esc

自定义全局按键修饰符

Vue.config.keyCodes.名称 = 按键值

Vue.config.keyCodes.f2=113

js里面键盘事件对应的码值

https://www.cnblogs.com/wuhua1/p/6686237.html

v-on:keyup.enter或@keyup.enter

v-model

数据双向绑定

v-for

循环

key属性

只接受string/number类型

2.2.0+ 的版本里，当在组件中使用v-for时，key现在时必须的

在组件中使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的 字符串/数字 类型 :key值。

key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值。

v-if

根据表达式来重建或销毁元素或组件以及它们所绑定的事件。

v-show

通过改变元素的 css 属性（display）来决定元素是显示还是隐藏。

Vue属性

el

指定要控制的元素节点

data

是个对象，指定了控制的区域内要用到的数据

methods

是个对象，可以自定义方法

如果要访问data的数据或methos中的方法使用this

watch

可以监视data中的指定数据变化，然后触发watch对应中的function处理函数

可以用监视路由改变

computed

在computed中，可以定义一些属性，这些属性叫做计算属性，计算属性的本质就是一个方法，只不过，我们在使用这些计算属性的时候，是把它们的名称，直接当作属性来使用，并不会把计算属性当作方法去调用。

计算属性在引用的时候一定不要加()去调用，直接把它当作普通属性去使用

计算属性这个funcation内部，所用到的任何data中的数据发生了变化，就会立即重新计算这个计算属性的值

计算属性的求值结果，会被缓存起来，方便下次直接使用，如果计算属性方法中，所有来的数据，都没有发生过变化，则不会重新对计算属性求值。

router

将路由规则对象，注册到vm实力上，用来监听URL地址的变化，然后展示对应的组件

render函数渲染组件

特点

可以在页面指定的容器中渲染一个组件

和传统的渲染组件方式相比，render更霸道一些，页面上，只能渲染这唯一组件，其他的内容，都会被覆盖掉

...

样式绑定

v-bind:class

数组

<h1 :class=\

数组中使用三元表达式

数组中嵌套对象

直接使用对象

v-bind:style

直接添加样式属性

<div v-bind:style=\

<div v-bind:style=\"styleObject\">Vue</div>

过滤器

可以用作一些常见的文本格式化

全局过滤器

过滤器可以用在两个地方

mustachc插值

v-bind表达式

过滤器定义语句

注: 过滤器中的function，第一个参数，已经被规定死了，永远都是过滤器管道符前面传递过来的数据

过滤器可以多次调用

私有过滤器

定义私有过滤器

filters选项

filters:{     过滤器名称: function(){      }}

两个条件 过滤器名称和处理函数

过滤器调用的时候，采用的是就近原则，，如果私有过滤器和全局过滤器名称一致，优先调用私有过滤器

过滤器调用语句

{{ name | 过滤器名称 }}

字符串新方法

padstart()

padend()

ES6 新特性

自定义指令

全局指令

定义语句

Vue.directive()

参数1：指令的名称，在定义的时候，指令的名称前面，不需要加v-前缀，但是在调用的时候必须在指令名称前加上v-前缀来进行调用

参数2：是一个对象，这个对象上，有一些指令的相关函数，这些函数可以在特定的阶段，执行相关的操作

私有指令

directives 的选项

directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } }}

调用语句

模板中任何元素上使用新的 v-名称

钩子函数

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。unbind：只调用一次，指令与元素解绑时调用。

参数

el：指令所绑定的元素，可以用来直接操作 DOM。binding：一个对象，包含以下 属性：    -name：指令名，不包括 v- 前缀。    -value：指令的绑定值，例如：v-my-directive=\"1 + 1\" 中，绑定值为 2。    -oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。    -expression：字符串形式的指令表达式。例如 v-my-directive=\"1 + 1\" 中，表达式为 \"1 + 1\"。    -arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 \"foo\

注：除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

简写

这个function等同于把代码写到了bind和update中去

想在 bind 和 update 时触发相同行为，而不关心其它的钩子时

生命周期

生命周期图示

vue生命周期可以分为八个阶段，分别是：\tbeforeCreate(创建前)\tcreated(创建后)\tbeforeMount(载入前)\tmounted(载入后)\tbeforeUpdate(更新前)\tupdated（更新后)\tbeforeDestroy(销毁前)\tdestroyed（销毁后)

数据请求

vue-resource

在Vue实例中

this.$http

全局Vue对象

Vue.http

请求类型

配置全局默认值

全局配置默认数据接口的根域名

Vue.http.options.root='http://www.test.com/';

 

配置了根域名则每次单独发起http请求的时候，请求的路径应使用相对路径开头，前面不能带/

全局配置emulateJSON

Vue.http.options.emulateJSON=true;

具体查看：https://github.com/pagekit/vue-resource/blob/develop/docs/config.md

响应返回时用then方法

具体查看：https://github.com/pagekit/vue-resource/blob/develop/docs/http.md

axios

fetch api

过渡&动画

第三方类

animate.css

https://github.com/animate-css/animate.css

使用过度类名实现动画

列表过渡

<transition-group> 组件

appear属性 实现页面刚展示出来的时候，入场时候的效果

tag属性 指定transition-group 渲染为指定的元素，不指定则会渲染为span

单元素/组件的过渡

transition 的封装组件

过渡类名

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

v-move

<transition-group>新增Class

自定义修改v-前端

transition元素 添加name=\"前缀名称\"

区分不同组的动画

组件过渡

transition元素包裹动态组件

钩子函数可以说是动画的生命周期

v-on:before-enter=\"beforeEnter\" v-on:enter=\"enter\" v-on:after-enter=\"afterEnter\" v-on:enter-cancelled=\"enterCancelled\" v-on:before-leave=\"beforeLeave\" v-on:leave=\"leave\" v-on:after-leave=\"afterLeave\" v-on:leave-cancelled=\"leaveCancelled\"

这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。

当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css=\"false\"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

Vue组件

什么是组件：组件的出现，就是为了拆分Vue实例的代码量的，

全局组件

创建组件的第一种方式

var com1 = Vue.extend({  template: '<h1>通过template属性，指定了组件要展示的HTML结构</h1>'})

创建组件的第二种方式

创建组件的第三种方式

定义一个字面量类型的组件模板对象

template元素

注: 如果使用Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名，则在引用组件的时候，需要把大写的驼峰改为小写的字母，同时，两个之间，使用-连接；(e.g: myCom1  >>  my-com1)如果没使用驼峰，则直接使用名称即可。

注: 不论是哪种方式创建出来的组件，组件的template属性指向的模板内容，必须有且只能有唯一的一个根元素

私有组件

components属性

定义实例内部私有组件的

组件可以有自己的data的数据

组件的data的实例中的data，实例中的data可以为对象，组件中的data必须为一个方法并需要返回一个对象，data数据使用方法两者都一样

组件切换

v-else

component元素进行组件切换

<component v-bind:is=\"currentTabComponent \"></component>

currentTabComponent

已注册组件的名字

一个组件的选项对象

父组件向子组件传值

子组件无法访问到父组件中的data上的数据，可以通过父组件在引用子组件的时候，通过属性绑定(v-bind:)的形式，把需要传递的子组件数据，以属性绑定的形式，传递给子组件，供子组件使用。并把父组件传递过来的属性，先在props数组中，定义一下，才能使用这个数据 props中的数据，都是只读的

子组件无法访问到父组件中的method方法，可以通过父组件在引用子组件的时候，通过事件绑定(v-on:)的形式，把需要传递的子组件方法，以事件绑定的形式，传递给子组件，供子组件使用。并在子组件methods中用this.$emit()进行调用

可以通过事件来传值进行子组件向父组件传值

获取DOM元素和组件

ref获取dom元素和组件

reference的缩写

路由

vue-router

https://router.vuejs.org/zh/

路由规则

每个routes路由规则，都是一个对象，这个规制对象身上有两个必须的属性

path属性

表示监听哪个路由链接地址

component属性

表示如果路由时前面匹配到的path 则展示component属性对应的组件

属性值必须是组件的模板对象，不能是组件的引用名称

redirect属性

用于重定向某一个path上去

可用于默认展示

Vue router属性

<router-view>

用于占位符，将来路由匹配到的组件，展示到router-view中

<router-link>

可以省略不写#，默认渲染为一个a标签

路由高亮

默认可以设置.router-link-active类的样式

默认值也是可以通过路由构造函数选项 linkExactActiveClass 进行全局配置的

路由传参

$route.query

$route.params

路由嵌套

children属性进行设置子路由

命名视图

命名视图组件

<router-view name=\"名称\">

Webpack

webpack 是前端的一个项目构建工具，它是基于Node.js 开发出来的一个前端工具

https://www.webpackjs.com/

常用的一些静态资源

样式表

.css

.less

.sass

.scss

Javascript脚本文件

.js

.ts

.coffee

图片

.jpg

.gif

.png

.bmp

字体文件

eot

.svg

.ttf

.woff

.woff2

模板文件

.ejs

.vue

.jade

安装

npm install --save-dev webpack

npm install --save-dev webpack-cli

webpack 4+ 版本需要安装

基本使用

webpack 要打包的文件路径 输出文件路径

能够处理JS文件的互相依赖的关系

能够处理JS的兼容问题

基本的配置文件

webpack.config.js

这个配置文件，其实就是一个JS文件，通过Node中的模块操作，向外暴露了一个配置对象

webpack-dev-server 工具

npm i webpack-dev-server -D 

插件

html-webpack-plugin

第三方loader

默认只能打包处理JS类型文件，无法处理其他非JS类型文件

处理css文件

style--loader

css-loader

处理less文件

less-loader

处理scss文件

scss-loader

处理路径

url-loader

默认情况下webpack css文件中的url地址 不管是图片还是字体库只要是url地址都无法处理

可以利用limit参数来设定图片是否为base64地址

可以利用name参数来设定图片名称

Babel

在webpack 中，默认只能处理一部分ES6 的新语法，一些高级的ES6语法或者ES7语法

需安装两套包

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

cnpm i babel-preset-env babel-preset-stage-0 -D

新建一个.babelrc的Babel配置文件，格式为JSON

需exclude排除node_modules的所有第三方的JS文件打包编译

vue-loader

默认无法打包.vue文件

导入Vue

在webpack 中使用\"import Vue from 'Vue' \"导入的Vue构造函数，功能不完整，只提供了runtime-only 的方式，并没有提供像网页中那样的使用方式如果想要全功能的vue可通过修改package.jsom中的main属性指定完整的vue.js

包查找规则

1、找项目根目录中有没有node_modules的文件夹

2、在node_modules中根据包名，找对应的vue文件夹

3、在vue文件夹中，找一个叫做package.json的包配置文件

4、在package.json文件中，查找一个main属性【main属性指定了这个包在被加载时候的入口文件】

导入全功能的Vue.js

import Vue from 'vue.js的路径'

 可以在webpack.config.js添加 resolve属性

webpack 推荐使用.vue这个组件定义组件

import Vue from 'Vue'

在webpack中，如果想通过vue，把一个组件展示到页面中展示，vm实例中render函数可以实现

.vue文件组件

三部分组成

<template></template>

<script></script>

定义数据、方法

export default{} 

<style></style>

lang属性

支持scss或less

scoped属性

默认使用import 导入Vue，只支持使用.vue模板文件来定义文件

官方不推荐我们在webpack构建的Vue项目中使用其他的方式定义组件，因为这样不优雅，更主要的是没有把组件的思想发挥到极致

结合vue-router

import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)

暴露数据

export default{}

export default 向外暴露的成员，可以使用任意变量来接收

在一个模块中，export default 只允许向外暴露一次

export

使用export向外暴露的成员，只能使用{ }的形式来接收，这种形式，叫做【按需导出】

子主题

export可以向外暴露多个成员，同时，如果某些成员，在import导入时，不需要，可以不在{ }中定义

使用export导出的成员，必须严格按照导出时候的名称，来使用{ }按需接收

使用export导出的成员，如果想换个变量名称接收，可以使用as来起别名

发布策略

webpack.publish.config.js

clean-webpack-plugin

先清空文件夹

webpack.optimize.CommonsChunkPlugin

抽离第三方包

webpack.optimize.UglifyJsPlugin

压缩JS

webpack.DefinePlugin

发布时移除不必要的警告

extract-text-webpack-plugin

抽离CSS文件

optimize-css-assets-webpack-plugin

压缩CSS

https://github.com/kangax/html-minifier#options-quick-reference

优化HTML文件

在plugins节点下的htmlWebpackPlugin插件中，添加minify子节点

组件库

Mint UI

移动端的UI组件库

Element

PC端的UI组件库

Vuex

https://vuex.vuejs.org/zh/