Vue2

1、什么是Vue

  • Vue 是目前最火的一个前端框架,React是最流行的一个前端框架
  • Vue 是前端的主流框架之一,和AngularReact 一起,并成为前端三大主流框架!
  • Vue 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。
  • 下载用于传统的html项目使用,若是Vue项目则不需要下载
  • 下载地址:Vue

2、Vue的优点

  • 轻量级,体积小是一个重要指标
  • 易上手,学习曲线平稳,文档齐全
  • 吸取了 Angular(模块化)和 React(虚拟 DOM)的长处,并拥有自己独特的功能,如:计算属性
  • 开源,社区活跃度高

3、什么是MVVM

MVVM(Model-View-ViewModel)是一种软件架构设计模式,是一种简化用户界面的事件驱动编程方式

MVVM 的核心是 ViewModel 层,负责转换 Model 中的数据对象来让数据变得更容易管理和使用

  • 该层向上与视图层进行双向数据绑定
  • 向下与 Model 层通过接口请求进行数据交互

mvvm

4、MVVM的优点

  • 双向绑定技术,当Model变化时,View-Model会自动更新,View也会自动变化。
  • View的功能进一步的强化,具有控制的部分功能,若想无限增强它的功能,甚至控制器的全部功几乎都可以迁移到各个View上(不过这样不可取,那样View干了不属于它职责范围的事情)。View可以像控制器一样具有自己的View-Model.
  • 由于控制器的功能大都移动到View上处理,大大的对控制器进行了瘦身。不用再为看到庞大的控制器逻辑而发愁了。
  • 可以对View或ViewController的数据处理部分抽象出来一个函数处理model。这样它们专职页面布局和页面跳转,它们必然更一步的简化。

5、MVVM的缺点

  • 数据绑定使得 Bug 很难被调试。
  • 一个大的模块中,model也会很大,虽然使用方便了也很容易保证了数据的一致性,当长期持有,不释放内存,就造成了花费更多的内存。
  • 数据双向绑定不利于代码重用。

6、第一个vue项目

使用html导入vue.js,实现vue项目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<body>
<!--View-->
<div id="vue">
{{message}}
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({ // ViewModel
el: '#vue', // 绑定id
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>

7、vue的基本语法

1、v-bind

用于绑定标签内的属性

例:

1
2
3
<span v-bind:id="testId">
测试
</span>

v-bind可以省略

简写:

1
2
3
<span :id="testId">
测试
</span>

注意:如果testId在vue实例化中的data内不存在,则会报错

2、条件判断

1、v-if、v-else-if、v-else

条件判断语句应该用的最多,就不需要解释了

例:

1
2
3
<span v-if="judge">测试1</span>
<span v-else="judge==1">elseif测试</span>
<span v-else>else测试</span>

若judge在vue实例化中是布尔类型,则可以直接使用,如果是数据则可以==或===比较

==比较值

===比较类型跟值

2、v-show

使用跟v-if一致,

唯一的区别:

  • v-if如果条件不成立,该条标签不显示,
  • 如果使用v-show的话则会使用样式的display:none远程

3、v-for

调用格式为:v-for=”item in items”

注:items表示数组,item 表示迭代的别名

例:

1
2
3
<ul>
<li v-for="ary in arr" :id="ary.id">{{ary.name}}</li>
</ul>
1
2
3
4
5
6
7
8
<script>
let test=new Vue({
el:"#test",
data:{
arr:[{id:1,name:"数组1"},{id:2,name:"数组2"},{id:3,name:"数组3"}]
}
})
</script>

4、v-on

用于绑定事件

例:

1
<p v-on:click="test">111</p>

可以使用@符号等代替v-on简化

1
<p  @click="test">111</p>

绑定的方法也需要在vue实例化中写,如果方法没有参数,括号可以省略

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
let test=new Vue({
el:"#test",
data:{
name:"znsd",
id:1,
url:"www.baidu.com",
judge:false,
arr:[{id:1,name:"数组1"},{id:2,name:"数组2"},{id:3,name:"数组3"}],
key:['id','name']
},
methods:{
test(){
alert(111)
}
}
})
</script>

8、双向数据绑定

双向数据绑定,也就是视图发生改变时,数据会根据同步发生改变,数据发生改变,视图也会发生该表

注意!!!

使用v-model进行表单双向绑定时候,会跟随

  • input的value值,
  • selecet默认选中值value(selected)
  • input中type=checkbox的checked的选中的value

注意:下面的例子都需要用id为test的包起来

1、单行文本

1
<input type="text" v-model="message" :value="message"/>
1
2
3
4
5
6
7
8
<script>
let test = new Vue({
el: "#test",
data: {
message: "文本框"
}
})
</script>

当input文本框的value发生改变,vue实例对象的对应data也会发生改变

2、单选框

1
2
<input type="radio" name="gender" v-model="gender" value="1"> 男
<input type="radio" name="gender" v-model="gender" value="2"> 女
1
2
3
4
5
6
7
8
<script>
let test = new Vue({
el: "#test",
data: {
gender: 1
}
})
</script>

当值gender为1的时候,默认选中input中value为1的值

当单选框选值发生改变,data中gender也发生该表,例选中女,女的value为2,则gender值为2

3、多选框

这里我偷懒,使用了vue的for循环,暂时不知道怎么显示name值

1
<input type="checkbox" v-for="hobby in hobbys" v-model="hobbysChecked" :value="hobby.id">
1
2
3
4
5
6
7
8
9
<script>
let test = new Vue({
el: "#test",
data: {
hobbys: [{id: 1, name: "篮球"}, {id: 2, name: "排球"}],
hobbysChecked: [1]
}
})
</script>

因为是多选框,所以莫默认选中值则是一个数组,具体操作跟单选框差不多

4、下拉框

这里继续偷懒

1
2
3
4
<select v-model="hobbySelected">
<option value="0">请选择爱好</option>
<option v-for="hobby in hobbys" :value="hobby.id">{{hobby.name}}</option>
</select>
1
2
3
4
5
6
7
8
9
<script>
let test = new Vue({
el: "#test",
data: {
hobbys: [{id: 1, name: "篮球"}, {id: 2, name: "排球"}],
hobbySelected: 1
}
})
</script>

因为下拉框只有一个选中,所以将双向绑定绑定于select,会随data中的hobbySelected值找对应的value来默认selected选中

9、Axios

Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架,她的主要作用就是实现 AJAX 异步通信,其功能特点如下:

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 自动转换 JSON 数据

GitHub源码地址:https://github.com/axios/axios

中文文档:http://www.axios-js.com/

1、为什么要使用 Axios

由于 Vue 是一个 视图层框架 并且作者(尤雨溪)严格准守 SoC (关注度分离原则),所以 Vue 并不包含 AJAX 的通信功能,为了解决通信问题,作者单独开发了一个名为 vue-resource的插件,不过在进入 2.0 版本以后停止了对该插件的维护并推荐了 Axios 框架。

2、Axios的生命周期

生命周期

10、vue-cli

ue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板

主要的功能:

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

1、需要的环境

Node.js下载地址Node.js

Git下载地址:Git

确认nodejs安装成功:

  • cmd 下输入 node -v,查看是否能够正确打印出版本号即可!
  • cmd 下输入 npm-v,查看是否能够正确打印出版本号即可!

Node.js会默认去下载国外的,所以我们为了添加下载速度,需要配置淘宝镜像加速器

1
2
3
4
5
6
7
8
# -g 就是全局安装
npm install cnpm -g

# 或使用如下语句解决 npm 速度慢的问题(如安装axios)
npm install axios --registry=https://registry.npm.taobao.org

# 永久更改使用指定镜像(淘宝)
npm config set registry https://registry.npm.taobao.org

虽然安装了cnpm,但是尽量少用!

安装地址在C盘的用户里面的AppData\Roaming\npm

2、安装 vue-cli

1
2
3
npm install vue-cli -g
#
cnpm install vue-cli -g

测试是否安装成功

1
vue list

4、查询vue-cli是否安装成功

3、第一个vue-cli程序

选中一个文件夹进入cmd输入命令

1
2
# 这里的 myvue 是项目名称,可以根据自己的需求起名
vue init webpack myvue

安装中会有一些选中,这里推荐

  • Project name:项目名称,默认 回车 即可
  • Project description:项目描述,默认 回车 即可
  • Author:项目作者,默认 回车 即可
  • Install vue-router:是否安装 vue-router,选择 n 不安装(后期需要再手动添加)
  • Use ESLint to lint your code:是否使用 ESLint 做代码检查,选择 n 不安装(后期需要再手动添加)
  • Set up unit tests:单元测试相关,选择 n 不安装(后期需要再手动添加)
  • Setup e2e tests with Nightwatch:单元测试相关,选择 n 不安装(后期需要再手动添加)
  • Should we run npm install for you after the project has been created:创建完成后直接初始化,选择 n,我们手动执行;运行结果!

初始化并且运行

1
2
3
cd myvue  #这个是你创建的名字
npm install
npm run dev

然后输入http://localhost:8080就可以访问

也可以npm run build 将vue项目打包

打包以后可以直接放入nginx的html文件夹直接访问

4、vue-cli的目录结构

4、vue-cli目录结构

  • build 和 config:WebPack 配置文件
  • node_modules:用于存放 npm install 安装的依赖文件
  • src: 项目源码目录
  • static:静态资源文件
  • .babelrc:Babel 配置文件,主要作用是将 ES6 转换为 ES5
  • .editorconfig:编辑器配置
  • eslintignore:需要忽略的语法检查配置文件
  • .gitignore:git 忽略的配置文件
  • .postcssrc.js:css 相关配置文件,其中内部的 module.exports 是 NodeJS 模块化语法
  • index.html:首页,仅作为模板页,实际开发时不使用
  • package.json:项目的配置文件
    • name:项目名称
    • version:项目版本
    • description:项目描述
    • author:项目作者
    • scripts:封装常用命令
    • dependencies:生产环境依赖
    • devDependencies:开发环境依赖

5、src目录介绍

src 目录是项目的源码目录,所有代码都会写在这里

1、main.js

main.js是入口文件,里面会默认生成以下代码

1
2
3
4
5
6
7
8
9
10
11
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})

代码分析

  • import Vue from 'vue':ES6 写法,会被转换成 require(“vue”);
  • import App from './App':意思同上,但是指定了查找路径,./ 为当前目录
  • Vue.config.productionTip = false:关闭浏览器控制台关于环境的相关提示
  • new Vue({...}):实例化 Vue
    • el: '#app':查找 index.html 中 id 为 app 的元素
    • template: '<App/>':模板,会将 index.html 中的App替换
    • omponents: { App }:引入组件,使用的是 import App from ‘./App’ 定义的 App 组件;

2、App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld/>
</div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
name: 'App',
components: {
HelloWorld
}
}
</script>

<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
  • template:HTML 代码模板,会替换 中的内容
  • import HelloWorld from ‘./components/HelloWorld’:引入 HelloWorld 组件,用于替换 template 中的
  • export default{…}:导出 NodeJS 对象,作用是可以通过 import 关键字导入
    • name: ‘App’:定义组件的名称
    • components: { HelloWorld }:定义子组件

11、安装Webpack

1、安装

安装:

1
2
npm install webpack -g
npm install webpack-cli -g

测试是否安装成功:

1
2
webpack -v
webpack-cli -v

2、webpack.config.js 配置文件

  • entry:入口文件,指定 WebPack 用哪个文件作为项目的入口
  • output:输出,指定 WebPack 把处理完成的文件放置到指定路径
  • module:模块,用于处理各种类型的文件
  • plugins:插件,如:热更新、代码重用等
  • resolve:设置路径指向
  • watch:监听,用于设置文件改动后直接打包

使用webpack命令即可打包

3、使用webpack

1、创建目录modules,用于放js模块等资源

2、创建一个js文件

1
2
3
exports.testznsd =function(){
document.write("<h1>测试</h1>")
}

3、在创建一个main.js的入口文件

1
2
let test= require("./test")  //导入js文件
test.testznsd() //调用js的方法

4、在项目目录下创建webpack.config.js 配置文件

1
2
3
4
5
6
module.exports = {
entry: "./modules/main.js",
output: {
filename: "./js/app.js"
}
};

5、使用webpack打包

6、随便创建一个html文件引入打包后的js即可调用

12、Vue-Router

1、介绍

Vue Router 是 Vue 官方的路由管理器。它和 Vue 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于 Vue 过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的 CSS class 的链接
  • HTML5 历史模式或 hash 模式,在 IE9 中自动降级
  • 自定义的滚动条行为

2、下载

需要进入你vue-cli创建的项目先查询package.json查询是否安装,然后在安装

1
npm install vue-router --save-dev

3、使用

1、创建views文件内创建俩个vue文件,一个Main.vue,一个Content.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
<div>
<h1>主页面</h1> <!--这个main的,Content为页面内容,也可以自定义-->
</div>
</template>

<script>
export default {
name: "Main" <!--这个在创建的时候会自动生成-->
}
</script>

<style scoped>
</style>

2、创建router文件夹中创建index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import Vue from "vue"; //导入vue
import Router from "vue-router"; //导入vue路由
import Main from "../views/Main";
import Content from "../views/Content";

Vue.use(Router)

export default new Router({
routes:[{
name:"main",
path: "/main",
component:Main
},{
name:"content",
path: "/content",
component:Content
}
]
})<!--创建路由器对象-->

3、在main.js中引入路由

1
2
3
4
5
6
7
8
9
10
11
12
13
import Vue from 'vue'
import App from './App'
import router from './router/index' //引入路由

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

4、在App.vue中添加

1
2
3
<router-link to="/main">主页面</router-link>
<router-link to="/content">内容</router-link>
<router-view /> <!--不加这个则会不显示内容-->

即可直接使用npm run dev

13、ElementUI使用

1、安装ElementUI

1
2
3
npm i element-ui -S
# 安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev

2、导入ElementUI

在 main.js 中写入

1
2
3
4
5
6
7
8
9
10
11
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
el: '#app',
render: h => h(App)
});

注意:不要直接cv,一步一步粘贴到指定位置

3、基本使用

直接去官网粘贴代码即可使用

Element

14、富文本编辑器

1、安装富文本编辑器组件

1
npm install vue-quill-editor --save

2、页面对应黏贴就行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template>
<el-card style="height: 610px;">
<quill-editor v-model="content" ref="myQuillEditor" style="height: 500px;" :options="editorOption">
</quill-editor>
</el-card>
</template>

<script>
import {
quillEditor
} from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
name: 'FuncFormsEdit',
components: {
quillEditor
},
data() {
return {
content: null,
editorOption: {}
}
}
}

</script>

<style scoped>
</style>

3、实现自定义上传图片接口

1、引入图片上传

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<template>
<div>
<!-- 图片上传组件辅助-->
<el-upload
class="avatar-uploader"
:action="serverUrl"
name="img"
:headers="header"
:show-file-list="false"
:on-success="uploadSuccess"
:on-error="uploadError"
:before-upload="beforeUpload">
</el-upload>
<!--富文本编辑器组件-->
<el-row v-loading="uillUpdateImg">
<quill-editor
v-model="detailContent"
ref="myQuillEditor"
:options="editorOption"
@change="onEditorChange($event)"
@ready="onEditorReady($event)"
>
</quill-editor>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画,刚开始是false,不显示
serverUrl: '', // 这里写你要上传的图片服务器地址
header: {token: sessionStorage.token}, // 有的图片服务器要求请求头需要有token之类的参数,写在这里
detailContent: '', // 富文本内容
editorOption: {} // 富文本编辑器配置
}
},
methods: {
// 上传图片前
beforeUpload(res, file) {},
// 上传图片成功
uploadSuccess(res, file) {},
// 上传图片失败
uploadError(res, file) {}
}
}
</script>

2、修改data数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
export default {
data() {
return {
serverUrl: '', // 这里写你要上传的图片服务器地址
header: {token: sessionStorage.token}, // 有的图片服务器要求请求头需要有token之类的参数,写在这里
detailContent: '', // 富文本内容
editorOption: {
placeholder: '',
theme: 'snow', // or 'bubble'
modules: {
toolbar: {
container: toolbarOptions, // 工具栏
handlers: {
'image': function (value) {
if (value) {
document.querySelector('#quill-upload input').click()
} else {
this.quill.format('image', false);
}
}
}
}
}
}
}
}
}

3、配置工具栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
// 工具栏配置
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],

[{'header': 1}, {'header': 2}], // custom button values
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}], // superscript/subscript
[{'indent': '-1'}, {'indent': '+1'}], // outdent/indent
[{'direction': 'rtl'}], // text direction

[{'size': ['small', false, 'large', 'huge']}], // custom dropdown
[{'header': [1, 2, 3, 4, 5, 6, false]}],

[{'color': []}, {'background': []}], // dropdown with defaults from theme
[{'font': []}],
[{'align': []}],
['link', 'image', 'video'],
['clean'] // remove formatting button
]
</script>

4、修改editorOption属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
export default {
data() {
return {
editorOption: {
placeholder: '',
theme: 'snow', // or 'bubble'
modules: {
toolbar: {
container: toolbarOptions, // 工具栏
handlers: {
'image': function (value) {
if (value) {
//输出1则测试成功
alert(1)
} else {
this.quill.format('image', false);
}
}
}
}
}
}
}
}
}

5、修改editorOption内属性handlers

1
2
3
4
5
6
7
8
9
10
handlers: {
'image': function (value) {
if (value) {
// 触发input框选择图片文件
document.querySelector('.avatar-uploader input').click()
} else {
this.quill.format('image', false);
}
}
}

6、修改上传图片的回调方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 富文本图片上传前
beforeUpload() {
// 显示loading动画
this.quillUpdateImg = true
},
uploadSuccess(res, file) {
// res为图片服务器返回的数据
// 获取富文本组件实例
let quill = this.$refs.myQuillEditor.quill
// 如果上传成功
if (res.code === '200' && res.info !== null) {
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片 res.info为服务器返回的图片地址
quill.insertEmbed(length, 'image', res.info)
// 调整光标到最后
quill.setSelection(length + 1)
} else {
this.$message.error('图片插入失败')
}
// loading动画消失
this.quillUpdateImg = false
},
// 富文本图片上传失败
uploadError() {
// loading动画消失
this.quillUpdateImg = false
this.$message.error('图片插入失败')
}

15、绘画饼图

1、安装插件

1
npm install echarts --save

2、main.js里面引入echarts

1
2
3
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3、插入代码

对应粘贴代码即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<template>
<div>
<div id="chartPie" class="pie-wrap"></div>
</div>
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); //引入主题,可以不引入,有默认的
export default {
data() {
return {};
},
mounted() {
//如果你需要多个,调用下面方法即可
this.drawPieChart();
},
methods: {
//需要多个,多复制几次这个方法,修改一下即可
drawPieChart() {
this.chartPie = echarts.init(
document.getElementById("chartPie"),
"macarons"
);
this.chartPie.setOption({
//显示在上面的文字
tooltip: {
trigger: "item",
// formatter: "{a}<br/>{b}: <br/>{c}({d}%)", 其中 {a}指向name名称(访问来源)
formatter: "{b}: <br/>{c}({d}%)",
},
legend: {
data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
right: 500,
orient: "vertical",
},
series: [
{
name: "访问来源",
type: "pie",
//圆圈的粗细
radius: ["50%", "80%"],
//圆圈的位置
center: ["50%", "50%"],
data: [
{
value: 335,
name: "直接访问",
},
{
value: 310,
name: "邮件营销",
},
{
value: 234,
name: "联盟广告",
},
{
value: 135,
name: "视频广告",
},
{
value: 1548,
name: "搜索引擎",
},
],
//动画持续时间:单位毫秒
animationDuration: 2000,
//控制是否显示指向文字的,默认为true
label: {
show: false,
position: "center",
},
},
],
});
},
},
};
</script>

<style lang="scss" scoped>
.pie-wrap {
width: 100%;
height: 126px;
}
</style>