前端基础学习笔记4-VUE
VUE
1、简介
- Vue是一款前端渐进式框架，可以提高前端开发效率
- Vue遵循SoC关注度分离原则
- Vue通过MVVM设计模式，能够实现视图与模型的双向绑定
- 双向绑定：即数据变化时视图会自动刷新，视图变化时数据也会自动变化
- MVVM设计模式：
- Model：模型层， 在这里表示JavaScript对象
- View：视图层， 在这里表示DOM(HTML操作的元素)
- ViewModel：连接视图和数据的中间件， Vue.js就是MVVM中的View Model层的实现者
2、第一个vue程序
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
{{message}}
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm = new Vue({
//元素，id='app'
el:"#app",
//Model层：数据对象
data:{
//属性
message:"hello,vue"
}
})
script>
body>
html>
浏览器控制台输入app.message='值’可以更新页面数据
3、vue基本指令
3.1、v-bind声明
简写冒号：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
span>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
script>
body>
html>
3.2、v-if、v-else、v-else-if条件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<span v-if="type==='A'">Aspan>
<span v-else-if="type==='B'">Bspan>
<span v-else>Cspan>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm = new Vue({
el: '#app',
data: {
type: 'A'
}
})
script>
body>
html>
3.3、v-for循环
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
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.min.js">script>
<script>
var vm = new Vue({
el:'#app',
data:{
items:[
{message:'数组对象1'},
{message:'数组对象2'},
{message:'数组对象3'},
]
}
})
script>
body>
html>
3.4、v-on事件监听
简写@
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<button v-on:click="sayHi">点击事件绑定button>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm = new Vue({
el:'#app',
data:{
message:"hello,vue"
},
methods:{//方法必须定义在vue的method中
sayHi:function (event) {
//this在方法里面指向当前Vue实例
alert(this.message)
}
}
})
script>
body>
html>
3.5、v-model双向绑定
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<p>{{message}}p>
<input type="text" v-model="message">
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm = new Vue({
el:'#app',
data:{
message:"hello,vue"
}
})
script>
body>
html>
4、vue表单双向绑定
4.1、input-text
如3.5例子
4.2、input-radio
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
性别：
<input type="radio" name="sex" value="男" v-model="checked">男
<input type="radio" name="sex" value="女" v-model="checked">女
<p>选中：{{checked}}p>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm = new Vue({
el:'#app',
data:{
checked:''
}
})
script>
body>
html>
4.3、textarea多行文本
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<p>{{message}}p>
<textarea v-model="message">textarea>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm = new Vue({
el:'#app',
data:{
message:"hello,vue"
}
})
script>
body>
html>
4.4、select下拉框
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<select name="selct" id="select" v-model="message">
<option value="" disabled>---请选择---option>
<option>Aoption>
<option>Boption>
<option>Coption>
select>
<span>选择的值：{{message}}span>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm = new Vue({
el:'#app',
data:{
message:'A'
}
})
script>
body>
html>
5、vue组件
5.1、组件简介
组件是可复用的vue实例，即一组可以重复使用的模板，通常一个应用会以一棵嵌套的组件树的形式来组织，例如，页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件
5.2、第一个vue组件
在实际开发中，我们并不会用以下方式开发组件，而是采用vue-cli创建
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<name v-for="item in items" v-bind:nameh="item">name>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
//Vue.component()：注册组件，name是组件名
Vue.component("name",{
//组件参数props
props:['nameh'],
//组件模板template
template:"{{nameh}} "
});
var vm = new Vue({
el:"#app",
data:{
items:["数组参数1","数组参数2","数组参数2"]
}
})
script>
body>
html>
6、axios异步通信
6.1、axios简介
Axios是一个开源的可以用在浏览器端和node js的异步通信框架，主要作用就是实现AJAX异步通信。
- GitHub：https://github.com/axios/axios
- 中文文档：http://www.axios-js.com/
6.2、第一个axios应用程序
- json数据
{
"name": "名字",
"address": {
"street": "集美区",
"city": "福建厦门",
"country": "中国"
}
}
- 使用axios框架的get方法请求AJAX并自动将数据封装进了Vue实例的数据对象中
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
[v-cloak]{
display: none;
}
style>
head>
<body>
<div id="app">
<div>名字：{{info.name}}div>
<div>地址：{{info.address.country}} {{info.address.city}} {{info.address.street}}div>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script>
var vm = new Vue({
el:"#app",
data(){//data中的数据结构必须和Ajax响应回来的数据格式匹配
return{
info:{
name:null,
address:{
country:null,
city:null,
street:null
},
}
}
},
mounted(){//钩子函数
axios.get("data.json").then(response=>(this.info=response.data))
}
})
script>
body>
html>
7、computed计算属性
计算属性就是能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<div>currentTime1:{{currentTime1()}}div>
<div>currentTime2:{{currentTime2}}div>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm = new Vue({
el:"#app",
methods: {
currentTime1:function () {
return Date.now()
}
},
computed:{//计算属性：methods，computed方法名不能重名，重名之后，只会调用methods的方法
currentTime2:function () {
return Date.now()
}
}
})
script>
body>
html>
控制台测试
8、slot插槽
在Vue.js中我们使用
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
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":index="index">todo-items>
todo>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
//注册组件，使用slot插槽实现内容动态绑定
Vue.component("todo",{
template: "\n" +
" \n"
+
" {{index+1}}：{{item}} "
})
//实例化Vue并初始化数据
var vm = new Vue({
el:"#app",
data:{
title:"代办事项",
todoItems:["事项1","事项2","事项3"]
}
})
script>
body>
html>
9、自定义事件
自定义事件可以在组件中完成删除Vue实例中的数据
组件todo-items无法调用vue实例中的方法，只能调用自身的方法，绑定自定义事件，在自定义事件中绑定vue实例中的方法。
-
1、vue实例方法
removeItem:function (index) { //splice()方法，删除、添加数组元素 this.todoItems.splice(index,1); } -
2、组件自定义方法
remove:function (index) { //自定义事件分发 this.$emit('remove',index) } -
3、前端绑定vue实例中的方法
v-on:remove="removeItem(index)"
完整代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
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":index="index" v-on:remove="removeItem(index)">todo-items>
todo>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
//注册组件，使用slot插槽实现内容动态绑定
Vue.component("todo",{
template: "\n" +
" \n"
+
" {{index+1}}：{{item}} ",
methods:{
remove:function (index) {
//自定义事件分发
this.$emit('remove',index)
}
}
})
//实例化Vue并初始化数据
var vm = new Vue({
el:"#app",
data:{
title:"代办事项",
todoItems:["事项1","事项2","事项3"]
},
//在vue实例中添加删除方法
methods:{
removeItem:function (index) {
//splice()方法，删除、添加数组元素
this.todoItems.splice(index,1);
}
}
})
script>
body>
html>
10、vue-cli脚手架
10.1、vue-cli简介
vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板，预先定义好的目录结构及基础代码。
10.2、vue-cli安装
安装Node.js：http://nodejs.cn/download/，检测是否安装成功
-
cmd下输入
node -v，查看是否能够正确打印出版本号即可！ -
cmd下输入
npm -v，查看是否能够正确打印出版本号即可！- 安装淘宝镜像加速器
# -g 就是全局安装 # 安装目录：C:\Users\administrator\AppData\Roaming\npm npm install cnpm -g # 或使用如下语句解决npm速度慢的问题 npm install --registry=https://registry.npm.taobao.org
安装vue-cli
#安装命令
cnpm instal1 vue-cli-g
#测试是否安装成功，查看可以基于哪些模板创建vue应用程序，通常我们选择webpack
vue list
C:\Users\pipijiao>vue list
Available official templates:
★ browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
★ browserify-simple - A simple Browserify + vueify setup for quick prototyping.
★ pwa - PWA template for vue-cli based on the webpack template
★ simple - The simplest possible Vue setup in a single HTML file
★ webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
★ webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.
10.3 第一个vue-cli应用程序
-
1、新建一个空的文件夹，在文件夹下创建一个基于webpack模板的vue应用程序
#需要进入到对应的目录，vuestudy是顶日名称 vue init webpack vuestudy #运行后选项说明 Project name：项目名称，默认回车即可 Project description：项目描述，默认回车即可 Author：项目作者，可以输入作者名称，或默认回车即可 Install vue-router：是否安装vue-router，选择n不安装（后期需要再手动添加） Use ESLint to lint your code:是否使用ESLint做代码检查，选择n不安装（后期需要再手动添加) Set up unit tests:单元测试相关，选择n不安装（后期需要再手动添加） Setupe2etests with Nightwatch：单元测试相关，选择n不安装（后期需要再手动添加） Should we run npm install for you after the,project has been created:创建完成后直接 初始化，选择n，我们手动执行；运行结果！ -
2、初始化运行
#需要进入到项目目录 #安装依赖 npm install #运行，浏览器访问http://localhost:8080 npm run dev #停止：ctrl+C
11、webpack打包器
11.1、webpack简介
-
webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler) ，当webpack处理应用程序时， 它会递归地构建一个依赖关系图(dependency graph) ， 其中包含应用程序需要的每个模块， 然后将所有这些模块打包成一个或多个bundle。
-
WebPack是一款模块加载器兼打包工具， 它能把各种资源， 如JS、JSX、ES 6、SASS、LESS、图片等都作为模块来处理和使用。
11.2、webpack安装
#安装命令
npm install webpack -g
npm install webpack-cli -g
#检测是否安装成功
webpack -v
webpack-cli -v
11.3、webpack配置
打包需要创建webpack.config.js配置文件，参数说明
- entry：入口文件， 指定Web Pack用哪个文件作为项目的入口
- output：输出， 指定WebPack把处理完成的文件放置到指定路径
- module：模块， 用于处理各种类型的文件
- plugins：插件， 如：热更新、代码重用等
- resolve：设置路径指向
- watch：监听， 用于设置文件改动后直接打包
module.exports = {
entry:"",
output:{
path:"",
filename:""
},
module:{
loaders:[
{test:/\.js$/,;\loade:""}
]
},
plugins:{},
resolve:{},
watch:true
}
11.4、webpack使用
-
创建文件夹用idea打开，新建modules文件夹用来放JS模块等资源文件
-
在modules下创建hello.js，编写JS模块相关代码
//暴露方法 exports.sayHi = function(){ document.write("Hello Webpack"); } -
在modules下创建main.js，入口文件
//require导入模块，调用方法 var hello = require("./hello"); hello.sayHi(); -
在项目目录下创建webpack.config.js配置文件，使用webpack命令打包
module.exports = { entry:"./modules/main.js", output:{ filename:"./js/bundle.js" } } -
在项目目录下创建HTML页面，如index.html，导入webpack打包后的JS文件
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <script src="dist/js/bundle.js">script> body> html> -
在idea的控制台执行：webpack打包，看到新增文件dist/js/bundle.js，浏览器打开index.html显示页面，打包完成
12、vue-router路由
12.1、vue-router简介
Vue Router 是Vue.js的官方路由器
12.2、vue-router安装
#安装命令，node_modules下有vue-router则成功
npm install vue-router --save-dev
#若是出现失败，可能是版本问题，可以指定版本
npm install --legacy-peer-deps [email protected]
12.3、vue-router使用
-
在src/components目录下定义一个Content.vue 的组件
内容页面
-
在src/components目录下定义一个Main.vue的组件
首页
-
在src下新建一个文件夹router，用来存放路由，创建index.js
import Vue from 'vue' //导入VueRouter插件 import VueRouter from 'vue-router' //导入组件 import Content from "../components/Content"; import Main from "../components/Main" //显示声明使用VueRouter Vue.use(VueRouter); //配置路由 export default new VueRouter({ routes:[ { //路由路径 path:'/content', //路由名称 name:'content', //跳转到组件 component:Content }, { //路由路径 path:'/main', //路由名称 name:'main', //跳转到组件 component:Main }, ] }) -
配置main.js路由
import Vue from 'vue' import App from './App' //导入路由配置目录，自动扫描里面的路由配置 import router from './router' //关闭生产模式下给出的提示 Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', //配置路由 router, components: { App }, template: '' }) -
在App.vue中使用路由
首页 内容页
13、vue+ElementUI实战
13.1、工程准备
相关命令
#创建工程
vue init webpack hello-vue
#进入工程目录
cd hello-vue
#安装vue-routern
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
删除工程中没用的内容，例如HelloWorld.vue、logo.png
工程目录src（没有则创建）
- assets：用于存放资源文件
- components：用于存放Vue功能组件
- views：用于存放Vue视图组件
- router：用于存放vue-router配置
13.2、创建登录页面
-
在views下创建首页视图Main.vue
首页
-
在views下创建登录页视图Login.vue
<template> <div> <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box"> <h3 class="login-title">欢迎登录h3> <el-form-item label="账号" prop="username"> <el-input type="text" placeholder="请输入账号" v-model="form.username"/> el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" placeholder="请输入密码" v-model="form.password"/> el-form-item> <el-form-item> <el-button type="primary" v-on:click="onSubmit('loginForm')">登录el-button> el-form-item> el-form> <el-dialog title="温馨提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> <span>请输入账号和密码span> <span slot="footer" class="dialog-footer"> <el-button type="primary" @click="dialogVisible = false">确定el-button> span> el-dialog> div> template> <script> export default { name: "Login", data(){ return{ form:{ username:'', password:'' }, //表单验证，需要在 el-form-item 元素中增加prop属性 rules:{ username:[ {required:true,message:"账号不可为空",trigger:"blur"} ], password:[ {required:true,message:"密码不可为空",tigger:"blur"} ] }, //对话框显示和隐藏 dialogVisible:false } }, methods:{ onSubmit(formName){ //为表单绑定验证功能 this.$refs[formName].validate((valid)=>{ if(valid){ //使用vue-router路由到指定界面，该方式称为编程式导航 this.$router.push('/main'); }else{ this.dialogVisible=true; return false; } }); } } } script> <style lang="scss" scoped> .login-box{ border:1px solid #DCDFE6; width: 350px; margin:180px auto; padding: 35px 35px 15px 35px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; box-shadow: 0 0 25px #909399; } .login-title{ text-align:center; margin: 0 auto 40px auto; color: #303133; } style> -
在router/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 }, ] }) -
App.vue
-
main.js
import Vue from 'vue' import App from './App' import router from './router' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.config.productionTip = false Vue.use(router) Vue.use(ElementUI) /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '' }) -
运行npm run dev，如果出现模块版本过高的失败，可以在package.json文件中降低该模块版本，再在idea的Terminal执行npm install，若是下载失败再尝试cnpm install
- 浏览器访问http://localhost:8080/#/login，随便输入账号密码，点击登录跳转到首页
13.3、children路由嵌套
-
在view下创建文件夹user，创建个人信息视图组件Profile.vue
个人信息
-
在view/user下创建用户列表视图组件List.vue
用户列表
-
修改首页视图Main.vue
用户管理 个人信息 用户列表 个人信息 退出登录 -
在router/index.js下配置子路由
import Vue from 'vue' import VueRouter from 'vue-router' import Main from '../views/Main' import Login from '../views/Login' import Profile from "../views/user/Profile" import List from "../views/user/List" Vue.use(VueRouter) export default new VueRouter({ routes: [ { path: '/main', component: Main, children:[ { path: '/user/profile', component: Profile }, { path: '/user/list', component: List }, ] }, { path: '/login', component: Login }, ] })
13.4、参数传递
-
方法一
- index.js修改路由配置
{ //path属性中增加:id占位符 path: '/user/profile:id', name:'profile', component: Profile },- Main.vue中修改route-link地址
个人信息 - Profile.vue中接收参数
个人信息:{{$route.params.id}}
-
方法二：使用props 减少耦合
- index.js修改路由配置
{ //path属性中增加:id占位符 path: '/user/profile:id', name:'profile', component: Profile, //使用props 减少耦合 props: true }- Main.vue中修改route-link地址
个人信息 - Profile.vue接收参数为目标组件增加 props 属性
个人信息:{{id}}
13.5、redirect重定向
只需要在router/index.js里配置即可
{
path: '/main',
name: 'Main',
component: Main
},
{
path: '/goHome',
redirect: '/main'
}
13.6、路由模式
路由模式有两种，可以在router/index.js里配置模式
-
hash：路径带 # 符号，如 http://localhost/#/login，不设置默认是这种
-
history：路径不带 # 符号，如 http://localhost/login
export default new Router({ mode: 'history', routes: [ ] });
13.7、404页面
-
在views下创建404视图页面NotFound.vue
404 页面丢失
-
在router/index.js配置路由
//导入404视图组件 import NotFound from "../views/NotFound" //任何匹配不到path的都展示404页面 { path: '*', component: NotFound }
13.8、路由钩子与axios异步
- 安装axios
cnpm install --save vue-axios
- main.js导入axios
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
- 在static文件下创建mock/data.json
{
"name": "名字",
"address": {
"street": "集美区",
"city": "福建厦门",
"country": "中国"
}
}
- 修改views/Profile.vue视图，使用路由钩子和axios
- 浏览器访问，看到控制台成功打印response=json数据