本文详细介绍了Vue.js中路由字典的配置、路由跳转、vue脚手架的安装和设置、懒加载、全局组件管理、插槽技术、Vuex数据状态管理、TypeScript语法、模块化开发以及Vue3的新特性的概述。
a. 修改路由字典:
{path:“/相对路径/:自定义参数名”, component:页面组件对象, props:true}
b. 跳转时:
<router-link to=“/相对路径/参数值”
或
this.$router.push(“/相对路径/参数值”)
c. 下一个页面接:
1). props:[ ‘自定义参数名’ ]
2). 可将"自定义参数名"用作绑定或程序中都行
==================================================================
(1). 设置npm默认使用国内淘宝镜像仓库:
npm config set registry http://registry.npm.taobao.org
备选: npm i -g cnpm --registry=http://registry.npm.taobao.org
(2). 安装可反复生成项目脚手架代码的工具:
npm i -g @vue/cli
备选: cnpm i -g @vue/cli
(3). 启动vue脚手架项目
npm run serve
(4). 打开浏览器，地址栏输入:
http://localhost:8080
(1). 唯一完整的HTML页面: 一分为三:
a. public文件夹
1). 图片img文件夹放在public文件夹下
2). 第三方css的压缩版和第三方js的压缩版都放在public文件夹下
3). 唯一完整的HTML文件index.html中，head中引入第三方的css和js
b. src/App.vue
1). 下只包含公共的页头组件和
2).
1). import引入App.vue，router，axios，以及其他全局组件
2). 将全局组件对象转为真正的全局组件: Vue.component( “组件标签名”, 全局组件对象 )
3). 配置axios并放入原型对象中:
axios.defaults.baseURL=“服务器端基础路径”
Vue.prototype.axios=axios;
(2). 为每个页面创建.vue组件文件，都放在src/views文件夹下。每个.vue文件中:
a. 标签内，包含这个页面的HTML内容
b. 中的js内容，和前四天将的是完全一样的写法，绑定，指令，函数，生命周期，axios请求等都一样。前四天怎么用，这里就怎么用。
(3). 路由字典和路由器对象，在src/router/index.js文件中
a. 仅import首页组件对象，不要过早引入其它页面组件
b. 路由字典中首页组件: { path:“/”, component:首页组件对象}
c. 其余页面组件都做成懒加载:
{
path: ‘/相对路径’,
component: () => import(/* webpackChunkName: “组件名” */ ‘…/views/其它页面组件.vue’)
}
(4). 全局组件都放在src/components文件夹下，每个全局组件.vue文件中。
全局组件必须在main.js引入，并用Vue.component()转化,为真正的全局组件，才能在其它组件的HTML中使用。
(5). 运行时, 路由器router对象监视浏览器地址栏路径变化，
查找对应的页面组件内容，先代替App.vue中的，然后main.js再将包含要加载的页面内容的App.vue组件内容，替换到唯一完整的index.html中空
位置。
=================================================================
src/router/index.js
//不要import Details from “…/views/Details”
const routes=[
…
{
path:“/details/:lid”,
component: () => import(
/* webpackChunkName: “details” */
‘…/views/Details.vue’
),
props:true
]
项目根目录创建vue.config.js
module.exports={
chainWebpack:config=>{
config.plugins.delete(“prefetch”)
//删除index.html开头的带有prefetch属性的link，不要异步下载暂时不需要的页面组件文件
},
}
=========================================================================
module.exports={
… ,
devServer: {
proxy: {
‘/’: {
target: 服务器端接口地址公共基础路径,
changeOrigin: true
}
}
}
}
axios.defaults.baseURL=“服务器端公共基础路径”
(3).引用 this.axios.get(“/接口地址相对路径”).then(result=>{…})
(1)方案1
(1). 希望变量一变化就自动执行一项操作时:
data(){
return { 变量: 值 }
},
watch:{
变量(){
要执行的操作
}
}
(2). 事件修饰符:
@事件.13 按回车时才执行
@事件.stop 阻止冒泡
@事件.prevent 阻止默认行为
(3). 防抖:
data(){
return {
… ,
timer:null
}
},
methods:{
查找方法(){
if(this.timer!=null){
clearTimeout(this.timer)
}
this.timer=setTimeout(()=>{
正式的查找操作
},等待时间)
}
}
(1). 只要多个组件拥有相同的结构，只是局部的内容不同，都可用插槽实现
(2). 如何:
a. 先额外创建一个带插槽的外壳组件,保存其它多个组件相同部分的HTML+CSS+JS。但是，外壳组件中将来可能变化的位置，用标记
b. 再定义其它使用外壳组件的组件:
1). 引入带插槽的外壳组件:
import 外壳组件名 from “./外壳组件.vue”
export default {
components:{ 外壳组件名 },
…
}
2). 在其它组件中:
<外壳组件 :外壳组件所需属性=“变量”>
<当前组件自有的个性化内容>
</外壳组件>
(3). 具名插槽:
a. 如果一个外壳组件中，多个部位将来都会被更换，就可用具名插槽
b. 如何:
1). 外壳组件中:
…公共部分…
…公共部分…
…公共部分…
2). 其它使用外壳组件的组件:
<外壳组件…>
<template #插槽名1>
第一部分要更换的内容
…
<template #插槽名2>
第二部分要更换的内容
</外壳组件>
===================================================================
今后只要多个组件都需要共用一批数据时，都可用vuex
state部分：
state:{ //保存共用的变量
变量:初始值,
… : …
}
mutations部分：
mutations:{ //保存专门修改变量的方法
set变量名(state, 新值){
state.变量名=新值
}
…
}
actions部分：
actions:{ //保存专门先发送ajax请求，再修改变量的方法
方法名(context, 发给服务器的参数值){
axios.get或post(
“接口地址”,
发给服务器端的参数值
).then(result=>{
…
context.commit(“mutations中某个方法名”, 新值)
…
})
}
}
a. import { mapState } from “vuex”
b. export default {
computed:{
…mapState([ “state中某变量名”, … ]),
其它计算属性
}
}
c. 中可用state中某变量名用于绑定和指令
d. js中可this. state中某变量名来读取变量值
a. import { mapMutations } from “vuex”
b. export default {
methods:{
…mapMutations ([ “Mutations中某方法名”, … ]),
其它方法
}
}
c. js中可用this. Mutations中某方法名(实参值)修改state中变量值
a. import { mapActions } from “vuex”
b. export default {
methods:{
…mapActions ([ “Actions中某方法名”, … ]),
其它方法
}
}
c. js中可用this. Actions中某方法名(实参值)发送ajax请求并修改state中变量值。
=========================================================================
var或let或const 变量名:数据类型=值;
(1).定义：
function 函数名(形参:数据类型, …):返回值类型{
… …
}
(2). 不确定参数个数:
a. 单个参数不确定有没有
function 函数名(形参1:数据类型, 形参2?:数据类型)…
或
function 函数名(形参1: 数据类型, 形参2:数据类型=默认值)…
b. 多个参数不确定有没有
function 函数名(形参1:数据类型, …形参2:数据类型[])…
(3). 重载:
a. 先定义空的函数声明，列举所有重载的可能:
function 函数名():返回值类型;
function 函数名(形参1: 数据类型):返回值类型;
function 函数名(形参1: 数据类型, 形参2:数据类型):返回值类型;
b. 正式实现功能的函数:
function 函数名(){
根据arguments中的元素个数，决定具体执行何种逻辑
}
(1). class 类型名{ //必须提前声明属性，才能使用
属性1: 数据类型=初始值
属性2: 数据类型=初始值
…
//构造函数必须定义数据类型
constructor(形参1:数据类型, 形参2:数据类型,…){
this.属性1=形参1;
this.属性2=形参2;
…
}
/方法定义…/
}
(2). 访问修饰符: 今后，只要想控制一个class中属性的使用范围时。
class 父{
public 公有属性:数据类型=值
protected 受保护的属性:数据类型=值
private 私有属性:数据类型=值
父的函数(){
以上三种属性都能用
}
}
class 子 extends 父{
子的函数(){
只能用父的公有属性和父的受保护的属性
不能用父的私有属性
}
}
除父子class以外的程序区域：
只能用父class的对象的公有属性
(3). 接口: 保证开发人员按照要求实现类的成员
a. 先定义接口:
interface I接口名{
属性名:数据类型
…
方法名(形参:数据类型, …):返回值类型;
}
b. 定义class实现接口的要求:
class 类型名 implements I接口名{
属性名:数据类型=值
…
方法名(形参:数据类型, …):返回值类型{
方法实现
}
}
(1). 模块中只抛出一个东西:
export default 一个东西
import 别名 from “相对路径”
(2). 模块中同时抛出多个东西:
export { 多个东西用逗号分隔 }
import { 想要的个别东西用逗号分隔 } from “相对路径”
====================================================================
绑定原理:ES6 Proxy代理对象+虚拟DOM树
新生成的代理对象 = new Proxy(要保护或监视的原对象, {
//当有人试图获取数组中任何一个元素值时自动触发
get(当前对象, 属性名) {
console.log(有人试图读取arr对象的${属性名}成员)
return 当前对象[属性名];
},
//当有人试图修改数组中任何一个元素值时自动触发
set(当前对象, 属性名, 新值) {
console.log(有人试图修改arr对象的${属性名}成员)
当前对象[属性名] = 新值;
return true; //必须: 返回修改成功！
}
});
//今后，都使用新代理对象，代替使用原对象。但是用法上和使用普通对象完全一样！
a. 默认:
createApp(App).use(store).use(router).mount('#app’)
b. 全局组件:
import 组件对象 from “组件文件相对路径”
var app= createApp(App);
app.component(‘组件标签名’, 组件对象名)
app…use(store).use(router).mount('#app’)
c. 全局指令:
app.directive (“my-focus”,{
mounted(DOM元素){
DOM操作
}
})
d. axios: //axios对象是单例模式，整个项目中只有一个axios对象，哪里使用都一样。
import axios from “axios”
axios.defaults.baseURL=”服务器端接口基础路径”
//单例模式，不用放到原型对象中，也能在任意组件内引用——Vue2也可以这样用。
a. 里和
import { defineComponent, ref, reactive, toRefs, watch, computed, onMounted } from 'vue’;
import axios from “axios” //axios对象是单例模式，整个项目中只有一个axios对象，哪里使用都一样。
import 子组件对象 from “子组件相对路径”
export default defineComponent({
components:{ 子组件对象 },
directives:{
“自定义指令名”:{
mounted(DOM元素){
DOM操作
}
}
},
setup(){ //
const data=reactive({
界面所需变量
});
//专门解构原始类型的变量
let { 原始类型的变量, … } = toRefs(data);
//专门解构引用类型的变量
let {引用类型的变量, …} = data;
const methods={
界面所需方法(){ … 使用data中变量，不用加this！但要加.value才能用 }
计算属性：computed(()=>{ //vue3中没有过滤器了，计算属性兼顾过滤器职能
//计算过程
return 返回值
})
}
watch(要监控的变量, ,(newVal, oldVal)=>{
console.log(变量变了，新值为${newVal}, 旧值为${oldVal})
//变量变化时要执行的操作
})
//声明周期必须自己先import，再在setup内部调用！
onMounted(){ //原mounted生命周期钩子函数
最后前端到底应该怎么学才好？
如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。
不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
扫一扫
904
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
