开发知识点-VueJS
- mixin.js
- 父子组件通信
- slot 插槽
- 属性 computed
- Vue.observable
- @click事件修饰符用法
- 路由导航
- 组件依赖
- 生命周期
- $refs
- params
- 路径别名配置
- vxe-table组件
- 开源文档 拉入vscode
- 安装node.js
- 安装vue脚手架
- components : 组件
- router:路由
- 创建新组建 :
- assets: 系统图片存放地址
- main.js: vue脚手架对象存放地 (新的包要放在里面)
- watch
- error Strings must use singlequote quotes
- 前端框架——Vue小驿站(1)
- Vue数据驱动的概念模型
- Vue常用指令 数据驱动
- 插值语法{ { }}
- vue-cli
- vue-router
- vuex
- ES6
- NPM
- webpack
- Babel
- 安装完成之后我们打开电脑的cmd命令行工具依次输入上图中的命令:
- NPM 安装方法
- 全局安装 vue-cli
- 创建一个基于 webpack 模板的新项目
- 使用插件
- vue——webpack打包小解
- router.afterEach
- $store.dispatch 与 commit
- then、catch方法
- encodeURIComponent编解码
- vue-element-admin的权限验证
- router.addRoutes
- 路由的权限验证
- beforeEach路由拦截
- Nprogress顶部进度条
- Nprogress安装
- 引入需要的 nprogress.css 和 nprogress.js 文件
- 基本用法
- Vue前端实战——外卖商家
mixin.js
混入(Mixin)是Vue.js提供的一种机制,用于在多个组件之间共享代码。
通过混入,可以将组件中的可复用逻辑提取到一个独立的对象中,然后在需要的组件中引入这个对象。
父子组件通信
props 父组件向子组件传递数据
以单文件组件为核心的项目开发中
vue父子组件之间是如何交换数据来实现通信
- 提供了props来实现父组件向子组件传递数据
<mapps :lat-lng="latLng" ref="mapps" @update-child-value="handleUpdatedingwei"></mapps>
latLng: {
lat: null, lng: null },
props: {
latLng: {
type: Object, // 限定传递的数据类型为对象
},
},
$emit
事件机制
子组件中的数据传递回父组件
较为复杂和普遍的数据交互,建议vuex来统一管理数据。
通过 @update-child-value 事件监听子组件的变化
<div>
<h1>父组件</h1>
<p>子组件的变量值为:{
{
childValue }}</p>
<child-component :parent-value="parentValue" @update-child-value="handleUpdateChildValue"></child-component>
</div>
methods: {
handleLocationUpdate(lat, lng) {
console.log(lat); // 输出子组件传递的 lat 值
console.log(lng); // 输出子组件传递的 lng 值
}
}
当子组件中的数据发生变化时,会触发 updateParentValue 方法,
通过 $emit 方法触发 update-child-value 事件,并将子组件中的数据作为参数传递回父组件。
父组件中的 handleUpdateChildValue 方法接收到参数后,将其设置为 childValue 变量的值,从而完成了子组件向父组件传递数据的过程。
this.$emit()方法
用于触发自定义事件。它是Vue实例的一个方法,可以在组件内部使用。
可以向父组件发送自定义事件,并传递数据给父组件。父组件可以通过监听这个自定义事件来执行相应的逻辑。
slot 插槽
插槽用于决定将所携带的内容
模块化 模板分块 插槽显不显示、怎样显示是由父组件来控制
插槽在哪里显示就由子组件来进行控制
Props
- name - string,用于命名插槽
Usage - 元素作为组件模板之中的内容分发插槽 元素自身将被替换
< slot > 元素
Shadow DOM 使用 元素将不同的 DOM 树组合在一起
Slot 是组件内部的占位符,用户可以使用自己的标记来填充
通过定义一个或多个 slot,您可将外部标记引入到组件的 shadow DOM 中
属性 computed
用来监控自己定义的变量
该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理;
比较适合对多个变量或者对象进行处理后返回一个结果值
Vue.observable
让一个对象变成响应式数据。Vue 内部会用它来处理 data 函数返回的对象
@click事件修饰符用法
.stop:阻止事件继续传播。
.prevent:阻止默认事件。
.capture:使用事件捕获模式。
在目标元素之前处理该事件。
.self:只当事件是从侦听器绑定的元素本身触发时才触发回调。
.once:只触发一次回调。
.passive:告诉浏览器该事件无需阻止默认行为,可以提高页面的滚动性能。
路由导航
一、 router-link
<router-link :to="{ path: '/goods/update', query: { goodsId: item.goods_id } }">编辑</router-link>
二、router.push
const url = `/goods/update?Id=${is_share}`;
const paramsUrl = { name: 'your-route-name', params: { id: is_Share } };
this.$router.push(paramsUrl);
三、this.$router.go(val)
四、this.$router.replace
组件依赖
npm install -S mitt
-S安装为dependencies,即用于发布到生产环境
配置@根路径,替代../../
安装依赖
npm install path --save
安装插件Path Intellisense
配置提示
vscode中依次点击:文件-首选项-设置-工作区-扩展-path-intellisense
对settings.json进行编辑:将path-intellisense.mappings的值设置如下:
{
// ...这里你们可能还有其他的一些自定义配置
"path-intellisense.mappings": {
"@": "${workspaceRoot}/src"
}
}
配置别名,修改vite.config.js文件:
加上别名的配置,(顺便配置一下打包的基础路径以及启动配置【这个可以不配,纯属个人习惯】)
vue ui
Vue 项目管理器
http://localhost:8000/project/select
生命周期
mounted 钩子函数
表示组件被挂载到 DOM 上后执行的操作
$refs
this.$refs 是 Vue 实例中的 $refs 属性,它提供对组件引用的访问。
https://doc.dcloud.net.cn/uni-app-x/vue/built-in.html#ref
ref 属性
用于给组件或 DOM 元素添加一个引用名
<mapps ref="mapps" ></mapps>
通过 this.$refs.mapps 来调用 <mapps> 组件暴露出的方法或访问其属性
例如:
this.$refs.mapps.someMethod(); // 调用 <mapps> 组件的 someMethod 方法
使用 ref 属性时需要确保在 Vue 实例的生命周期中组件已经被渲染完成,否则 $refs 可能会是空值。
如果需要在组件渲染完成后执行相关操作,可以使用 $nextTick 方法或使用 Vue 的生命周期钩子函数来确保正确的时机。
params
将一个包含多个属性和值的对象作为参数传递给一个组件或方法
路径别名配置
vxe-table组件
https://vxetable.cn/#/table/start/install
开源文档 拉入vscode
vue-cli-service不是内部或外部命令 找不到相关的依赖包
npm/cnpm install
yarn run build
npm run serve
public 内生成
- 安装依赖
yarn install
- 开发模式运行
yarn run serve
- 编译项目
yarn run build
安装node.js
安装包下载地址:https://nodejs.org/en/
安装包下载安装完成后,在命令行使用 node -v 查看node版本,判断是否安装成功。
安装vue脚手架
安装淘宝镜像:
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装webpack:
npm install webpack@3.8.1 -g
webpack -v 查看版本号
安装vue-cli脚手架工具
npm install vue-cli -g
vue -V 查看版本号(注意这里是大写的“V”)
第三步,创建项目
使用sever管理器 (不推荐):
vue create project-name
使用webpack管理器 (推荐):
vue init webpack “项目名”
y,y,n,回车,回车,回车,回车,y
第四步,运行
cd 到你的项目文件夹
运行项目 npm/cnpm run dev
安装依赖 npm install (谨慎使用)
复制网址至浏览器即可
内容:
其中src是我们写的东西,包含大概以下文件!
components : 组件
router:路由
path: 定义路由的路径 当用户访问/xxx路径时,将匹配到这个路由规则。
name: 路由的名称,命名路由可以简化URL的引用,便于后续的编程导航等操作。
component: 指定该路由要加载的组件。
redirect: 自动重定向的路径,意味着访问/xxx时,会自动跳转到/xxx/list/all路径。
meta: 路由元信息,可以包含任意的自定义数据。
这里定义了title、icon和permission等字段,分别表示路由的标题、图标和权限控制信息。
children: 子路由数组,定义了属于/order这个路由下的子页面路由。
RouteView组件
通常RouteView是一个布局组件,用于嵌套子路由的视图。
子路由配置
path: 子路由的路径
component: 通过一个函数来动态导入组件,这里导入的是@/views/order/Detail。
使用动态导入(懒加载)有助于减小初始加载的包大小,提高应用性能。
meta: 定义了title、keepAlive和permission等元信息。keepAlive设置为false表示不需要缓存这个页面。
hidden: 设置为true,通常表示这个路由项不会在侧边栏等导航菜单中显示。
activePath: 控制当访问某些特定路径时,这个路由项应该被视为激活状态
创建新组建 :
在components 里直接创建新的.vue文件即可
写新的路由:
组件想要使用(在页面渲染)必须要配置路由才可以
在 router 文件中 按照上面的格式,写上自己的组件名和路由名即可
assets: 系统图片存放地址
main.js: vue脚手架对象存放地 (新的包要放在里面)
项目打包:
输入 npm/cnpm run build 即可将项目打包(压缩包)
vue 脚手架 组件用法:
! 注意: vue组件中的全部html都存在于一个块元素中,就是app.vue中的 id名字为app的div。
所以,一个模板中,值允许存在一个块元素,也就是说,不可以在app.vue中,添加其他的div
新建组件之后,写法与html一致
其中:
vue脚手架 功能更加强大 包含 v-xx等一系列功能
渐进式 框架 MVVM
- 命令 管理篇
npm i logo --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org
npm install -g @vue/cli
清node_modules
npm cache clean --force
npm install
npm run build/dev/server/init
npm init -y
npm install eslint --save-dev
cd ./node_modules/.bin/
eslint --init
- 开发篇
vue init webpack xxxx
npm install -g xxx
vue create xxx
选择 Router vueX 等插件 选择版本
选择特性 feature Jest
选择配置项 package.json
cd 到项目目录
npm run server
Element UI
axios.post()
— 注意有 跨域 vue.config.js 配置 devServer{ }
watch
主要用于监控vue实例的变化,它监控的变量当然必须在data里面声明才可以,
它可以监控一个变量,也可以是一个对象
error Strings must use singlequote quotes
格式化代码之后会将单引号变为双引号,最后还会加上逗号,末尾的分号于是会导致三种错误:
1.Strings must use singlequote quotes—双引号
2.Extra semicolon semi ----末尾分号
3.error Unexpected trailing comma comma-dangle—逗号
rules: {
"space-before-function-paren": 0,
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'quotes': 'off',
'semi': 'off',
'comma-dangle': 'off',
'eslint eol=last': 0, 實在不行 就 script空出來一行 末尾空一行
}
npm uninstall less-loader
npm install less-loader@6.0.0
npm init -y
npm install eslint --save-dev
cd ./node_modules/.bin/
eslint --init
vue ui
前端框架——Vue小驿站(1)
- Vue.js是一款轻量级的以数据驱动的前端JS MVVM框架
- 提供了一种帮助我们快速构建并开发前端项目的新的思维模式
- 构建用户界面的渐进式框架
- 只关注视图层, 采用自底向上增量开发的设计
- 尽可能简单的 API 实现响应的数据绑定和组合的视图组件
- 其和jQuery最大的不同点在于jQuery通过操作DOM来改变页面的显示,
- 而Vue通过操作数据来实现页面的更新与展示
Vue数据驱动的概念模型
- Vue.js主要负责的是上图绿色正方体ViewModel的部分
- 其在View层(即DOM层)与Model层(即JS逻辑层)之间
- 通过ViewModel绑定了DOM Listeners与Data Bingings两个相当于监听器的东西
- 当View层的视图发生改变时,Vue会通过DOM Listeners来监听并改变Model层的数据
- 当Model层的数据发生改变时,其也会通过Data Bingings来监听并改变View层的展示
- 实现了一个双向数据绑定的功能,也是Vue.js数据驱动的原理所在
一个html文件中 直接可以通过script标签引入Vue.js
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
- 可以在页面里写Vue.js代码
- 通过new Vue()构建了一个Vue的实例
- 实例中
可以包含挂在元素(el),数据(data),模板(template),方法(methods)
生命周期钩子(created等)等选项
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
(1)el表明我们的Vue需要操作哪一个元素下的区域,'#demo’表示操作id为demo的元素下区域。
(2)data表示Vue 实例的数据对象,data 的属性能够响应数据的变化。
(3)created表示实例生命周期中创建完成的那一步,当实例已经创建完成之后将调用其方法。
Vue常用指令 数据驱动
(1)v-text: 用于更新绑定元素中的内容,类似于jQuery的text()方法
(2)v-html: 用于更新绑定元素中的html内容,类似于jQuery的html()方法
(3)v-if: 用于根据表达式的值的真假条件渲染元素,如果上图P3为false则不会渲染P标签
(4)v-show: 用于根据表达式的值的真假条件 显示隐藏元素,切换元素的 display CSS 属性
(5)v-for: 用于遍历数据渲染元素或模板,如图中P6为[1,2,3]则会渲染3个P标签,内容依次为1,2,3
(6)v-on: 用于在元素上绑定事件,图中在P标签上绑定了showP3的点击事件
插值语法{ { }}
- 网速慢插值 闪烁特别明显
- 所以v-clock 搭配这个 style样式属性选择器
关于更多的Vue指令可以查看Vue2.0文档,地址:https://vuefe.cn/api/#指令
- 在一个html页面里通过引入Vue.js来直接写Vue代码, 不常用。 不利于后期的维护和代码的公用
- 需要用到Vue提供的技术栈来构建强大的前端项目。
·····················
·····``除了Vue.js我们还需要用到:
vue-cli
Vue的脚手架工具,用于自动生成Vue项目的目录及文件。
vue-router
Vue提供的前端路由工具,利用其我们实现页面的路由控制,局部刷新及按需加载,构建单页应用,实现前后端分离。
路由元数据
$route.meta.title
vuex
Vue提供的状态管理工具,用于同一管理我们项目中各种数据的交互和重用,存储我们需要用到数据对象。
这些状态通常是被多个组件共享和访问的
ES6
Javascript的新版本,ECMAScript6的简称。利用ES6我们可以简化我们的JS代码,同时利用其提供的强大功能来快速实现JS逻辑。
NPM
node.js的包管理工具,用于同一管理我们前端项目中需要用到的包、插件、工具、命令等,便于开发和维护。
webpack
一款强大的文件打包工具,可以将我们的前端项目文件同一打包压缩至js中,并且可以通过vue-loader等加载器实现语法转化与加载。
Babel
一款将ES6代码转化为浏览器兼容的ES5代码的插件
getters
对状态的派生和缓存。它们类似于组件的计算属性,当它们所依赖的状态发生变化时,它们自动重新计算并返回新的值。