- 了解ESLint
Eslint是一个代码编写风格规范 可组装javascript和jsx检查工具 约束代码风格
在使用eslint时vue会多出一个eslintrc.js配置文件
eslintrc.js中的rules规则:
- no-console 在开发时不会发出警告，在发布时会发出警告
- no-debugger 调试
初步语法规则:
- 文件最后必须有一个空行
- 不可以有连续的空行
- 在每一行后面不可以用多余的空格
- 在默认情况下 字符串使用单引号‘’ quote
- 在属性与属性值之间默认有一个空格 key-spacing
- 不可在属性最后多一个逗号
- 在注释中//和/*后使用一致的间距
- import必须放到js顶部
- 定义未使用过的变量和常量也会报错
- 在方法形参之间要加空格
禁用规则:
2.axios使用基本用法及配置
##1.先下载 npm i axios -S
##2.导入 import axios from 'axios'
##事件触发
## async 方法名(){
const {data:res} await axios.get('url')
console.log(res)
}
//axios在使用时 可以通过对象解构将获取的data重名为res
// await 要与async一起使用
-----------------------------------------------------------------------------------------------------------------------------
axios使用方便语法使用:
在main.js中挂载一个共享的成员
- 在main.js 中 引入 axios impor axios from 'axios'
- 挂载 vue.prototype.$http=axios
- 在其他组件就可以不导入axios直接在语句中使用this
//在其他组件中可以不再导入axios async postInfo() { const { data: res } = await this.axios.post('http://liulongbin.top:3006/api/post') console.log(res) }后期维护解决: 全局配置axios请求根路径，将axios挂载到Vue.prototype上供每个组件使用
import axios from 'axios'
axios.defaults.baseURL="请求根目录" ----全局配置请求根目录
Vue.prototype.$http=axios ----使用axios时直接this调用 this.$http.get/post
//请求路径为
async getInfo()
{
const{data:res}=awit this.$http.get('/api/get')
//原路径'http://liulongbin.top:3006/api/get'
}
//缺点 不利于api接口的复用，如果多个组件同时访问接口时，需要重复书写接口请求，有很大的冗余，无法复用
3.前端路由
前端路由:--------------------------- 不同的hash代表不同的路由
hash地址与组件的关系
#开始往后都是hash地址
location.href 整个url页面
location.hash 获取url地址里#往后的地址
路由工作方式:
1.用户点击网页上的路由链接
2.导致了url地址栏中hash值发生变化
3.前端路由监听到hash地址变化
4.前端路由把当前hash地址对应的组件渲染到浏览器中
vue-router的基本使用----------------------路由都是通过第三方库
安装配置
安装vue-router包
创建路由模块
导入并挂载路由模块
声明路由器和占位符
通过window.onhashchange 来进行监听hash地址的改变，可以通过location.hash获取#hash地址
路由基本用法:
//--------------------------路由模块使用----------------------------------------------
//在App.vue 主组件中
1）创建三个路由链接
<a href='#/home'>首页</href>
<a href='#/about'>关于</href>
<a href='#/movie'>电影</href>
2）在组件中使用
<router-view></router-view> ---作为一个占位符 在安装和配置vue-router就可以使用
路由模块中的index.js中
1）导入需要使用到的组件
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'
import Movie from '@/components/Movie.vue'
2）在 const router=new vueRouter( //创建一个实例路由对象
{
--------routes为一个数组，存放hash与组件的对应关系，最后将对应组件渲染到router-view占位符中
routes;[
{path:'/home',component:Home}, //在此path不需要加#
{path:'/movie',component:Movie},
{path:'/about',component:About}
]
}
);
js穿插:
//自动滚动到最下方
/* srollTop:内容偏移量距离顶部的距离
scrollHeight:可以滚动的最大高度 */
box.scrollTop = box.scrollHeight环信 聊天室第三方工具
利用router-link替代a链接 ---前提安装了vue-router
redirect重定向 -----给用户强制转换访问地址，指定一个新的路由地址
//重定向 redirect
//创建路由对象
const router=new VueRouter(
{
// routes是一个数组 定义hash与组件的对应关系
routes:[
//重定向路由规则
{path:'/',redirect:'/movie'},
{path:'/home',component:Home},
{path:'/movie',component:Movie},
{path:'/about',component:About},
]
}
)嵌套路由:
子嵌套，在父类组件中 放好链接，
<router-link to='/about/tab1'></router-link>
<router-link to='/about/tab2'></router-link>
放好占位符-----最终数据所放的位置
<router-view></router-view>
在路由中进行子路由规则
导入两个子路由 之后与父组件平级
//创建路由对象
const router=new VueRouter(
{
// routes是一个数组 定义hash与组件的对应关系
routes:[
//重定向路由规则
{path:'/',redirect:'/movie'},
{path:'/home',component:Home},
{path:'/movie',component:Movie},
{path:'/about',component:About，
redirect:'/about/tab1'//重定向
children:[
{path:'tab1',component:'Tab1'}, //在子路由规则中可以省略前面 /
{path:'tab1',component:'Tab2'}
]
},
]
}
)默认子路由: 如果在children数组中，某个路由的规则的path为空，则这条路由规则为默认子路由
在访问时会自动显示出这个子路由
路由链接 router-link 的地址要和path中的地址匹配
vue-router/路由链接常见用法
1.动态路由匹配: 通过id访问
将hash地址部分可变部分作为参数项，提高路由规则复用性
在vue-router中使用英文冒号 ：定义路由参数项，就好比是node中单个参数的 params /about/:id
第一种拿动态参数方式:
path:'/about/:id', component:'Movie' //使用冒号 将公共不分作为动态
this.$route 为 路由的参数对象 //获取 :id值 通过 this.$route.params.id可用获取，this可以省略
this.$router 为路由的导航
第二种方式为通过props获取 props:[]数组形式
在路由规则中可以通过props：true开启props传参，方便组件拿到动态的值
哪个组件上开启哪个组件才可以通过props:[]来获取
1）//在路由规则中开启props,可以使当前组件获取动态的值
{path:'/movie/:id',component:Movie,props:true},
2） props: ['id'], //在此接收动态值 id
3) <h3>Movie 组件-----{{this.$route.params.id}}----{{id}}</h3>
拓展:query和fullpath
1)在hash地址中 /后面的参数值为路径参数
2）“路由参数”对象中使用 this.$route.params来获取
3）hash地址中 ?后面的参数为查询字符 通过this.$route.query
4)this.$route.fullpath显示的是完整路径包括后面的参数 this.$route.path只获取路径部分不包括?后面的字符
链式导航和编程式导航
编程导航: 三种
this.$router.push('地址') --追加导航，不会覆盖
this.$router.replace('地址‘） ---将当前的进行替换
this.$router.go(-1) 整数表示向前，负数表示后退
简写 $router.back() / $router.forward()
导航守卫
访问文件需要通过导航守卫权限
//为了router实例对象，声明全局前置导航守卫
//只要发生了路由的跳转，必然会触发beforeEach指定的回调函数
router.beforeEach(function(to,from,next){
//to表示将要访问的路由信息对象
//from表示将要离开的路由信息对象
next();
//放行
next()//放行
next(地址) //强制转换
next(fales)
})
头条案例中
views和commponse 文件夹区别
views存放的是经过路由切换的组件
commponent 存放的是不通过路由切换的
vue组件库:vant
# Vue 3 项目，安装最新版 Vant npm i vant
# Vue 2 项目，安装 Vant 2 npm i vant@latest-v2
导入:
import { createApp } from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
const app = createApp();
app.use(Vant);
三步骤实现路由切换，
1.在app组件中引入vant库组件 以路由器用法 vrouter-link to类似
2.在app组件使用 router-view 占位符， 将路由规则中相应的路由组件渲染至占位符中
3.在index.js路由模块中 进行设置路由规则，
/deep/ 覆盖第三方组件
775
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
