php网站优化,凡科网上传网站,深圳的建设工程信息网,怎么样开一个公司网站VUE学习笔记 本文章以vue3来记录的#xff0c;但并非记录vue3所有变化#xff01; 1、ES6语法
1.1、let变量声明
let用于声明变量有局部作用域let声明的变量不会提升#xff08;只能先定义后使用#xff09;
1.2、const变量声明
const用于声明常量const声明的常量也不会…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 xx*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 n5;
})
console.log(array1) // 6,7,8,9map() // 接受一个函数,同样的也有一个参数,相当于对数组元素每个都应用这个函数的规则
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 sn;
},0)console.log(sum)1.5、字符串新增方法
String.startswith(string) 判断String是否以string开头 返回true或falseString.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 old1.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 10console.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, 9function myFunction(a, b, c) {console.log(a,b,c); return abc;
}
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// 由此可见,猜测正确
1
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, 剩下的生成了数组arr1.9、模块化编程
1.9.1、module的引入
编写html文件时,通常会引入许多js文件,如下:
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./1.js/scriptscript 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 langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./1.js typemodule/scriptscript src./2.js typemodule/scriptscript src./3.js typemodule/script
/head
body/body
/html1.9.2、访问不同js文件下相同的变量
// 1.jslet name zhangsan;
function add(a, b){return ab}export {name, add}; // 注意这里是json的简化写法,相当于 export {name:name};// 3.jsimport {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)); // 11.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.jslet name zhangsan;export {name as name1};// 2.jslet name lisi;export {name as name2};// 3.js
import {name1} from ./1.js;
import {name2} from ./2.js;console.log(name1, name2); // zhangsan lisi1.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
node.js
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包的官网urlauthor作者contributors包的其他贡献者dependencies依赖包列表repository包代码存放位置main程序入口文件keywords关键词
3、webpack npm install webpack -g3.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 langen
headmeta charsetUTF-8titleTitle/title
/head
body
script typetext/javascript src../dist/bundle.js charsetutf-8/script
/body
/htmlpackage.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 dev3.2、多入口和多出口
const path require(path)module.exports {// 单chuank// entry: [./src/index1.js,./src/index2.js]// 多chuankkey为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 -Dwebpack.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和urlstyle-loader把样式插到Dom中
npm i css-loader style-loader -Dindex.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 -Dless.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 -Dsass.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 -Dwebpack.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 -Dindex.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压缩
npm i optimize-css-assets-webpack-plugin -Dwebpack.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 -Dwebpack.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-cli4.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?namefrost).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?namefrost)
]).then(res{console.log(res);
})4.3、全局配置
import axios from axios;console.log(hello,world!)axios.defaults.baseURL http://localhost:8099/
axios.defaults.timeout 5000axios.get(name?namefrost).then(res{console.log(res);
})4.5、实例封装
import axios from axios;console.log(hello,world!)const localhost1axios.create({baseURL: http://localhost:8099/
})
const localhost2axios.create({baseURL: http://localhost:8199/
})
localhost1.get(name?namefrost).then(res{console.log(res);
})4.6、拦截器
import axios from axios;console.log(hello,world!)const localhost1axios.create({baseURL: http://localhost:8099/
})
const localhost2axios.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?namefrost).then(res{console.log(res);
})5、VUE
5.1、vue脚手架
全局安装vue脚手架
npm install -g vue/cli创建项目
vue create 项目名PS D:\ITEM vue create vueVue 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 vueVue 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\.vuerc5.2、vue.config.js
与webpack配置不一样精简了许多
详细配置清单
5.3、插值
templatediv classabouth1This is an about page/h1p{{ msg }}/p!--不解析内部内容--p v-pre{{ msg }}/p!--只显示初始化的值不跟随data变化--p v-once{{ msg }}/p!--不解析html标签只作为字符串显示--p v-textmsg/p!--解析html标签--p v-htmlmsg/p/div
/templatescript
export default {data() {return {msg: stronghello world!/strong,};},
};
/scripttemplatediv classabouth1 :titlemsgThis is an about page/h1!--h1 v-bind:titlemsgThis is an about page/h1--p stylecolor:redThis is an about page/pp :style{font-size:12px}This is an about page/pp :stylestyleThis is an about page/p/div
/templatescript
export default {data() {return {msg: This is an about page,style: {font-size: 12px,},};},
};
/script几乎所有的html属性都可以使用v-bind绑定
5.4、计算属性
templatediv classabouth1This is an about page/h1p{{ title }} - {{ slogan }}/pp{{ title - slogan }}/pp{{ TheTitle }}/p/div
/templatescript
export default {data() {return {title: This is an about page,slogan: 标语,};},computed: {// 只要依赖值未变化则不会重新计算TheTitle: {get() {return ${this.title}#${this.slogan};},},},
};
/script5.5、事件
templatediv classabouth1 clickclickThis is an about page/h1!--h1 v-on:clickclickThis is an about page/h1--h1 clickclick1($event)This is an about page/h1!--h1 v-on:clickclick1($event)This is an about page/h1--/div
/templatescript
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隐藏
templatediv classabouth1This is an about page/h1p v-iftruev-iftrue/pp v-iffalsev-iffalse/pp v-elsev-iffalse/pp v-showtruev-showtrue/pp v-showfalsev-showfalse/p/div
/templatescript
export default {data() {return {title: This is an about page,};},
};
/script5.7、循环
templatediv classabouth1This is an about page/h1ulli v-foritem in list :keyitem{{ item }}/li/ululli v-for(item,index) in list :keyindex{{ index item }}/li/ululli v-for(value,key) in book :keykey{{ key value }}/li/ul/div
/templatescript
export default {data() {return {list: [java, c#, c, nasm, vue],book: {name: java web,price: 128,date: 2021-12-31,},};},
};
/script5.8、v-model
templatediv classabouth1This is an about page/h1input typetext v-modelnamebrinput typenumber v-model.numberagebrinput typetext v-model.trimnamebrinput typetext v-model.lazyname/div
/templatescript
export default {data() {return {name: wenley,age: 5,};},
};
/script修饰符
number 限制用户输入的只能是数字不是将用户输入的字符串转换成number会将input里的值用parseFloat()转化trim 限制用户不能输入空格lazy改变input框中的内容并不会使得数据马上发生变化此时当输入框失去焦点后触发change事件
5.9、监视
templatediv classabouth1This is an about page/h1input typetext v-modelpeople.name/{{ watchName }}input typetext v-modelname//div
/templatescript
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,},},
};
/script5.10、组件
home.vue
templatediv classhomeimg altVue logo src../assets/logo.png!-- 组件使用 --HelloWorld msgWelcome to Your Vue.js App//div
/templatescript
// 组件引入
// is an alias to /src
import HelloWorld from /components/HelloWorld.vue;export default {name: Home,// 组件注册components: {HelloWorld,},
};
/scripthelloworld.vue
templatediv classhelloh1{{ msg }}/h1pFor a guide and recipes on how to configure / customize this project,brcheck out thea hrefhttps://cli.vuejs.org target_blank relnoopenervue-cli documentation/a./ph3Installed CLI Plugins/h3ullia hrefhttps://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel target_blank relnoopenerbabel/a/lilia hrefhttps://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router target_blank relnoopenerrouter/a/lilia hrefhttps://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex target_blank relnoopenervuex/a/lilia hrefhttps://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint target_blank relnoopenereslint/a/li/ulh3Essential Links/h3ullia hrefhttps://vuejs.org target_blank relnoopenerCore Docs/a/lilia hrefhttps://forum.vuejs.org target_blank relnoopenerForum/a/lilia hrefhttps://chat.vuejs.org target_blank relnoopenerCommunity Chat/a/lilia hrefhttps://twitter.com/vuejs target_blank relnoopenerTwitter/a/lilia hrefhttps://news.vuejs.org target_blank relnoopenerNews/a/li/ulh3Ecosystem/h3ullia hrefhttps://router.vuejs.org target_blank relnoopenervue-router/a/lilia hrefhttps://vuex.vuejs.org target_blank relnoopenervuex/a/lilia hrefhttps://github.com/vuejs/vue-devtools#vue-devtools target_blank relnoopenervue-devtools/a/lilia hrefhttps://vue-loader.vuejs.org target_blank relnoopenervue-loader/a/lilia hrefhttps://github.com/vuejs/awesome-vue target_blank relnoopenerawesome-vue/a/li/ul/div
/templatescript
export default {name: HelloWorld,props: {msg: String,},
};
/script!-- Add scoped attribute to limit CSS to this component only --
style scoped langscss
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
/style5.10.1、组件通信-父传子
home.vue
templatediv classhomeimg altVue logo src../assets/logo.png!-- 组件使用 --HelloWorld msgWelcome to Your Vue.js App//div
/templatescript
// 组件引入
// is an alias to /src
import HelloWorld from /components/HelloWorld.vue;export default {name: Home,// 组件注册components: {HelloWorld,},
};
/scripthelloworld.vue
templatediv classhelloh1{{ msg }}/h1pFor a guide and recipes on how to configure / customize this project,brcheck out thea hrefhttps://cli.vuejs.org target_blank relnoopenervue-cli documentation/a./ph3Installed CLI Plugins/h3ullia hrefhttps://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel target_blank relnoopenerbabel/a/lilia hrefhttps://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router target_blank relnoopenerrouter/a/lilia hrefhttps://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex target_blank relnoopenervuex/a/lilia hrefhttps://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint target_blank relnoopenereslint/a/li/ulh3Essential Links/h3ullia hrefhttps://vuejs.org target_blank relnoopenerCore Docs/a/lilia hrefhttps://forum.vuejs.org target_blank relnoopenerForum/a/lilia hrefhttps://chat.vuejs.org target_blank relnoopenerCommunity Chat/a/lilia hrefhttps://twitter.com/vuejs target_blank relnoopenerTwitter/a/lilia hrefhttps://news.vuejs.org target_blank relnoopenerNews/a/li/ulh3Ecosystem/h3ullia hrefhttps://router.vuejs.org target_blank relnoopenervue-router/a/lilia hrefhttps://vuex.vuejs.org target_blank relnoopenervuex/a/lilia hrefhttps://github.com/vuejs/vue-devtools#vue-devtools target_blank relnoopenervue-devtools/a/lilia hrefhttps://vue-loader.vuejs.org target_blank relnoopenervue-loader/a/lilia hrefhttps://github.com/vuejs/awesome-vue target_blank relnoopenerawesome-vue/a/li/ul/div
/templatescript
export default {name: HelloWorld,props: {msg: String,},
};
/script!-- Add scoped attribute to limit CSS to this component only --
style scoped langscss
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
/styleprops默认值缺省值
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
templatediv classhelloh1{{ msg }}/h1h2{{ msg1 }}/h2input typetext v-modelnum input()this.$emit(numChange,num)pFor a guide and recipes on how to configure / customize this project,brcheck out thea hrefhttps://cli.vuejs.org target_blank relnoopenervue-cli documentation/a./ph3Installed CLI Plugins/h3ullia hrefhttps://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babeltarget_blank relnoopenerbabel/a/lilia hrefhttps://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-routertarget_blank relnoopenerrouter/a/lilia hrefhttps://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuextarget_blank relnoopenervuex/a/lilia hrefhttps://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslinttarget_blank relnoopenereslint/a/li/ulh3Essential Links/h3ullia hrefhttps://vuejs.org target_blank relnoopenerCore Docs/a/lilia hrefhttps://forum.vuejs.org target_blank relnoopenerForum/a/lilia hrefhttps://chat.vuejs.org target_blank relnoopenerCommunity Chat/a/lilia hrefhttps://twitter.com/vuejs target_blank relnoopenerTwitter/a/lilia hrefhttps://news.vuejs.org target_blank relnoopenerNews/a/li/ulh3Ecosystem/h3ullia hrefhttps://router.vuejs.org target_blank relnoopenervue-router/a/lilia hrefhttps://vuex.vuejs.org target_blank relnoopenervuex/a/lilia hrefhttps://github.com/vuejs/vue-devtools#vue-devtools target_blankrelnoopenervue-devtools/a/lilia hrefhttps://vue-loader.vuejs.org target_blank relnoopenervue-loader/a/lilia hrefhttps://github.com/vuejs/awesome-vue target_blankrelnoopenerawesome-vue/a/li/ul/div
/templatescript
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 langscss
h3 {margin: 40px 0 0;
}ul {list-style-type: none;padding: 0;
}li {display: inline-block;margin: 0 10px;
}a {color: #42b983;
}
/stylehome.vue
templatediv classhomeimg altVue logo src../assets/logo.pngHelloWorld numChangenumChange msgWelcome to Your Vue.js App//divdiv111-{{ res }}/div
/templatescript
// 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 radixthis.res parseInt(num);},},
};
/script5.10.3、父子组件相互访问
helloworld.vue
templatediv classhelloh1{{ msg }}/h1h2{{ msg1 }}/h2h3{{ num }}/h3!--input typetext v-modelnum input()this.$emit(numChange,num)--input typebutton valueres click()this.$parent.resinput typebutton valueres click()this.$parent.numChange(1)brinput typebutton valuelog click()this.$root.log()pFor a guide and recipes on how to configure / customize this project,brcheck out thea hrefhttps://cli.vuejs.org target_blank relnoopenervue-cli documentation/a./ph3Installed CLI Plugins/h3ullia hrefhttps://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babeltarget_blank relnoopenerbabel/a/lilia hrefhttps://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-routertarget_blank relnoopenerrouter/a/lilia hrefhttps://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuextarget_blank relnoopenervuex/a/lilia hrefhttps://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslinttarget_blank relnoopenereslint/a/li/ulh3Essential Links/h3ullia hrefhttps://vuejs.org target_blank relnoopenerCore Docs/a/lilia hrefhttps://forum.vuejs.org target_blank relnoopenerForum/a/lilia hrefhttps://chat.vuejs.org target_blank relnoopenerCommunity Chat/a/lilia hrefhttps://twitter.com/vuejs target_blank relnoopenerTwitter/a/lilia hrefhttps://news.vuejs.org target_blank relnoopenerNews/a/li/ulh3Ecosystem/h3ullia hrefhttps://router.vuejs.org target_blank relnoopenervue-router/a/lilia hrefhttps://vuex.vuejs.org target_blank relnoopenervuex/a/lilia hrefhttps://github.com/vuejs/vue-devtools#vue-devtools target_blankrelnoopenervue-devtools/a/lilia hrefhttps://vue-loader.vuejs.org target_blank relnoopenervue-loader/a/lilia hrefhttps://github.com/vuejs/awesome-vue target_blankrelnoopenerawesome-vue/a/li/ul/div
/templatescript
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 langscss
h3 {margin: 40px 0 0;
}ul {list-style-type: none;padding: 0;
}li {display: inline-block;margin: 0 10px;
}a {color: #42b983;
}
/stylehome.vue
templatediv classhomeimg altVue logo src../assets/logo.pngHelloWorld refhelloworld numChangenumChange msgWelcome to Your Vue.js App//divdiv111-{{ res }}/divinput typebutton valuenum click()this.$refs.helloworld.num
/templatescript
// 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 radixthis.res parseInt(num);},},
};
/script5.10.4、插槽
TheSlot.vue
templatedivh3This is slot test/h3slotspan这个插槽好像是空的/span/slot/div
/templatescript
export default {name: TheSlot,
};
/scriptstyle scoped/styleAbout.vue
templatediv classabouth1This is an about page/h1TheSlotinput typetext/TheSlotTheSlotinput typebutton valuebutton/TheSlotTheSlota hrefhttps://www.baidu.com/百度/a/TheSlotTheSlot/TheSlot/div
/templatescript
// eslint-disable-next-line import/extensions
import TheSlot from ./TheSlot;export default {components: {// eslint-disable-next-line vue/no-unused-componentsTheSlot,},
};
/script具名插槽
TheSlot.vue
templatedivh3This is slot test/h3slot nameslot1spanslot1好像是空的/span/slotbrslot nameslot2spanslot2好像是空的/span/slotbrslotspanslot3好像是空的/span/slot/div
/templatescript
export default {name: TheSlot,
};
/scriptstyle scoped/styleAbout.vue
templatediv classabouth1This is an about page/h1TheSlottemplate v-slot:slot1input typetext/templatetemplate v-slot:slot2input typebutton valuebutton/template/TheSlotTheSlottemplate v-slot:slot1input typetext/template/TheSlotTheSlota hrefhttps://www.baidu.com/百度/a!--template v-slot:default--!-- input typetext--!--/template--/TheSlot/div
/templatescript
// eslint-disable-next-line import/extensions
import TheSlot from ./TheSlot;export default {components: {// eslint-disable-next-line vue/no-unused-componentsTheSlot,},
};
/script插槽数据
TheSlot.vue
templatedivh3This is slot test/h3slot nameslot1spanslot1好像是空的/span/slotbrslot nameslot2spanslot2好像是空的/span/slotbrslot :useruserspanslot3好像是空的/span/slot/div
/templatescript
export default {name: TheSlot,data() {return {user: {name: slot,},};},
};
/scriptstyle scoped/styleAbout.vue
templatediv classabouth1This is an about page/h1TheSlottemplate v-slot:slot1input typetext/templatetemplate v-slot:slot2input typebutton valuebutton/templatetemplate v-slot:defaultchildrenspan{{children.user.name}}/span/template/TheSlot/div
/templatescript
// eslint-disable-next-line import/extensions
import TheSlot from ./TheSlot;export default {components: {// eslint-disable-next-line vue/no-unused-componentsTheSlot,},data() {return {user: {name: about,},};},
};
/script5.11、生命周期 官方描述https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html#beforecreate
beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeUnmountunmountedactivatedkeep-alive组件激活时触发deaactivatedkeep-alive组件停用时触发
延迟处理
缓存标签
TheSlot.vue
templatedivh3This is slot test/h3p{{ num }}/pslot nameslot1spanslot1好像是空的/span/slotbrslot nameslot2spanslot2好像是空的/span/slotbrslot :useruserspanslot3好像是空的/span/slot/div
/templatescript
export default {name: TheSlot,data() {return {user: {name: slot,},num: 0,};},
};
/scriptstyle scoped/styleAbout.vue
templatediv classabouth1This is an about page/h1input typebutton valuenum click()this.$refs.slot1.numinput typebutton valueslot click()this.isShow!this.isShow!--TheSlot v-ifisShow refslot1--!-- template v-slot:slot1--!-- input typetext--!-- /template--!-- template v-slot:slot2--!-- input typebutton valuebutton--!-- /template--!-- template v-slot:defaultchildren--!-- span{{children.user.name}}/span--!-- /template--!--/TheSlot--keep-aliveTheSlot v-ifisShow refslot1template v-slot:slot1input typetext/templatetemplate v-slot:slot2input typebutton valuebutton/templatetemplate v-slot:defaultchildrenspan{{children.user.name}}/span/template/TheSlot/keep-alive/div
/templatescript
// eslint-disable-next-line import/extensions
import TheSlot from ./TheSlot;export default {components: {// eslint-disable-next-line vue/no-unused-componentsTheSlot,},data() {return {user: {name: about,},isShow: true,};},
};
/script延迟处理
About.vue
templatediv classabouth1This is an about page/h1input typebutton valueslot clickloginput v-ifisShow typetext refinput/div
/templatescript
// eslint-disable-next-line import/extensions
import TheSlot from ./TheSlot;export default {components: {// eslint-disable-next-line vue/no-unused-componentsTheSlot,},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();}},},
};
/scripttemplatediv classabouth1This is an about page/h1input typebutton valueslot clickloginput v-ifisShow typetext refinput/div
/templatescript
// eslint-disable-next-line import/extensions
import TheSlot from ./TheSlot;export default {components: {// eslint-disable-next-line vue/no-unused-componentsTheSlot,},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();// });// }},},
};
/script5.12、axios
npm i -S axios
npm i -S qs5.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-reassignrequest.url ${request.url}?${qs.stringify(request.params)};// eslint-disable-next-line no-param-reassigndelete 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-caseswitch (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-ifif (!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
templatediv idnav!--router-link与router-view成对出现--router-link to/Home/router-link|router-link to/aboutAbout/router-link/divrouter-view/
/templatescriptexport default {
};
/script5.13.2、懒加载 直接加载会打成一个chunk懒加载打成多个chunk
5.13.3、自定义router-link
vue3取消了router-link的tag标签
replace
router-link to/about tagspan eventdblclickAbout Us/router-link
with
router-link to/about custom v-slot{ navigate }span clicknavigate keypress.enternavigate rolelinkAbout Us/span
/router-link5.13.4、router.go()与router.go()与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的使用
templatediv idnavrouter-link to/Home/router-link|router-link to/aboutAbout/router-link|router-link to/about1 custom v-slot{navigate}button clicknavigateAbout1/button/router-link|button clickabout2About2/button|button click$router.go(-1)Back/button!--button click$router.back()Back/button--/divrouter-view/
/templatescriptexport default {methods: {about2() {this.$router.push(/about2);},},
};
/script5.13.6、命名视图
视图未命名
templatediv idnavrouter-link to/Home/router-link|router-link to/aboutAbout/router-link|router-link to/about1 custom v-slot{navigate}button clicknavigateAbout1/button/router-link|button clickabout2About2/button/divrouter-view/router-view/router-view/
/templatescriptexport default {methods: {about2() {this.$router.push(/about2);},},
};
/script视图命名
templatediv idnavrouter-link to/Home/router-link|router-link to/aboutAbout/router-link|router-link to/about1 custom v-slot{navigate}button clicknavigateAbout1/button/router-link|button clickabout2About2/button/divrouter-view/router-view nameAbout1 /router-view nameAbout2 /
/templatescriptexport default {methods: {about2() {this.$router.push(/about2);},},
};
1234567891011121314151617181920212223242526
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、路由嵌套
templatediv idnavrouter-link to/Home/router-link|router-link to/aboutAbout/router-link|router-link to/about/a1 custom v-slot{navigate}button clicknavigateAbout1/button/router-link|button clickabout2About2/button/divrouter-view/
/templatescriptexport default {name: App,methods: {about2() {this.$router.push(/about/a2);},},
};
/scripttemplatediv classaboutrouter-link to/about/a1 custom v-slot{navigate}button clicknavigateAbout1/button/router-link|button clickabout2About2/buttonh1This is an about page/h1router-view//div
/templatescriptexport default {name: About,data() {return {};},methods: {about2() {this.$router.push(/about/a2);},},
};
/scriptimport { 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参数传递
templatediv idnavrouter-link to/Home/router-link|router-link to/about/2About/router-link|button clickclickAbout/button/divrouter-view/
/templatescriptexport default {name: App,methods: {click() {this.$router.push(/about/3);},},
};
/scripttemplatediv classabouth1This is an about page/h1p{{$route.path}}/pp{{$route.params.id}}/p/div
/templatescriptexport 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参数传递
templatediv idnavrouter-link to/Home/router-link|router-link to/about?namewenleyage1About/router-link|button clickclickAbout/button/divrouter-view/
/templatescriptexport default {name: App,methods: {click() {this.$router.push({path: /about,query: {name: wenley,age: 2,},});},},
};
/scripttemplatediv classabouth1This is an about page/h1p{{$route.path}}/pp{{$route.query.name}}/pp{{$route.query.age}}/p/div
/templatescriptexport default {name: About,data() {return {};},
};
/scriptimport { 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: {},
});templatediv classabouth1This is an about page/h1div click()this.$store.state.num{{ $store.state.num }}/div/div
/templatescriptexport default {name: About,data() {return {};},methods: {},
};
/script5.14.2、mutations的使用 mutations基本使用
import { createStore } from vuex;export default createStore({state: {num: 0,num1: 0,},mutations: {add(state) {// eslint-disable-next-line no-plusplusstate.num1 2;},},actions: {},modules: {},
});
12345678910111213141516
templatediv classabouth1This is an about page/h1div click()this.$store.state.num{{ $store.state.num }}/divdiv click()this.$store.commit(add){{ $store.state.num1 }}/div/div
/templatescriptexport default {name: About,data() {return {};},methods: {},
};
/scriptmutations传参单参数
import { createStore } from vuex;export default createStore({state: {num: 0,num1: 0,num2: 0,},mutations: {add(state) {// eslint-disable-next-line no-plusplusstate.num1 2;},add1(state, count) {// eslint-disable-next-line no-plusplusstate.num2 count;},},actions: {},modules: {},
});templatediv classabouth1This is an about page/h1div click()this.$store.state.num{{ $store.state.num }}/divdiv click()this.$store.commit(add){{ $store.state.num1 }}/divdiv click()this.$store.commit(add1,Math.random()){{ $store.state.num2 }}/div/div
/templatescriptexport default {name: About,data() {return {};},methods: {},
};
/scriptmutations传参多参数
import { createStore } from vuex;export default createStore({state: {num: 0,num1: 0,num2: 0,num3: 0,},mutations: {add(state) {// eslint-disable-next-line no-plusplusstate.num1 2;},add1(state, step) {// eslint-disable-next-line no-plusplusstate.num2 step;},// add2(state, step, count) {// // eslint-disable-next-line no-plusplus// state.num3 step * count;// },add2(state, object) {// eslint-disable-next-line no-plusplusstate.num3 object.step * object.count;},},actions: {},modules: {},
});templatediv classabouth1This is an about page/h1div click()this.$store.state.num{{ $store.state.num }}/divdiv 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
/templatescriptexport default {name: About,data() {return {};},methods: {},
};
/script5.14.3、devTools
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: {},
});templatediv classabouth1This is an about page/h1div click()this.$store.commit(add,2){{ $store.state.num }}/divdiv{{ $store.getters.num2 }}/div/div
/templatescriptexport default {name: About,data() {return {};},methods: {},
};
/script5.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: {},
});templatediv classabouth1This is an about page/h1div click()this.$store.commit(add,2){{ $store.state.num }}/divdiv{{ $store.getters.num2 }}/divdiv click()this.$store.dispatch(api)点击请求API/div/div
/templatescriptexport default {name: About,data() {return {};},methods: {},
};
/script5.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,},
});templatediv classabouth1This is an about page/h1div click()this.$store.commit(add,2){{ $store.state.a.num }}/divdiv{{ $store.state.b.num }}/div/div
/templatescriptexport default {name: About,data() {return {};},methods: {},
};
/script
