Vue详解
Vue详解
一、回顾SSM
- SSM
- mybatis
- spring
- springmvc
二、Vue概述
1、Vue概述
-
Vue是一套用于构建用户界面的渐进式JavaScript框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（[SPA]）提供驱动。（百度百科）
2、认识前端
- 前端三要素
- HTML(结构)
- CSS（表现样式）
- Javascript（行为）
- CSS预处理器
- CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。“用一种专门的编程语言，进行web页面样式设计，再通过编译器转化为正常的css文件，以供项目使用 ”
- 常用css预处理器： SASS、LESS（基于nodejs，常用）
- JavaScript框架
- JQuery：熟知的JavaScript框架，优点是简化了DOM操作，缺点是DOM操作太频繁，影响前端性能
- Angular：Google收购的前端框架，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念。
- React：Facebook出品，高性能的JS前端框架，特点是提出了新概念（虚拟DOM）来减少真实dom操作，在内存中模拟DOM操作
- Vue：一款渐进式JavaScript框架，如实现模块化开发、路由、状态管理等新特性 ，结合了Angular、React的优点。
- Axios：前端通信框架
- JavaScript构建工具
- Babel
- WebPack
3、前端发展史
- 混合开发，三端统一（PC，Android，IOS）
- 前端人员为了方便开发需要掌握一定的后端技术
- 前端框架-----Vue.js
- iView：是一个强大的基于Vue的UI库，主要特点是移动端支持的较多
- ElementUI：是饿了么前端开源维护的Vue UI组件库，组件齐全，基本涵盖后台所需的所有组件，主要用于PC端的页面，主要特点是桌面端支持较多。
- 前后端分离的演变史
-
后端为主的MVC
-
基于AJAX带来的SPA时代单页面应用时代
-
前端为主的MV*时代
- MVC：同步通信为主 Model、View、Controller
- MVP：异步通信为主 Model、View、Presenter
- MVVM：异步通信为主 Model、View、ViewModel
涌现大量的前端框架
前后端指责很清晰：前端工作在浏览器端，后段工作在服务端。
全端开发的复杂度可控
部署相对独立
-
Nodejs带来的全栈时代
随着Nodejs的兴起，JavaScript开始有能力运行在服务器端。
三、Vue入门
1、第一个Vue程序
- MVVM模式的实现者
- Model：模型层，在这里表示JavaScript对象
- View：视图层，在这个表示DOM（HTML操作的元素）
- ViewModel：连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者
- 在MVVM架构中，不允许数据和视图直接通信，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者
- ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
- ViewModel 能够监听到视图的变化，并能够通知数据发生改变
- 为什么要使用Vue.js
- 轻量级、体积小
- 移动优先，更适合移动端
- 易上手，文档齐全
- 吸取了Angular和React的长处，并拥有自己独特的功能，如：计算属性
- 开源，社区活跃度高
- 第一个Vue程序
- IDEA搜索Vue.js插件，下载
- 或者引入
- 写一个demo.html
doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<div id="app">
{{message}}
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
var vm = new Vue({
el:"#app",
//Model:数据
data:{
message:"hello,vue!"
}
});
//可以通过console中，动态修改数据
//vm.message="xqh" 不用刷新可以直接在页面中得到反馈修改数据
script>
body>
html>
通过Vue绑定的数据，可以在浏览器中console直接动态修改，不用刷新页面
- 为什么要使用MVVM
- 低耦合：视图（View）可以独立于Model变化和修改
- 可复用
- 独立开发
- 可测试
2、Vue基本语法
- v-bind指令
doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<div id="app">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
span>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
var vm = new Vue({
el:"#app",
//Model:数据
data:{
message:"hello,vue!"
}
});
//可以通过console中，动态修改数据
//vm.message="xqh" 不用刷新可以直接在页面中得到反馈修改数据
script>
body>
html>
- v-bind等被称为指令，指令带有前缀v-表示它们是Vue提供的特殊活性，它们会在渲染的DOM上应用特殊的响应式行为，在这里该指令的意思是：“将这个元素节点的title特性和Vue实例的message属性保持一致”
- 条件判断句
- v-if
- v-else
- v-else-if
doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<div id="app">
<h1 v-if="type==='A'">Ah1>
<h1 v-else-if="type==='B'">Bh1>
<h1 v-else>Ch1>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
var vm = new Vue({
el:"#app",
data:{
type:'A'
}
});
script>
body>
html>
- 循环
- v-for
doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<div id="app">
<li v-for="item in items">
{{item.message}}
li>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
var vm = new Vue({
el:"#app",
data:{
items:[
{message:'xqh学Java'},
{message:'xqh学python'}
]
}
});
script>
body>
html>
3、Vue绑定事件
- 方法写在methods对象中，用v-on绑定事件
doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<div id="app">
<button v-on:click="sayHi">click mebutton>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
var vm = new Vue({
el:"#app",
//Model:数据
data:{
message:"早安喝了喝了"
},
methods:{//方法必须定义在Vue的Methods对象中 v-on绑定事件
sayHi:function (){
alert(this.message);
}
}
});
script>
body>
html>
4、Vue双向绑定
- Vue.js 是一个MVVM框架，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化
- 在表单中实现双向绑定
- 文本框和选择
doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<div id="app">
<input type="radio" name="sex" value="男" v-model="xqh"> 男
<input type="radio" name="sex" value="女" v-model="xqh"> 女
<p>
你的性别是：{{xqh}}
p>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
var vm = new Vue({
el:"#app",
data:{
xqh:''
}
});
script>
body>
html>
实现数据和表单绑定，你选择的或者输入的内容可以及时打印出来
- 下拉框
doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<div id="app">
下拉框：
<select v-model="selected">
<option >--请选择--option>
<option >--A--option>
<option >--B--option>
<option >--C--option>
select>
<span>你的选择是：{{selected}}span>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
var vm = new Vue({
el:"#app",
data:{
selected:''
}
});
script>
body>
html>
5、Vue组件
- 什么是组件
- 组件是可复用的Vue实例，就是一组可以重复使用的模板，跟JSTL的自定义标签等框架有着异曲同工之妙
- 自定义组件
doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<div id="app">
<qinjiang v-for="item in items" v-bind:proj="item">qinjiang>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
//定义一个Vue组件commponent
Vue.component("qinjiang",{
props:['proj'],
template: '{{proj}} '
});
var vm = new Vue({
el:"#app",
data:{
items:["Java","python","linux"]
}
});
script>
body>
html>
通过props传递参数
6、 Axios异步通信
- 什么是Axios
- 是一个开源的可以用在浏览器端和NodeJS的异步通信框架，它的主要作用是实现AJAX异步通信，功能特点如下
- 从浏览器中创建异步请求
- 从nodejs创建http请求
- 支持Promise API
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF（跨站请求伪造）
- 为什么要使用Axios
- 由于Vue.js是一个视图层框架并且作者严格遵守SOC（关注度分离原则），所以vue并不包含AJAX的通信功能，为了解决通信问题，使用Axios框架，少用JQuery，因为它操作Dom太频繁
- 第一个Axios程序
-
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载DOM、渲染、更新、卸载等一系列过程，我们称这是Vue的生命周期，通俗说就是Vue实例从创建到销毁的过程，就是生命周期
```doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style> [v-clock]{ display: none; } style> head> <body> <div id="vue"> <div>{{info.name}}div> <div>{{info.address.street}}div> <a v-bind:href="info.url">点我a>
7、计算属性
- 什么是计算属性
- 首先这是一个属性 ，其次这个属性有计算能力，简单来说，它就是一个能够将计算结果1缓存起来的属性，可以想象为缓存
```html
currentTime:{{currentTime()}}
- computed和methods区别
- computed是属性调用，methods是方法调用一定要加（）
- computed带有缓存作用，而methods没有
doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<div id="app">
<p>reversedName: {{reversedNameMethod()}}p>
<p>reversedMessage: {{reversedMessageComputed}}p>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'Alex',
message: 'Hello'
},
methods: {
reversedNameMethod: function () {
return this.name.split('').reverse().join('')
}
},
computed: {
reversedMessageComputed: function () {
return this.message.split('').reverse().join('')
}
}
})
script>
body>
html>
- 只要message没发生变化 多次访问 reversedMessageComputed 计算属性会立即返回之前的计算结果，而不必再次执行函数。而 reversedNameMethod() 方法，每次调用都会重新执行函数。
10、插槽slot
- 在vue中，我们使用 元素作为承载分发内容的出口
doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title">todo-title>
<todo-items slot="todo-items" v-for="item in todoItems" :item="item">todo-items>
todo>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
Vue.component("todo",{
template: '\
\
\
'
});
Vue.component("todo-title",{
props:['title'],
template: '{{title}}'
});
Vue.component("todo-items",{
props:['item'],
template: '{{item}} '
});
var vm = new Vue({
el: "#app",
data:{
title:"秦老师系列课程",
todoItems:['说Java','说前端','说Linux']
}
})
script>
body>
html>
11、自定义事件内容分发
- 实现按下删除按钮可以删除内容
doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title">todo-title>
<todo-items slot="todo-items" v-for="(item,index) in todoItems"
:item="item" v-bind:index="index" v-on:remove="removeItems(index)">todo-items>
todo>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
Vue.component("todo",{
template: '\
\
\
'
});
Vue.component("todo-title",{
props:['title'],
template: '{{title}}'
});
Vue.component("todo-items",{
props:['item','index'],
template: '{{index}}---{{item}} ',
methods:{
remove:function (index){
//自定义事件分发
this.$emit('remove',index)
}
}
});
var vm = new Vue({
el: "#app",
data:{
title:"秦老师系列课程",
todoItems:['说Java','说前端','说Linux']
},
methods: {
removeItems:function (index){
console.log("删除了"+this.todoItems[index]+"ok")
this.todoItems.splice(index,1);//一次删除一个元素
}
}
})
script>
body>
html>
12、Vue入门小结
- 核心：数据驱动，组件
- 常用属性：
- v-if
- v-else-if
- v-else
- v-for
- v-on 绑定事件 简写@
- v-model 数据双向绑定
- v-mind 给组件绑定参数，简写 ：
- 组件化
- 组合组件slot插槽
- 组件内部绑定事件需要用到this.$emit（“事件名”，参数）；
- 计算属性的特色，缓存计算数据
- 遵循SOC关注度分离原则，Vue是纯粹的视图框架，并不包含比如Ajax之类的通信功能，为了解决通信问题，我们需要使用Axios框架做异步通信
四、vue-cli项目
1、什么是vue-cli
- vue-cli 是官方提供的一个脚手架，用于快速生成一个vue的项目模板。预先定义好的目录结构以及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，我们的开发更加快速。
- 主要的功能
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
- 安装nodejs，官网安装（看前面nodejs的笔记）
- 命令窗口中输入 node -v 查看版本，则安装成功
- 输入 npm install cnpm -g 以后通过cnpm下载会更快
- 下载vue-cli 输入 ： cnpm install vue-cli -g
- 输入 vue list 查看可以基于哪些模板创建vue应用程序
2、创建vue-cli项目
- vue init webpack myvue ----会生成一个myvue的文件夹（初始化一个vue项目） 然后一直no，就可以了
- cd myvue —跳到myvue操作
- npm install — 下载所需要的依赖 如果要修复，按照给的提示修复
- npm run dev ----运行程序，得到程序端口
- Your application is running here: http://localhost:8080
- 浏览器中打开，则可以到达页面
- ctrl+c 关闭程序
3、vue-router路由
- Vue Router 是Vue.js官方的路由管理器，它和Vue.js的核心 深度集成，让构建单页面应用变的易如反掌
- Vue Router 包含的功能有：
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于Vue.js过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的CSS class 的链接
- Html5 历史模式或hash模式，在ie9中自动降级
- 自定义的滚动条行为
- 使用路由
- 安装（管理员模式打开命令窗口）
cnpm install vue-router --save-dev
安装好后，在node_modules中可以找到vue-router
如果没找到可以试一试 cnpm install [email protected] --save-dev (因为可能router版本太高)
- 在components文件夹中，定义两个组件
Content.vue
内容页
Main.vue
首页
- 在src目录下，新建一个文件夹：router，专门存放路由
import Vue from "vue";
import VueRouter from "vue-router";
import Content from "../components/Content";
import Main from '../components/Main'
//存放路由
//安装路由
Vue.use(VueRouter);
//配置导出路由
export default new VueRouter({
routes:[
{
//路由路径
path:'/content',
name:'content',
//路由组件
component:Content
},
{
//路由路径
path:'/main',
name:'main',
//路由组件
component: Main
}
]
})
- 在main.js中配置路由
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
//只有这一个入口
import Vue from 'vue'
import App from './App'
import router from './router' //自动扫描里面的路由配置
Vue.config.productionTip = false
new Vue({
el: '#app',
//配置路由
router,
components: { App },
template: '- 在App.vue中使用路由
Vue-Router
首页
内容页
定义组件（定义路由） ---->存放路由（router.js）------>配置路由（main.js）---->使用路由(App.vue)
4、vue+elementUI
- 创建工程(命令行都要使用管理员模式运行 )
- 创建名为hello-vue的工程 vue init webpack hello-vue
- 进入工程目录 cd hello-vue
- 安装vue-router npm install vue-router --save-dev
- 安装element-ui npm i element-ui -s
- 安装依赖 npm install
- 安装SASS加载器 cnpm install sass-loader node-sass --save-dev
- 启动测试 npm run dev
- NPM命令解释：
- npm install moduleName:安装模块到项目目录下
- npm install -g moduleName: -g的意思是将模块按照到全局
- npm install --save moduleName: --save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖，-S为该命令的缩写
- –save-dev: 意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写
- 创建登录页面
- 在src目录下建立view文件夹，放vue文件
- 创建登录页面 Login.vue
登录页
欢迎登录
登录
请输入账号和密码
- 创建 Main.vue
- 在roter中的index.js中存放路由
import Vue from "vue";
import Router from "vue-router";
import Main from "../views/Main";
import Login from "../views/Login";
Vue.use(Router);
export default new Router({
routes:[
{
path:'/main',
name:'main',
component:Main
},
{
path:'/login',
name:'login',
component:Login
}
]
});
- 在main.js配置路由
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import router from "./router";
import App from "./App.vue";
Vue.use(ElementUI);
new Vue({
el: '#app',
router,
components: { App },
template: '- 在App.vue中使用
main
login
5、路由嵌套
实现在跳转过去的路由再跳转
在view下创建子目录user，创建list.vue 和 profile.vue
先把路由存放到router中的index.js中
import Vue from "vue";
import Router from "vue-router";
import Main from "../views/Main";
import Login from "../views/Login";
import List from "../views/user/List";
import ProFile from "../views/user/ProFile";
Vue.use(Router);
export default new Router({
routes:[
{
path:'/main',
name:'main',
component:Main,
//嵌套路由 children
children:[
{
path:'/user/profile',
component:ProFile
},
{
path:'/user/list',
component:List
}
]
},
{
path:'/login',
name:'login',
component:Login
}
]
});
写Main.vue
用户管理
个人信息
用户列表
内容管理
分类管理
内容列表
个人信息
退出登录
- 运行测试
6、参数传递及重定向
- 传递个人信息id=1
- index.js
//传递参数
path:'/user/profile/:id',
name:'UserProfile',
component:ProFile,
props:true
- Main.vue
个人信息
- profile.vue
个人信息
{{id}}
- 这是用props的方式(推荐)
- 也可以直接用route
个人信息
{{$route.params.id}}
7、404和路由模式
- 路由模式有两种
- hash ：路径带#符号 ，如 http://locallhost/#/login
- history:路径不带#符号
修改路由配置，代码如下
mode:'history',
- 404
- 在views下新加一个NotFound.vue
404,你的页面走丢了
- 去index.js中配置
{
path:'*',
component:NotFound
}
8、路由钩子与异步请求
- 路由钩子
beforeRouterEnter : 在进入路由前执行
beforeRouterLeave :在离开路由前执行
在你要跳转的那个路由，加上钩子，就可以实现在进入这个路由之前和离开这个路由之前的一些操作
参数说明：
- to：路由将要跳转的路径信息
- from：路径跳转前的路径信息
- next：路由的控制信息
- next（） 跳入下一个页面
- next（‘/path’）改变路由的跳转方向，使其跳到另一个路由
- next(false)返回原来的页面
- 在钩子函数中使用异步请求
- 安装Axios
cnpm install axios -s
cnpm install vue-axios
- 在main.js中导入axios
import axios from 'axios';
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);
- 实现在进入profile路由前获取到data.json的数据
个人信息
{{id}}