一. 简介Vue
Vue.js为渐进式JavaScript框架
Vue框架为MVVM框架, 即数据源与控件双向绑定, 在实际项目中频繁操作DOM节点, 仅仅只需要控制数据源数据即可,不用考虑页面渲染.
二. Vue的基本知识
Vue 2.x 框架的常用点(模板语法, 条件渲染, 列表渲染)
简介Vue的Hello Word应用
模板语法, v-bind属性绑定, 事件绑定
条件渲染, 列表渲染, Class与Style的绑定Vue 2.x 核心技术(vue-router, vuex)
Vue-cli工具, Vue代码规范
Vue组件的调试方法
Vue-router, vuex集成Vue2.x
介绍workflow工作流
单页面Demo(动态表单,列表动态展示)
使用Cli工具,开发常见的应用组件
三. Vue开发环境
IDE: WebStrom Or VS Code
Node.js: Node环境, NPM环境 (NVM, 多版本Node环境管理)
测试环境: Chrome, Vue.js
工程环境: Vue.js
终端输入:
npm install vue-cli
完成之后 输入
vue --version
进行查看是否安装成功Vue环境
四. 创建第一个Vue项目
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<style>
.bg {
color: cyan;
font-size: 30px;
font-weight: 200;
background: magenta;
}
</style>
<script src="https://cdn.bootcss.com/vue/2.6.3/vue.min.js"></script>
</head>
<body>
<div id="aa" class="bg">
<div class="a">{{msg}}</div>
<div class="a">{{msg}}</div>
</div>
<script>
new Vue({
el: '#aa',
data: {
msg: "This is Vue"
}
})
</script>
</body>
</html>
模板语法:
Vue的文件结构(template, script, style);
在标签中可使用插值语法{{msg}}, 数据, 以及JS表达式,
模板语法包含插值, 指令(指令缩写);
v-on:click 可以简写为@click
v-if
:href
计算属性与监听器
计算属性: computed
数据联动, 当计算属性中的所有的数据均发生变化的时候,响应此方法.
能监听多个变量,但是该变量必须是在Vue中的实例里.
computed: {
msg1: function() {
return 'computed' + this.msg;
}
},
监听器: watch
仅仅是监听设备中的所有监听Vue中的属性值, 类似于iOS中的KVO.
异步场景
通常只监听一个变量
// 监听并观察data的属性数据变化,当方式变化的时候, 属性变化新,旧值
watch: {
msg: function(newVal, oldVal) {
console.log(newVal);
console.log(oldVal);
}
},
条件渲染
v-if,
v-else,
v-else-if,
v-show,
// v-if, v-else, v-else-if, v-show之后的为JS表达式
<div v-if="count > 10">{{msg2}}</div>
<div v-else="count < 5">{{msg3}}</div>
<div v-show="count == 10">Count的值为{{count}}</div>
列表渲染
v-for
// list为数据源, item为遍历的数据元素, :key则是标记了此条数据的Tag值
<div v-for="(item, index) in list" :key="index">
<div>{{item}}</div>
</div>
v-for与v-if结合使用
<div v-for="(item, index) in list" :key="index" v-bind:style="styleTest">
姓名为:{{item.name}} 年龄为:{{item.age}}
</div>
v-for的高阶用法
Class与Style绑定
// 可以简写去掉v-bind
<div v-for="(item, index) in list" :key="index" :style="styleTest">
姓名为:{{item.name}} 年龄为:{{item.age}}
</div>
// Class要绑定多个样式使用[]进行加类的操作
<div class="['aa', 'bb']"></div>
Vue-cli工具
快速创建Vue工程
// 在终端中进入到指定的文件夹目录
// 使用vue create demo 进行创建对应的Vue工程
// 完成之后进入demo文件夹下
// 使用 npm run serve进行运行此项目
// 或者使用vue ui进行创建新的Vue工程项目
工程化项目的目录
// 使用vue ui来进行创建Vue工程;
// 使用vue ui工具可以对Vue项目来进行编译运行在浏览器中
五. Vue组件化思想
组件化顾名思义, 为组件是独立的,组件可复用的,整体化的组件.
组件化的目的: 实现功能模块的复用,
高执行效率,
开发单页面复杂应用,可以将复杂的业务逻辑进行拆分
如何拆分复杂的业务逻辑
组件的代码不超过300行,
复用原则,
业务复杂性原则,
vue-router:
使用vue create命令进行创建Vue工程
vue组件创建
<template>
<div>This is a component</div>
</template>
<script>
export default {
};
</script>
<style scoped>
</style>
在vue-router文件中进行相对应的组件配置:
{
path: '/new',
name: 'new',
component: newPage,
},
最终在App.vue中进行配置点击链接跳转组件
<router-link to="/new">New</router-link>
组件间的状态管理
Vuex
多组件的混合使用,多页面,复杂业务(vue-router)
组件间的传参,消息,事件管理(props, emit/on, bus)
vuex单向数据流概念,
view->actions->state->view
vuex使用场景:
多个试图依赖于同一状态(例:菜单导航);
来自不同试图的行为需要变更同一状态(例:评论弹幕);
Vuex是为Vue.js开发的状态管理模式,特点是组件状态集中管理;并且组件的状态改变遵循统一的规则;
使用vue-cli工具创建的Vue工程中,勾选使用Vuex后会在工程目录中生成一个store.js的文件;
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
// 管理属性值
state: {
count: 0,
},
// 修改属性值方式
mutations: {
// 无参数修改Store属性值方法,建议先持有当前Vuex中的state使用临时变量进行修改
increase(state) {
const tmpState = state;
tmpState.count += 1;
},
// 含参数修改Store属性值方法
sub(state, value) {
const tmpState = state;
tmpState.count -= value;
},
},
actions: {
},
});
Vuex的简单实用
// 在组件中使用
import store from '@/store'; // 引入Store头文件
// 使用以下代码进行调用(increase则为store中mutations定义的方法名)
store.commit('increase');
Chrome中使用Vue插件进行Debug查看Vuex中的状态:
六. Vue项目Debug
console.error('This is error log'); // 错误日志输出
console.log('This is normal log'); // 普通日志输出
debugger; // 加入断点
alert('This is alert dialog'); // 弹框显示
// 断点后可以直接调用方法
call() {
console.log('Call Method');
},
// 绑定Window全局变量之后进行Debug
// 页面开始挂载的时候的生命周期方法
mounted() {
window.vue = this;
},
七.Vue项目参考
使用Chrome查看相对应的web页面的源码, 以及CSS样式
调试工具进行查看
调试小技巧
Chrome中调试查看DOM结构;
Header, Body里面看js/css引用, 搜索相对应的js库;
查看sources, network中的js, 使用反编译或者Debug进行调试;
八.Vue项目的集成
使用Scss进行CSS样式的编写
<style lang="scss">
.head {
font-size: 40px;
color: steelblue;
}
.cellNormal {
height: 40px;
font-size: 40px;
background-color: cyan;
&.active {
color: magenta;
}
}
.cellHighLigth {
background-color: blue;
}
</style>
九. Vue项目打包部署
// 进入到Vue项目中使用如下命令进行打包
npm run build
注: 在Vue项目中需要配置webpack打包工具的配置,可以事先创建一个vue.config文件进行相对应的打包配置;
参考文档: https://cli.vuejs.org/zh/
文档中的webpack打包有相关的配置信息
静态网页发布:
// 进入工程,使用以下命令
npm run build
// 执行完此命令之后, 会生成一个dist文件夹,将文件夹中的内容放到Server中根目录下
// 即可完成部署
