VUE学习笔记
本文章以vue3来记录的,但并非记录vue3所有变化!
1、ES6语法
1.1、let变量声明
- let用于声明变量
- 有局部作用域
- let声明的变量不会提升(只能先定义后使用)
1.2、const变量声明
- const用于声明常量
- const声明的常量也不会提升(只能先定义后使用)
- const声明对象时,该对象不可以更换,但是对象里的内容可以更改
1.3、箭头函数
function myfunction(x){
return x*x
}
console.log(myfunction(3))
const myFunc =(x)=>{return x * x}
console.log(myFunc(3))
const myFunc1 =x=>x*x
console.log(myFunc(3))
- 理解为一般函数去掉function关键字再在参数和函数语句块中间加上=>
- 如果只有一个参数,可以去掉括号(注意没有参数时也要加上()占位)
- 如果只有一条返回语句,可以再去掉return和{ }
- 箭头函数在返回对象时必须在对象外层多加一个()
- this 与普通函数的this不同, 普通函数谁调用这个函数,this就是指向谁 箭头函数没有自己的this,它的this继承于父级, 也就是箭头函数的this指向箭头函数所处对象
1.4、数组新增的高级方法
-
filter()
// 接受一个函数,函数有一个参数,此参数代表循环这个数组时的每个元素 let myArray=[1,2,3,4,5,6,7,8,9]; let array1 = myArray.filter(function(n){ return n>5; }) console.log(array1) // 6,7,8,9
-
map()
// 接受一个函数,同样的也有一个参数,相当于对数组元素每个都应用这个函数的规则 let array2 = array1.map(function(n){ return 2*n; }) console.log(array1)
-
reduce()
// 接受两个参数, // 第一个参数为函数,函数有两个参数(s,n),第一个参数代表起始值,第二个参数代表循环数组的每个元素 // 第二个参数指定第一个函数参数的第一个参数的起始值s // s指上一次的返回值 // n每次代表这次循环的数组的值 let sum = 0; sum = array2.reduce(function(s,n){ return s+n; },0) console.log(sum)
1.5、字符串新增方法
- String.startswith(string) 判断String是否以string开头 返回true或false
- String.endswith(string) 判断String是否以string结尾
1.6、模板字符串
let name = 'zhangsan';
let age = 10;
// 下面两个都得到: zhangsan is 10 years old
let normalStr = name+ ' is ' + age + ' years old';
let templateStr = `${name} is ${age} years old`
1.7、解构
-
数组
let arr = [1,2,3]; // 如果要把这个数组的三个值分别给三个变量: { let a = arr[0]; let b = arr[1]; let c = arr[2]; } // 新增简单方法: { let [a, b, c] = [1, 2 ,3]; } // 或写成: { let [a, b, c] = arr; }
-
对象
let person = { name:'zhangsan', age:10, gender:'male' } { let {name, age, gender} = person; console.log(name, age, gender) // 输出 zhangsan 10 male } // 别名 { let {name:Name, age:Age, gender:Gender} = person; console.log(Name, Age, Gender) // 输出 zhangsan 10 male }
-
复合赋值
let arr = [{name:'zhangsan', age:10}, [1,2,3], 'hello', 9 ]; { let [a,b,c,d] = arr; console.log(a); console.log(b,c,d); }
-
分解赋值
let arr = [{name:'zhangsan', age:10}, [1,2,3], 'hello', 9 ]; { let[{name,age},[a,b,c],d,e] = arr; console.log(name,age); // zhangsan 10 console.log(a,b,c); // 1 2 3 console.log(d,e); // hello 9 }
1.8、三点拓展运算符
let array1 = [1,2,3];
let array2 = [7,8,9];
let myArray = [...array1, 4, 5, 6, ...array2] ;
console.log(myArray) // 1, 2, 3, 4, 5, 6, 7, 8, 9
function myFunction(a, b, c) {
console.log(a,b,c);
return a+b+c;
}
let arr = [1,2,3];
console.log(myFunction(...arr));
// 1 2 3
// 6
function myFunction(...arr) { for(let i = 0; i <arr.length; i++) { console.log(arr[i]); } console.log(arr);}myFunction(3,12,45,123);// 3// 12// 45// 123// 3 12 45 123// 由此可见,猜测正确
function myFunction(a,b, ...arr){
console.log(arr);
}
myFunction(1,2,3,4,5,6,7); // 3 4 5 6 7
// 1 2 被赋值给了a, b, 剩下的生成了数组arr
1.9、模块化编程
1.9.1、module的引入
编写html文件时,通常会引入许多js文件,如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./1.js"></script>
<script src="./2.js"></script>
</head>
<body>
</body>
</html>
当这些js文件中有重复命名时,便会报错 如1.js和2.js都定义一个变量name
// 1.js
let name = 'zhangsan';
// 2.js
let name = 'lisi';
那么在最开始那样引入三个js文件会导致变量名冲突,报错如下: Uncaught SyntaxError: Identifier 'name' has already been declared
因为这样引入js会导致浏览器不知道解析那个name变量
可以给script标签的type属性赋值为module来解决这个问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./1.js" type='module'></script>
<script src="./2.js" type='module'></script>
<script src="./3.js" type='module'></script>
</head>
<body>
</body>
</html>
1.9.2、访问不同js文件下相同的变量
// 1.js
let name = 'zhangsan';
function add(a, b){return a+b}
export {name, add}; // 注意这里是json的简化写法,相当于 export {name:name};
// 3.js
import {name, add} from './1.js';
// 注意这里使用了解构赋值,相当于:
// let {name, add} = {name:name, add:add} (这个对象来自./1.js文件的export)
// 接下来我们便可以直接使用name与add
console.log(name); // zhangsan
console.log(add(3, 9)); // 1
1.9.3、解决引入后的命名冲突
当从其他文件引入变量后,也可能出现命名重复
// 3.js
import {name} from './1.js';
import {name} from './2.js';
可以采用取别名的方法来解决这个问题
// 3.js
import {name as name1} from './1.js';
import {name as name2} from './2.js';
// 接下来使用name1或者name2即可
同样的你也可以在1.js或者2.js暴露属性时取别名
// 1.js
let name = 'zhangsan';
export {name as name1};
// 2.js
let name = 'lisi';
export {name as name2};
// 3.js
import {name1} from './1.js';
import {name2} from './2.js';
console.log(name1, name2); // zhangsan lisi
1.9.4、定义属性时暴露
// 1.js
export let name = 'zhangsan';
1.9.5、缺少名字的暴露属性
每个js文件只能定义这样的一个export default,
如果出现两个及以上, 那么会报错Uncaught SyntaxError: Identifier '.default' has already been declared
// 1.js
export default function(a){
console.log(a)
}
接收时名字不需要{}
// 3.js
import printa from './1.js'
// 这里的printa是自己定义的
1.9.6、接收暴露的所有属性
export * as name from 'url'; // 创建一个对象接收暴露的所有属性
// name.attr;
1.10、Promise
是异步编程的一种解决方案
从语法上说,Promise 是一个对象,从它可以获取异步操作的消息
以前的回调
setTimeout(()=>{
console.log(111)
setTimeout(()=>{
console.log(222)
setTimeout(()=>{
console.log(333)
},1000)
},1000)
},1000)
es6的回调
new Promise((resolve, reject) => {
console.log(111)
resolve(222)
// reject(333)
}).then(res => {
console.log(res)
return 444
}).catch(err => {
console.log(err)
}).then(res => {
console.log(res)
return new Promise((resolve, reject) => {
setTimeout(()=>{
resolve(555)
},1000)
})
}).then(res => {
console.log(res)
})
2、nodejs
2.1、npm
npm会跟随nodejs一起安装
- npm -v:查看版本
- npm install :安装模块
- npm install -g:全局安装模块
- npm uninstall :卸载模块
2.2、Package.json
- name:包名
- version:包的版本号
- “5.0.3”表指定版本号
- “~5.0.3”表安装5.0.x的最新版本
- “^5.0.3”表安装5.x.x的最新版本
- description:包的描述
- homepage:包的官网url
- author:作者
- contributors:包的其他贡献者
- dependencies:依赖包列表
- repository:包代码存放位置
- main:程序入口文件
- keywords:关键词
3、webpack
npm install webpack -g
3.1、快速入门
-
创建文件夹
-
npm init -y
-
npm i -D webpack webpack-cli
-
webpack.config.js
const path = require('path') module.exports = { entry: { entry1: path.resolve(__dirname, './src/index.js'), }, output: { path: path.resolve(__dirname, './dist'), filename: 'bundle.js', } }
-
index.js
console.log('Interesting!')
-
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript" src="../dist/bundle.js" charset="utf-8"></script> </body> </html>
-
package.json
{ "name": "demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack --mode development", "build": "webpack --mode production", "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^5.60.0", "webpack-cli": "^4.9.1" } }
-
编译
npm run dev
3.2、多入口和多出口
const path = require('path')
module.exports = {
// 单chuank
// entry: ["./src/index1.js",./src/index2.js]
// 多chuank,key为chuank名
entry: {
entry1: path.resolve(__dirname, './src/index1.js'),
entry2: path.resolve(__dirname, './src/index2.js')
},
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].js',
}
}
3.3、webpack打包html
npm i html-webpack-plugin -D
webpack.config.js
const path = require('path')
const htmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
entry: {
entry1: path.resolve(__dirname, './src/index.js'),
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js',
},
plugins: [
new htmlWebpackPlugin({
template: "./src/index.html",
filename: "demo.html",
minify: {
// 移除空格换行
collapseWhitespace: true,
// 移除注释
removeComments: true
}
})
]
}
webpack.config.js——多个html
const path = require('path')
const htmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
entry: {
entry1: path.resolve(__dirname, './src/index.js'),
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js',
},
plugins: [
new htmlWebpackPlugin({
template: "./src/index.html",
filename: "index.html",
chunks: ["index","common"],
minify: {
// 移除空格换行
collapseWhitespace: true,
// 移除注释
removeComments: true
}
}),
new htmlWebpackPlugin({
template: "./src/cart.html",
filename: "cart.html",
chunks: ["cart","common"],
minify: {
// 移除空格换行
collapseWhitespace: true,
// 移除注释
removeComments: true
}
})
]
}
3.4、webpack打包css
- css-loader:处理@import和url
- style-loader:把样式插到Dom中
npm i css-loader style-loader -D
index.js
require('./index.css')
console.log('Interesting!')
webpack.config.js
const path = require('path')
const htmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
entry: {
entry1: path.resolve(__dirname, './src/index.js'),
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader','css-loader']
}
]
},
plugins: [
new htmlWebpackPlugin({
template: "./src/index.html",
filename: "demo.html",
minify: {
// 移除空格换行
collapseWhitespace: true,
// 移除注释
removeComments: true
}
})
]
}
3.5、webpack打包less
npm install less less-loader -D
less.less
h1{
&:hover{
color: blue;
}
}
index.js
require('./index.css')
require('./less.less')
console.log('Interesting!')
webpack.config.js
const path = require('path')
const htmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
entry: {
entry1: path.resolve(__dirname, './src/index.js'),
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader','css-loader']
},
{
test: /\.less$/,
use: ['style-loader','css-loader','less-loader']
}
]
},
plugins: [
new htmlWebpackPlugin({
template: "./src/index.html",
filename: "demo.html",
minify: {
// 移除空格换行
collapseWhitespace: true,
// 移除注释
removeComments: true
}
})
]
}
3.6、webpack打包sass
npm install sass-loader node-sass -D
sass.scss
p{
text-indent: 2em;
}
index.js
require('./index.css')
require('./less.less')
require('./sass.scss')
console.log('Interesting!')
webpack.config.js
const path = require('path')
const htmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
entry: {
entry1: path.resolve(__dirname, './src/index.js'),
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader','css-loader']
},
{
test: /\.less$/,
use: ['style-loader','css-loader','less-loader']
},
{
test: /\.scss$/,
use: ['style-loader','css-loader','sass-loader']
}
]
},
plugins: [
new htmlWebpackPlugin({
template: "./src/index.html",
filename: "demo.html",
minify: {
// 移除空格换行
collapseWhitespace: true,
// 移除注释
removeComments: true
}
})
]
}
3.7、提取css为单独的文件
npm i mini-css-extract-plugin -D
webpack.config.js
const path = require('path')
const htmlWebpackPlugin = require("html-webpack-plugin")
let miniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: {
entry1: path.resolve(__dirname, './src/index.js'),
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.css$/,
use: [miniCssExtractPlugin.loader,'css-loader']
},
{
test: /\.less$/,
use: ['style-loader','css-loader','less-loader']
},
{
test: /\.scss$/,
use: ['style-loader','css-loader','sass-loader']
}
]
},
plugins: [
new htmlWebpackPlugin({
template: "./src/index.html",
filename: "demo.html",
minify: {
// 移除空格换行
collapseWhitespace: true,
// 移除注释
removeComments: true
}
}),
new miniCssExtractPlugin()
]
}
3.8、css兼容性处理
npm i postcss-loader postcss-preset-env -D
index.css
h1{
color: aqua;
transform:rotate(-30deg);
}
webpack.config.js
const path = require('path')
const htmlWebpackPlugin = require("html-webpack-plugin")
let miniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: {
entry1: path.resolve(__dirname, './src/index.js'),
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.css$/,
use: [miniCssExtractPlugin.loader,'css-loader','postcss-loader']
},
{
test: /\.less$/,
use: ['style-loader','css-loader','less-loader']
},
{
test: /\.scss$/,
use: ['style-loader','css-loader','sass-loader']
}
]
},
plugins: [
new htmlWebpackPlugin({
template: "./src/index.html",
filename: "demo.html",
minify: {
// 移除空格换行
collapseWhitespace: true,
// 移除注释
removeComments: true
}
}),
new miniCssExtractPlugin()
]
}
postcss.config.js
module.exports = {
plugins: [
require('postcss-preset-env')()
]
}
package.json
"browserslist": [
">0.8%",
"last 2 version"
]
3.9、css压缩
webpack5要记得使用css-minimizer-webpack-plugin
!
npm i optimize-css-assets-webpack-plugin -D
webpack.config.js
const path = require('path')
const htmlWebpackPlugin = require("html-webpack-plugin")
const miniCssExtractPlugin = require("mini-css-extract-plugin");
const optimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
entry: {
entry1: path.resolve(__dirname, './src/index.js'),
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.css$/,
use: [miniCssExtractPlugin.loader,'css-loader','postcss-loader']
},
{
test: /\.less$/,
use: ['style-loader','css-loader','less-loader']
},
{
test: /\.scss$/,
use: ['style-loader','css-loader','sass-loader']
}
]
},
plugins: [
new htmlWebpackPlugin({
template: "./src/index.html",
filename: "demo.html",
minify: {
// 移除空格换行
collapseWhitespace: true,
// 移除注释
removeComments: true
}
}),
new miniCssExtractPlugin(),
new optimizeCssAssetsWebpackPlugin()
]
}
3.10、图片、字体资源打包
webpack.config.js
const path = require('path')
const htmlWebpackPlugin = require("html-webpack-plugin")
const miniCssExtractPlugin = require("mini-css-extract-plugin");
const optimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
entry: {
entry1: path.resolve(__dirname, './src/index.js'),
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.css$/,
use: [miniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(png|jpg|gif)$/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 8192
}
},
generator: {
filename: 'images/[hash][ext][query]'
}
},
{
test:/\.(eot|svg|ttf|woff|woff2)/,
type: 'asset',
generator: {
filename: 'fonts/[hash][ext][query]'
}
},
// 如果html里引入了图片资源要使用html-withimg-loader插件处理
{
test: /\.html$/,
use: [
'html-withimg-loader'
],
}
]
},
plugins: [
new htmlWebpackPlugin({
template: "./src/index.html",
filename: "demo.html",
minify: {
// 移除空格换行
collapseWhitespace: true,
// 移除注释
removeComments: true
}
}),
new miniCssExtractPlugin(),
new optimizeCssAssetsWebpackPlugin()
]
}
3.11、热部署devServer
npm i webpack-dev-server -D
webpack.config.js
const path = require('path')
const htmlWebpackPlugin = require("html-webpack-plugin")
const miniCssExtractPlugin = require("mini-css-extract-plugin");
const optimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
entry: {
entry1: path.resolve(__dirname, './src/index.js'),
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.css$/,
use: [miniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(png|jpg|gif)$/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 8192
}
},
generator: {
filename: 'images/[hash][ext][query]'
}
},
{
test:/\.(eot|svg|ttf|woff|woff2)/,
type: 'asset',
generator: {
filename: 'fonts/[hash][ext][query]'
}
},
{
test: /\.html$/,
use: [
'html-withimg-loader'
],
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: "eslint-loader",
options: {
fix: true
}
}
]
},
plugins: [
new htmlWebpackPlugin({
template: "./src/index.html",
filename: "index.html",
minify: {
// 移除空格换行
collapseWhitespace: true,
// 移除注释
removeComments: true
}
}),
new miniCssExtractPlugin(),
new optimizeCssAssetsWebpackPlugin()
],
devServer: {
open: true,
port: 8090
},
mode: 'development',
target: "web"
}
package.json
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production",
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.60.0",
"webpack-cli": "^4.9.1"
}
}
npm start
更改下文件,查看浏览器效果
4、axios
npm i -S axios
npm i -D webpack webpack-cli
4.1、快速入门
@RestController
@CrossOrigin
public class HelloController {
@RequestMapping("/")
public String hello(){
return "hello,vue server!";
}
@RequestMapping("/name")
public String hello(@RequestParam String name){
return "hello,"+name;
}
}
import axios from "axios";
console.log("hello,world!")
axios.get("http://localhost:8099/").then(res=>{
console.log(res);
})
axios.get("http://localhost:8099/name?name=frost").then(res=>{
console.log(res);
})
4.2、处理并发请求
import axios from "axios";
console.log("hello,world!")
axios.all([
axios.get("http://localhost:8099/"),
axios.get("http://localhost:8099/name?name=frost")
]).then(res=>{
console.log(res);
})
4.3、全局配置
import axios from "axios";
console.log("hello,world!")
axios.defaults.baseURL = "http://localhost:8099/"
axios.defaults.timeout = 5000
axios.get("name?name=frost").then(res=>{
console.log(res);
})
4.5、实例封装
import axios from "axios";
console.log("hello,world!")
const localhost1=axios.create({
baseURL: "http://localhost:8099/"
})
const localhost2=axios.create({
baseURL: "http://localhost:8199/"
})
localhost1.get("name?name=frost").then(res=>{
console.log(res);
})
4.6、拦截器
import axios from "axios";
console.log("hello,world!")
const localhost1=axios.create({
baseURL: "http://localhost:8099/"
})
const localhost2=axios.create({
baseURL: "http://localhost:8199/"
})
localhost1.interceptors.request.use(config=>{
console.log("请求拦截成功,给请求加点料");
return config
},error => {
console.log(error);
})
localhost1.interceptors.response.use(config=>{
console.log("响应拦截成功,给响应加点料");
return config
},error => {
console.log(error);
})
localhost1.get("name?name=frost").then(res=>{
console.log(res);
})
5、VUE
5.1、vue脚手架
全局安装vue脚手架
npm install -g @vue/cli
创建项目
vue create 项目名
PS D:\ITEM> vue create vue
Vue CLI v4.5.15
? Please pick a preset: (Use arrow keys)
> standard ([Vue 3] babel, router, vuex, eslint)
Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint)
Manually select features
自定义项目配置
PS D:\ITEM> vue create vue
Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Airbnb
? Pick additional lint features: Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes
? Save preset as: wenley-project
� Preset wenley-project saved in C:\Users\xumeng03\.vuerc
5.2、vue.config.js
与webpack配置不一样,精简了许多
5.3、插值
<template>
<div class="about">
<h1>This is an about page</h1>
<p>{{ msg }}</p>
<!--不解析内部内容-->
<p v-pre>{{ msg }}</p>
<!--只显示初始化的值,不跟随data变化-->
<p v-once>{{ msg }}</p>
<!--不解析html标签,只作为字符串显示-->
<p v-text="msg"></p>
<!--解析html标签-->
<p v-html="msg"></p>
</div>
</template>
<script>
export default {
data() {
return {
msg: '<strong>hello world!</strong>',
};
},
};
</script>
<template>
<div class="about">
<h1 :title="msg">This is an about page</h1>
<!--<h1 v-bind:title="msg">This is an about page</h1>-->
<p style="color:red">This is an about page</p>
<p :style="{'font-size':'12px'}">This is an about page</p>
<p :style="style">This is an about page</p>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'This is an about page',
style: {
'font-size': '12px',
},
};
},
};
</script>
几乎所有的html属性都可以使用v-bind绑定
5.4、计算属性
<template>
<div class="about">
<h1>This is an about page</h1>
<p>{{ title }} - {{ slogan }}</p>
<p>{{ title + '-' + slogan }}</p>
<p>{{ TheTitle }}</p>
</div>
</template>
<script>
export default {
data() {
return {
title: 'This is an about page',
slogan: '标语',
};
},
computed: {
// 只要依赖值未变化,则不会重新计算
TheTitle: {
get() {
return `${this.title}#${this.slogan}`;
},
},
},
};
</script>
5.5、事件
<template>
<div class="about">
<h1 @click="click">This is an about page</h1>
<!--<h1 v-on:click="click">This is an about page</h1>-->
<h1 @click="click1($event)">This is an about page</h1>
<!--<h1 v-on:click="click1($event)">This is an about page</h1>-->
</div>
</template>
<script>
export default {
data() {
return {
title: 'This is an about page',
};
},
methods: {
click() {
console.log(111);
},
click1(e) {
console.log(e);
console.log(111);
},
},
};
</script>
事件修饰符
- stop:阻止事件冒泡
- prevent:阻止默认事件的发生
- capture:捕获冒泡,即有冒泡发生时,有该修饰符的dom元素会先执行,如果有多个,从外到内依次执行,然后再按自然顺序执行触发的事件
- self:将事件绑定到自身,只有自身才能触发,通常用于避免冒泡事件的影响
- once:设置事件只能触发一次
5.6、条件分支
- v-if:为false不渲染
- v-show:为false仅仅使用css隐藏
<template>
<div class="about">
<h1>This is an about page</h1>
<p v-if="true">v-if=true</p>
<p v-if="false">v-if=false</p>
<p v-else>v-if=false</p>
<p v-show="true">v-show=true</p>
<p v-show="false">v-show=false</p>
</div>
</template>
<script>
export default {
data() {
return {
title: 'This is an about page',
};
},
};
</script>
5.7、循环
<template>
<div class="about">
<h1>This is an about page</h1>
<ul>
<li v-for="item in list" :key="item">{{ item }}</li>
</ul>
<ul>
<li v-for="(item,index) in list" :key="index">{{ index+' '+item }}</li>
</ul>
<ul>
<li v-for="(value,key) in book" :key="key">{{ key+' '+value }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
list: ['java', 'c#', 'c', 'nasm', 'vue'],
book: {
name: 'java web',
price: 128,
date: '2021-12-31',
},
};
},
};
</script>
5.8、v-model
<template>
<div class="about">
<h1>This is an about page</h1>
<input type="text" v-model="name">
<br>
<input type="number" v-model.number="age">
<br>
<input type="text" v-model.trim="name">
<br>
<input type="text" v-model.lazy="name">
</div>
</template>
<script>
export default {
data() {
return {
name: 'wenley',
age: 5,
};
},
};
</script>
修饰符
- number 限制用户输入的只能是数字(不是将用户输入的字符串转换成number!会将input里的值用parseFloat()转化!)
- trim 限制用户不能输入空格
- lazy:改变input框中的内容并不会使得数据马上发生变化,此时当输入框失去焦点后触发change事件
5.9、监视
<template>
<div class="about">
<h1>This is an about page</h1>
<input type="text" v-model="people.name"/>
{{ watchName }}
<input type="text" v-model="name"/>
</div>
</template>
<script>
export default {
data() {
return {
watchName: 'wenley',
name: 'wenley',
people: {
name: 'wenley',
},
};
},
watch: {
name(newvalue, oldvalue) {
console.log(oldvalue);
console.log(newvalue);
this.watchName = newvalue;
},
'people.name': {
handler(newvalue, oldvalue) {
console.log(oldvalue);
console.log(newvalue);
this.watchName = newvalue;
},
deep: true,
},
},
};
</script>
5.10、组件
home.vue
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<!-- 组件使用 -->
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// 组件引入
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue';
export default {
name: 'Home',
// 组件注册
components: {
HelloWorld,
},
};
</script>
helloworld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String,
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
5.10.1、组件通信-父传子
home.vue
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<!-- 组件使用 -->
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// 组件引入
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue';
export default {
name: 'Home',
// 组件注册
components: {
HelloWorld,
},
};
</script>
helloworld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String,
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
props默认值(缺省值)
props: {
demoString: {
type: String,
//缺省值
default: '',
//是否必传
required:true
},
demoNumber: {
type: Number,
default: 0
},
demoBoolean: {
type: Boolean,
default: true
},
demoArray: {
type: Array,
default: []
},
demoObject: {
type: Object,
default: {}
},
demoFunction: {
type: Function,
default: function () { }
}
}
5.10.2、组件通信-子传父
helloworld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>{{ msg1 }}</h2>
<input type="text" v-model="num" @input="()=>this.$emit('numChange',num)">
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank"
rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank"
rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String,
msg1: {
default: ['a', 'b'],
},
},
data() {
return {
num: 0,
};
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
home.vue
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld @numChange="numChange" msg="Welcome to Your Vue.js App"/>
</div>
<div>
111-
{{ res }}
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue';
export default {
name: 'Home',
components: {
HelloWorld,
},
data() {
return {
res: 0,
};
},
methods: {
numChange(num) {
console.log(num);
// eslint-disable-next-line radix
this.res += parseInt(num);
},
},
};
</script>
5.10.3、父子组件相互访问
helloworld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>{{ msg1 }}</h2>
<h3>{{ num }}</h3>
<!--<input type="text" v-model="num" @input="()=>this.$emit('numChange',num)">-->
<input type="button" value="res++" @click="()=>this.$parent.res++">
<input type="button" value="res++" @click="()=>this.$parent.numChange(1)">
<br>
<input type="button" value="log" @click="()=>this.$root.log()">
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank"
rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank"
rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String,
msg1: {
default: ['a', 'b'],
},
},
data() {
return {
num: 0,
};
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
home.vue
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld ref="helloworld" @numChange="numChange" msg="Welcome to Your Vue.js App"/>
</div>
<div>
111-
{{ res }}
</div>
<input type="button" value="num++" @click="()=>this.$refs.helloworld.num++">
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue';
export default {
name: 'Home',
components: {
HelloWorld,
},
data() {
return {
res: 0,
};
},
methods: {
numChange(num) {
console.log(num);
// eslint-disable-next-line radix
this.res += parseInt(num);
},
},
};
</script>
5.10.4、插槽
TheSlot.vue
<template>
<div>
<h3>This is slot test</h3>
<slot>
<span>这个插槽好像是空的?</span>
</slot>
</div>
</template>
<script>
export default {
name: 'TheSlot',
};
</script>
<style scoped>
</style>
About.vue
<template>
<div class="about">
<h1>This is an about page</h1>
<TheSlot>
<input type="text">
</TheSlot>
<TheSlot>
<input type="button" value="button">
</TheSlot>
<TheSlot>
<a href="https://www.baidu.com/">百度</a>
</TheSlot>
<TheSlot></TheSlot>
</div>
</template>
<script>
// eslint-disable-next-line import/extensions
import TheSlot from './TheSlot';
export default {
components: {
// eslint-disable-next-line vue/no-unused-components
TheSlot,
},
};
</script>
具名插槽
TheSlot.vue
<template>
<div>
<h3>This is slot test</h3>
<slot name="slot1">
<span>slot1好像是空的?</span>
</slot>
<br>
<slot name="slot2">
<span>slot2好像是空的?</span>
</slot>
<br>
<slot>
<span>slot3好像是空的?</span>
</slot>
</div>
</template>
<script>
export default {
name: 'TheSlot',
};
</script>
<style scoped>
</style>
About.vue
<template>
<div class="about">
<h1>This is an about page</h1>
<TheSlot>
<template v-slot:slot1>
<input type="text">
</template>
<template v-slot:slot2>
<input type="button" value="button">
</template>
</TheSlot>
<TheSlot>
<template v-slot:slot1>
<input type="text">
</template>
</TheSlot>
<TheSlot>
<a href="https://www.baidu.com/">百度</a>
<!--<template v-slot:default>-->
<!-- <input type="text">-->
<!--</template>-->
</TheSlot>
</div>
</template>
<script>
// eslint-disable-next-line import/extensions
import TheSlot from './TheSlot';
export default {
components: {
// eslint-disable-next-line vue/no-unused-components
TheSlot,
},
};
</script>
插槽数据
TheSlot.vue
<template>
<div>
<h3>This is slot test</h3>
<slot name="slot1">
<span>slot1好像是空的?</span>
</slot>
<br>
<slot name="slot2">
<span>slot2好像是空的?</span>
</slot>
<br>
<slot :user="user">
<span>slot3好像是空的?</span>
</slot>
</div>
</template>
<script>
export default {
name: 'TheSlot',
data() {
return {
user: {
name: 'slot',
},
};
},
};
</script>
<style scoped>
</style>
About.vue
<template>
<div class="about">
<h1>This is an about page</h1>
<TheSlot>
<template v-slot:slot1>
<input type="text">
</template>
<template v-slot:slot2>
<input type="button" value="button">
</template>
<template v-slot:default="children">
<span>{{children.user.name}}</span>
</template>
</TheSlot>
</div>
</template>
<script>
// eslint-disable-next-line import/extensions
import TheSlot from './TheSlot';
export default {
components: {
// eslint-disable-next-line vue/no-unused-components
TheSlot,
},
data() {
return {
user: {
name: 'about',
},
};
},
};
</script>
5.11、生命周期
官方描述:https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html#beforecreate
- beforeCreate:
- created:
- beforeMount:
- mounted:
- beforeUpdate:
- updated:
- beforeUnmount:
- unmounted:
- activated:keep-alive组件激活时触发
- deaactivated:keep-alive组件停用时触发
延迟处理
缓存标签
TheSlot.vue
<template>
<div>
<h3>This is slot test</h3>
<p>{{ num }}</p>
<slot name="slot1">
<span>slot1好像是空的?</span>
</slot>
<br>
<slot name="slot2">
<span>slot2好像是空的?</span>
</slot>
<br>
<slot :user="user">
<span>slot3好像是空的?</span>
</slot>
</div>
</template>
<script>
export default {
name: 'TheSlot',
data() {
return {
user: {
name: 'slot',
},
num: 0,
};
},
};
</script>
<style scoped>
</style>
About.vue
<template>
<div class="about">
<h1>This is an about page</h1>
<input type="button" value="num++" @click="()=>this.$refs.slot1.num++">
<input type="button" value="slot" @click="()=>this.isShow=!this.isShow">
<!--<TheSlot v-if="isShow" ref="slot1">-->
<!-- <template v-slot:slot1>-->
<!-- <input type="text">-->
<!-- </template>-->
<!-- <template v-slot:slot2>-->
<!-- <input type="button" value="button">-->
<!-- </template>-->
<!-- <template v-slot:default="children">-->
<!-- <span>{{children.user.name}}</span>-->
<!-- </template>-->
<!--</TheSlot>-->
<keep-alive>
<TheSlot v-if="isShow" ref="slot1">
<template v-slot:slot1>
<input type="text">
</template>
<template v-slot:slot2>
<input type="button" value="button">
</template>
<template v-slot:default="children">
<span>{{children.user.name}}</span>
</template>
</TheSlot>
</keep-alive>
</div>
</template>
<script>
// eslint-disable-next-line import/extensions
import TheSlot from './TheSlot';
export default {
components: {
// eslint-disable-next-line vue/no-unused-components
TheSlot,
},
data() {
return {
user: {
name: 'about',
},
isShow: true,
};
},
};
</script>
延迟处理
About.vue
<template>
<div class="about">
<h1>This is an about page</h1>
<input type="button" value="slot" @click="log">
<input v-if="isShow" type="text" ref="input">
</div>
</template>
<script>
// eslint-disable-next-line import/extensions
import TheSlot from './TheSlot';
export default {
components: {
// eslint-disable-next-line vue/no-unused-components
TheSlot,
},
data() {
return {
user: {
name: 'about',
},
isShow: true,
text: 'this is a text',
};
},
methods: {
log() {
this.isShow = !this.isShow;
if (this.isShow) {
this.$refs.input.focus();
}
},
},
};
</script>
<template>
<div class="about">
<h1>This is an about page</h1>
<input type="button" value="slot" @click="log">
<input v-if="isShow" type="text" ref="input">
</div>
</template>
<script>
// eslint-disable-next-line import/extensions
import TheSlot from './TheSlot';
export default {
components: {
// eslint-disable-next-line vue/no-unused-components
TheSlot,
},
data() {
return {
user: {
name: 'about',
},
isShow: true,
text: 'this is a text',
};
},
methods: {
log() {
this.isShow = !this.isShow;
// if (this.isShow) {
// this.$nextTick(() => {
// this.$refs.input.focus();
// });
// }
},
},
};
</script>
5.12、axios
本阶段后台代码:https://pan.baidu.com/s/1ani_CipaAw5vwyDV4MFxDw提取码:1shm
npm i -S axios
npm i -S qs
5.12.1、axios二次封装
import axios from 'axios';
import qs from 'qs';
const network = axios.create({
baseURL: 'http://localhost:8099/',
timeout: 5000,
});
network.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 请求拦截
network.interceptors.request.use((request) => {
console.log('请求拦截成功,给请求加点料');
// token添加
if (request.method === 'get' && request.params) {
// eslint-disable-next-line no-param-reassign
request.url = `${request.url}?${qs.stringify(request.params)}`;
// eslint-disable-next-line no-param-reassign
delete request.params;
}
return request;
}, (error) => {
console.log(error);
});
// 响应拦截
network.interceptors.response.use((response) => {
console.log('响应拦截成功,给响应加点料');
return response;
}, (error) => {
if (error) {
// eslint-disable-next-line default-case
switch (error.status) {
case 400:
// 错误请求
console.log('错误请求');
break;
case 401:
// 权限验证失败,跳转登录页
console.log('权限验证失败,跳转登录页');
break;
case 403:
// 请求被拒绝
console.log('拒绝请求');
break;
case 404:
// 页面找不到
console.log('页面找不到');
break;
case 405:
// 请求方法不被支持
console.log('请求方法不被支持');
break;
case 500:
// 服务器遇到错误
console.log('服务器遇到错误');
break;
case 502:
// 网关错误
console.log('网关错误');
break;
case 503:
// 服务不可用
console.log('服务不可用');
break;
}
} else {
// eslint-disable-next-line no-lonely-if
if (!window.navigator.onLine) {
// 断网处理
console.log('断网处理');
} else {
console.log('服务器崩溃');
}
}
});
export default {
// 导出post请求
post(url, data) {
return network.post(url, data);
},
// 导出get请求
get(url, data) {
return network.get(url, { params: data });
},
};
5.12.2、注入vue实例
import { createApp } from 'vue';
import App from './App.vue';
import network from './network/request';
import router from './router';
import store from './store';
const app = createApp(App);
// Vue.prototype.$http = network;
app.config.globalProperties.$http = network;
app.use(store)
.use(router)
.mount('#app');
5.12.3、使用
this.$http.post('post', {
str: 'wenley',
str1: '111',
})
.then((res) => {
console.log(res);
});
5.13、router
$router代表全局路由
$route代表当前页路由
5.13.1、快速入门
router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue'),
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;
App.vue
<template>
<div id="nav">
<!--router-link与router-view成对出现-->
<router-link to="/">Home</router-link>
|
<router-link to="/about">About</router-link>
</div>
<router-view/>
</template>
<script>
export default {
};
</script>
5.13.2、懒加载
直接加载会打成一个chunk,懒加载打成多个chunk
5.13.3、自定义router-link
vue3取消了router-link的tag标签
replace
<router-link to="/about" tag="span" event="dblclick">About Us</router-link>
with
<router-link to="/about" custom v-slot="{ navigate }">
<span @click="navigate" @keypress.enter="navigate" role="link">About Us</span>
</router-link>
5.13.4、$router.go()与$router.back()
go(-1): 原页面表单中的内容会丢失
- this.$router.go(-1):后退+刷新
- this.$router.go(0):刷新
- this.$router.go(1) :前进
back(): 原页表表单中的内容会保留
- this.$router.back():后退
- this.$router.back(0) 刷新
- this.$router.back(1):前进
5.13.5、$router的使用
<template>
<div id="nav">
<router-link to="/">Home</router-link>
|
<router-link to="/about">About</router-link>
|
<router-link to="/about1" custom v-slot="{navigate}">
<button @click="navigate">About1</button>
</router-link>
|
<button @click="about2">About2</button>
|
<button @click="$router.go(-1)">Back</button>
<!--<button @click="$router.back()">Back</button>-->
</div>
<router-view/>
</template>
<script>
export default {
methods: {
about2() {
this.$router.push('/about2');
},
},
};
</script>
5.13.6、命名视图
视图未命名
<template>
<div id="nav">
<router-link to="/">Home</router-link>
|
<router-link to="/about">About</router-link>
|
<router-link to="/about1" custom v-slot="{navigate}">
<button @click="navigate">About1</button>
</router-link>
|
<button @click="about2">About2</button>
</div>
<router-view/>
<router-view/>
<router-view/>
</template>
<script>
export default {
methods: {
about2() {
this.$router.push('/about2');
},
},
};
</script>
视图命名
<template>
<div id="nav">
<router-link to="/">Home</router-link>
|
<router-link to="/about">About</router-link>
|
<router-link to="/about1" custom v-slot="{navigate}">
<button @click="navigate">About1</button>
</router-link>
|
<button @click="about2">About2</button>
</div>
<router-view/>
<router-view name="About1" />
<router-view name="About2" />
</template>
<script>
export default {
methods: {
about2() {
this.$router.push('/about2');
},
},
};
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
// eslint-disable-next-line import/extensions
import About1 from '@/views/About1';
// eslint-disable-next-line import/extensions
import About2 from '@/views/About2';
const routes = [
{
path: '/',
name: 'Home',
components: {
default: Home,
About1,
About2,
},
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue'),
},
{
path: '/about1',
name: 'About1',
component: () => import('../views/About1.vue'),
},
{
path: '/about2',
name: 'About2',
component: () => import('../views/About2.vue'),
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;
5.13.7、路由嵌套
<template>
<div id="nav">
<router-link to="/">Home</router-link>
|
<router-link to="/about">About</router-link>
|
<router-link to="/about/a1" custom v-slot="{navigate}">
<button @click="navigate">About1</button>
</router-link>
|
<button @click="about2">About2</button>
</div>
<router-view/>
</template>
<script>
export default {
name: 'App',
methods: {
about2() {
this.$router.push('/about/a2');
},
},
};
</script>
<template>
<div class="about">
<router-link to="/about/a1" custom v-slot="{navigate}">
<button @click="navigate">About1</button>
</router-link>
|
<button @click="about2">About2</button>
<h1>This is an about page</h1>
<router-view/>
</div>
</template>
<script>
export default {
name: 'About',
data() {
return {};
},
methods: {
about2() {
this.$router.push('/about/a2');
},
},
};
</script>
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
// eslint-disable-next-line import/extensions
import About1 from '@/views/About1';
// eslint-disable-next-line import/extensions
import About2 from '@/views/About2';
// eslint-disable-next-line import/extensions
import About from '@/views/About';
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/about',
// name: 'About',
component: About,
children: [
{
path: 'a1',
component: About1,
},
{
path: 'a2',
component: About2,
},
],
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;
5.13.8、动态路由
params参数传递
<template>
<div id="nav">
<router-link to="/">Home</router-link>
|
<router-link to="/about/2">About</router-link>
|
<button @click="click">About</button>
</div>
<router-view/>
</template>
<script>
export default {
name: 'App',
methods: {
click() {
this.$router.push('/about/3');
},
},
};
</script>
<template>
<div class="about">
<h1>This is an about page</h1>
<p>{{$route.path}}</p>
<p>{{$route.params.id}}</p>
</div>
</template>
<script>
export default {
name: 'About',
data() {
return {};
},
};
</script>
// eslint-disable-next-line import/extensions
import About from '@/views/About';
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/about/:id',
name: 'About',
component: About,
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;
query参数传递
<template>
<div id="nav">
<router-link to="/">Home</router-link>
|
<router-link to="/about?name=wenley&age=1">About</router-link>
|
<button @click="click">About</button>
</div>
<router-view/>
</template>
<script>
export default {
name: 'App',
methods: {
click() {
this.$router.push({
path: '/about',
query: {
name: 'wenley',
age: 2,
},
});
},
},
};
</script>
<template>
<div class="about">
<h1>This is an about page</h1>
<p>{{$route.path}}</p>
<p>{{$route.query.name}}</p>
<p>{{$route.query.age}}</p>
</div>
</template>
<script>
export default {
name: 'About',
data() {
return {};
},
};
</script>
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
// eslint-disable-next-line import/extensions
import About1 from '@/views/About1';
// eslint-disable-next-line import/extensions
import About2 from '@/views/About2';
// eslint-disable-next-line import/extensions
import About from '@/views/About';
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/about',
name: 'About',
component: About,
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;
5.13.9、重定向
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
// eslint-disable-next-line import/extensions
import About from '@/views/About';
// eslint-disable-next-line import/extensions
import About1 from '@/views/About1';
const routes = [
{
path: '/',
name: 'Home',
component: Home,
// redirect: '/about1',
// redirect: { name: 'About1' },
redirect: {
path: '/about',
query: {
name: 'wenley',
age: 4,
},
},
},
{
path: '/about',
name: 'About',
component: About,
},
{
path: '/about1',
name: 'About1',
component: About1,
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;
5.13.10、别名
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
// eslint-disable-next-line import/extensions
import About from '@/views/About';
// eslint-disable-next-line import/extensions
import About1 from '@/views/About1';
const routes = [
{
path: '/',
name: 'Home',
component: Home,
// alias: '/home',
alias: ['/home', '/h'],
},
{
path: '/about',
name: 'About',
component: About,
},
{
path: '/about1',
name: 'About1',
component: About1,
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;
5.13.11、导航守卫
待补
5.14、Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
5.14.1、快速入门
import { createStore } from 'vuex';
export default createStore({
state: {
num: 0,
},
mutations: {
},
actions: {
},
modules: {
},
});
<template>
<div class="about">
<h1>This is an about page</h1>
<div @click="()=>this.$store.state.num++">
{{ $store.state.num }}
</div>
</div>
</template>
<script>
export default {
name: 'About',
data() {
return {};
},
methods: {},
};
</script>
5.14.2、mutations的使用
mutations基本使用
import { createStore } from 'vuex';
export default createStore({
state: {
num: 0,
num1: 0,
},
mutations: {
add(state) {
// eslint-disable-next-line no-plusplus
state.num1 += 2;
},
},
actions: {},
modules: {},
});
<template>
<div class="about">
<h1>This is an about page</h1>
<div @click="()=>this.$store.state.num++">
{{ $store.state.num }}
</div>
<div @click="()=>this.$store.commit('add')">
{{ $store.state.num1 }}
</div>
</div>
</template>
<script>
export default {
name: 'About',
data() {
return {};
},
methods: {},
};
</script>
mutations传参(单参数)
import { createStore } from 'vuex';
export default createStore({
state: {
num: 0,
num1: 0,
num2: 0,
},
mutations: {
add(state) {
// eslint-disable-next-line no-plusplus
state.num1 += 2;
},
add1(state, count) {
// eslint-disable-next-line no-plusplus
state.num2 += count;
},
},
actions: {},
modules: {},
});
<template>
<div class="about">
<h1>This is an about page</h1>
<div @click="()=>this.$store.state.num++">
{{ $store.state.num }}
</div>
<div @click="()=>this.$store.commit('add')">
{{ $store.state.num1 }}
</div>
<div @click="()=>this.$store.commit('add1',Math.random())">
{{ $store.state.num2 }}
</div>
</div>
</template>
<script>
export default {
name: 'About',
data() {
return {};
},
methods: {},
};
</script>
mutations传参(多参数)
import { createStore } from 'vuex';
export default createStore({
state: {
num: 0,
num1: 0,
num2: 0,
num3: 0,
},
mutations: {
add(state) {
// eslint-disable-next-line no-plusplus
state.num1 += 2;
},
add1(state, step) {
// eslint-disable-next-line no-plusplus
state.num2 += step;
},
// add2(state, step, count) {
// // eslint-disable-next-line no-plusplus
// state.num3 += step * count;
// },
add2(state, object) {
// eslint-disable-next-line no-plusplus
state.num3 += object.step * object.count;
},
},
actions: {},
modules: {},
});
<template>
<div class="about">
<h1>This is an about page</h1>
<div @click="()=>this.$store.state.num++">
{{ $store.state.num }}
</div>
<div @click="()=>this.$store.commit('add')">
{{ $store.state.num1 }}
</div>
<!--单参数-->
<div @click="()=>this.$store.commit('add1',Math.random())">
{{ $store.state.num2 }}
</div>
<!--多参数-->
<!--<div @click="()=>this.$store.commit('add2',2,2)">-->
<!-- {{ $store.state.num3 }}-->
<!--</div>-->
<div @click="()=>this.$store.commit('add2',{step: 2,count: 2})">
{{ $store.state.num3 }}
</div>
</div>
</template>
<script>
export default {
name: 'About',
data() {
return {};
},
methods: {},
};
</script>
5.14.3、devTools
5.14.4、getters
import { createStore } from 'vuex';
export default createStore({
state: {
num: 0,
},
mutations: {
add(state, step) {
state.num += step;
},
},
getters: {
num2(state) {
return state.num * state.num;
},
},
actions: {},
modules: {},
});
<template>
<div class="about">
<h1>This is an about page</h1>
<div @click="()=>this.$store.commit('add',2)">
{{ $store.state.num }}
</div>
<div>
{{ $store.getters.num2 }}
</div>
</div>
</template>
<script>
export default {
name: 'About',
data() {
return {};
},
methods: {},
};
</script>
5.14.5、actions
import { createStore } from 'vuex';
export default createStore({
state: {
num: 0,
},
mutations: {
add(state, step) {
state.num += step;
},
},
getters: {
num2(state) {
return state.num * state.num;
},
},
actions: {
api(content) {
setTimeout(() => {
// eslint-disable-next-line no-param-reassign
// content.state.num += 5;
content.commit('add', 5);
}, 5000);
},
},
modules: {},
});
<template>
<div class="about">
<h1>This is an about page</h1>
<div @click="()=>this.$store.commit('add',2)">
{{ $store.state.num }}
</div>
<div>
{{ $store.getters.num2 }}
</div>
<div @click="()=>this.$store.dispatch('api')">
点击请求API
</div>
</div>
</template>
<script>
export default {
name: 'About',
data() {
return {};
},
methods: {},
};
</script>
5.14.6、modules
import { createStore } from 'vuex';
const moduleA = {
state: () => ({ num: 1 }),
mutations: {},
actions: {},
getters: {},
};
const moduleB = {
state: () => ({ num: 2 }),
mutations: {},
actions: {},
getters: {},
};
export default createStore({
modules: {
a: moduleA,
b: moduleB,
},
});
<template>
<div class="about">
<h1>This is an about page</h1>
<div @click="()=>this.$store.commit('add',2)">
{{ $store.state.a.num }}
</div>
<div>
{{ $store.state.b.num }}
</div>
</div>
</template>
<script>
export default {
name: 'About',
data() {
return {};
},
methods: {},
};
</script>