目录
11.2 在项目中,经常会有API文件夹【里面存放的就是axios请求】
14.3 this.$state.dispatch与this.$state.commit的主要区别
21.2 用watch + this.$neckTick(较为完美的解决方案)
24.1 Search模块中子组件SearchSelector.vue的动态开发
37.1 放大镜操作——ImageList组件和Zoom组件之间的小操作
39.2 路由传递参数结合会话存储(成功路由跳转与参数传递)
五十四. 表单验证(插件:vee-validate)【了解即可,看懂就行】
VUE2项目尚品汇笔记
将Typora记录的笔记、以及手写的笔记进行二次整理。
整理完本次笔记,也会继续将之前学习HTML、CSS、JS、Vue的笔记进行二次整理。
方便以后查找,同时有需要改正或补充的,还请大家指教。
一、vue-cli脚手架初始化项目各文件夹
node_modules文件夹:项目依赖文件夹
public文件夹:一般放置一些静态资源(图片等)。注:放在public文件夹中的静态资源,当webpack进行打包时候,会原封不动打包到dist文件夹中。
src文件夹(程序员源代码文件夹):
assets文件夹:一般放置静态资源(一般放置多个组件共用的静态资源)。注:放置在assets文件夹里的静态资源,在webpack打包时,会把它当做一个模块,打包到JS文件里。
components文件夹:一般放置的是非路由组件(全局组件)。
App.vue:唯一的根组件,Vue当中的组件(.vue)。
main.js:程序入口文件,也是整个程序当中最先执行的文件。
babel.config.js:配置文件(babel相关)。
package.json文件:类似于项目的‘身份证’,记录项目叫什么,当中有哪些依赖,如何运行。
package.lock.json文件:缓存性文件。
README.md文件:说明性文件。
二、 项目的其他配置
2.1 项目运行,让浏览器自动打开
在package.json文件中配置
{
......
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
......
2.2 eslint校验功能(各种规范的报错)的关闭
eg:声明了变量,但未进行使用,则eslint校验工具会报错
-
在根目录下创建文件vue.config.js
module.exports = { //关闭eslint lintOnSave: false }
2.3 src文件夹简写方法,配置别名
①.jsconfig.json配置别名,可用@提示
【@代表的是src文件夹,常在js文件中使用。"exclude"表示“除了......”,意为配置的别名不能在"node_modules"和"dist"使用】
{
"compilerOptions":{
"baseUrl":"./",
"paths":{
"@/*":["src/*"]
}
//表示不能在"node_modules"和"dist"中使用这种配置的别名。
"exclude":["node_modules","dist"]
},
②.也可在.css中配置别名@提示 【在@前面加上~这个符号】
<style>
......
background-image: url(~@/assets/images/icons.png);
......
</style>
2.4 样式的引入
在public文件夹下的index.html中引入同级reset.css样式
<link href="/reset.css">
三. 本次项目路由的分析
vue-router 前端的路由:KV键值对。
key:URL(地址栏中的路径) value:相应的路由组件 注:本次项目是上中下结构
- 本次项目的路由组件可分为:
Home首页路由组件、Search搜索路由组件、login登录路由组件、Refister注册路由组件
- 本次项目的非路由组件可分为:
Header组件:【存在于首页、搜索页】 Footer组件:【存在于首页、搜索页,但登录和注册页面没有】
四. 完成非路由组件Header与Footer业务
本次项目主要关注业务、逻辑。
- 开发项目步骤:
- 书写静态页面(HTML+CSS)(本次项目已提前准备好了)
- 拆分组件(静态组件、路由组件等)
- 获取服务器的数据动态展示
- 完成相应的动态业务逻辑(eg:Js动态业务等)
- 注意:
- 创建组件=组件结构 + 组件的样式 + 图片资源。
- 本次采用less样式。
需通过less、less-loader【安装版本五npm install --save less less-loader@5
】进行处理less,将其变为css样式。
若想让组件识别less样式,需在style标签上加上lang=less。<style lang="less" scoped>
五. 路由组件的搭建
经过上面的分析,本次项目的路由组件有四个:
Home首页、Search搜索、Login登录、Register注册。
components文件夹:经常放置非路由组件(共用的全局组件).
pages或views文件夹:经常放置路由组件
5.1 配置路由
项目当中配置的路由一般放置在router文件夹中的index.js里。路由配置好之后在入口文件main.js中引入。
5.2 路由组件与非路由组件的区别?
- 共同点:
注册完路由,不管是路由组件、还是非路由组件,它们身上都会有$route、$router属性。
$route:一般获取路由信息【路径、query、params等】
$router:一般进行编程式导航,进行路由跳转【push或replace(其中一个是有缓存记忆的)】
- 不同点:
路由组件 | 非路由组件(普通组件) |
一般放置在pages或views文件夹中 | 一般放置在components文件夹中。 |
一般需要在router文件夹中进行注册 (使用的名字即为组件的名字,例如router文件中的index.js的写法) 在App.vue中展示时, 用的是<router-view></router-view> |
一般以标签的形式使用 (例如App.vue里的<Header></Header>标签)。 |
5.3 路由的跳转的两种形式
① 声明式导航:router-link
② 编程式导航:push或replace
编程式导航:声明式导航能做的,编程式导航都能做;而且编程式导航不仅可以进行路由跳转,还做一些其他业务逻辑。
5.4 重定向
redirect重定向:在项目跑起来时就访问该页面(该方法可以立马让其定向到首页)
在router的index.js里书写重定向代码:
//redirect重定向:在项目跑起来时就访问该页面(该方法可以立马让其定向到首页)
//配置路由,路由的单词都是小写的
export default [
......
{
path: '*',
redirect: './home'
}
......
]
六. Footer组件显示与隐藏
6.1 v-if和v-show的区别
显示or隐藏,可用v-if或者v-show。两者都是动态显示DOM元素。
v-if初始化较快,但代价较高;v-show初始化较慢,但切换成本低。
v-if | v-show |
---|---|
动态向Dom内添加或删除DOM元素 | 通过设置DOM元素的display样式属性控制显示或隐藏 |
切换有一个局部编译/卸载的过程,过程中可能会销毁和重建内部的事件监听和子组件。 | 单纯地基于css切换 |
惰性的; 初始值为假时,不作任何操作;只有在条件第一次为真时才开始局部编译。被缓存后,再次切换时进行局部卸载。 |
无论首次条件是否为真,都可被编译;被缓存且DOM元素保留。 |
有更高的切换消耗 | 有更高的初始化渲染消耗 |
适合运营条件不大可能改变的场景 | 适合频繁切换的场景 |
6.2 Footer组件编写
本次项目在Home首页、Search搜索显示Footer组件,但是在Login登录、Register注册时隐藏Footer组件。
可根据组件身上的$route获取当前路由的信息,通过路由路径判断Home和Footer这俩非路由组件的显示与隐藏。
<!-- 写法一(不推荐): -->
<Footer v-show="$route.path=='/home'||$route.path=='/search'"></Footer>
配置路由时,可给路由添加路由元信息【meta】,注意路由配置对象的key不能乱写。
在APP.vue文件中:
<!-- 写法二: -->
<Footer v-show="$route.meta.show"></Footer>
在router文件的index.js中配置【meta】:
//配置路由
export default new VueRouter({
routes: [{
path: "/home",
component: Home,
meta: { show: true }
},{
path: "/search",
component: Search,
meta: { show: true }
},{
path: "/login",
component: Login,
meta: { show: false }
},{
path: "/register",
component: Register,
meta: { show: false }
},
//重定向:在项目跑起来时就访问该页面(该方法可以立马让其定向到首页)
{
path: '*',
redirect: './home'
}
]
})
七. 路由传参
了解URL语法格式
https://blog.csdn.net/Thaley/article/details/122286201
格式:protocol :// hostname[:port] / path / [;parameters][?query]#fragment
[ ]中的内容可有可无
即:协议 :// 主机名[:端口号] / 路径 / [;参数][?查询]#信息片断
7.1 路由跳转的两种形式
eg:A -> B
①声明式导航:router-link(务必要有to属性),<router-link to="......"></router-link>可实现路由跳转。
②编程式导航:利用组件实例的$router.push或replace方法,可实现路由的跳转,也可书写一些自己的业务逻辑。
7.2 路由传参(params、query)
①params参数:属于路径的一部分,需注意,在配置路由的时候,需要占位。
如路径的path:"/search/:keyword",/:keyword即为params参数的占位符。
②query参数:不属于路径的一部分,类似于ajax中的queryString /home?k=v&kv=, 不需占位。
params参数 | query参数 |
|