小知识点
- props
-
- props做属性封装，
- 接收父组件数据
- v-model
-
- 数据双向
- v-for
-
- item in list
- <es-goods v-for="item in goodlist" :key="item.id" :id="item.id"></es-goods>
- forEach和filter、find
total(){
let a = 0
this.goodlist
.filter(x=>x.goods_state)
.forEach(x => {
a += x.goods_count
});
return a
}
const findResult = this.goodlist.find(x=>x.id===e.id)
创建vite工程
npm init vite-app 工程名 cd 工程名 npm install npm run dev
自定义事件
//声明自定义事件--step1
emits:['change']
//触发自定义事件--step2
<button @click="onBtnClick">+1</button>
emits:['change'],
methods:{
onBtnClick(){
this.$emit('change')//点击按钮，触发自定义事件change
}
}
- onBtnClick()可放参数e来捕获事件源：onBtnClick(e)---->e.target.xxx做捕获
- this.$emit('事件名',参数1)：可以传参数
//注册组件1---MyCounter省略
//监听自定义事件---step3
<my-counter @change="getCount"></my-counter>
methods:{
getCount(){
console.log('监听到了count值的变化')
}
}
- getCount(e)--->可以接收参数
axios的使用
全局挂载axios
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
//导入axios
import axios from 'axios'
const app = createApp(App)
//全局挂载axios
axios.defaults.baseURL = 'https://www.escook.cn'
app.config.globalProperties.$http = axios
app.mount('#app')
调用get方法举例
methods: {
async getGoodList(){
const {data:res} = await this.$http.get('/api/cart')
if(res.status !==200) return alert('商品请求失败')
console.log(res)
this.goodlist = res.list
},
拦截器
拦截器会在每次发起axios请求和得到响应时触发。
请求拦截器
import { loading } from 'element-ui'
let loadingInstance = null
axios.interceptors.request.use(config=>{
loadingInstance = loading.server({ fullscreen: true })
return config
}[,第二个参数是请求失败的可以不写])
响应拦截器
axios.interceptors.response.use(response=>{
loadingInstance.close()
return response
}[,第二个参数是请求失败的可以不写])
proxy跨域代理
axios请求根路径改成项目运行路径
import axios from 'axios' axios.defaults.baseURL = 'http://127.0.0.1:4000'//改成了项目运行路径 app.config.globalProperties.$http = axios
配置proxy代理(根目录下创建vue.config.js)
module.exports = {
devServer:{
proxy:'真正要请求的地址'
}
}
该功能仅在开发调试阶段生效
数据共享
父组件向子组件共享数据
-
- 父组件通过v-bind属性绑定向子组件共享数据，同时子组件需要使用props接收数据。
//父组件通过v-bind绑定向子组件共享数据--step1
<my-test-1 :msg="massage" :user="userinfo"></my-test-1>
data(){
return {
message: 'hello vue',
userinfo: { name:'zs', age: 20 },
}
}
<template>
<p>{{msg}}</p>
<p>{{user}}</p>
</template>
//子组件使用props接收数据---step2
<script>
export default {
props: ['msg', 'user'],
}
子组件向父组件共享数据
-
- 子组件通过自定义事件的方式向父组件共享数据。
//自定义事件
emits:['n1change'],//声明自定义事件
data(){
return{
n1:0,
}
},
methods: {
addN1(){
this.n1++,
this.$emit('n1change',this.n1)//数据变化触发自定义事件
}
}
//父组件监听子组件的自定义事件
<my-test-1 @n1change="getn1"></my-test-1>
data(){
return {
n1FromSon:0,
}
},
methods:{
getn1(n1){
//通过形参接收子组件传递过来的数据
this.n1FromSon = n1
}
}父子之间数据双向同步
兄弟之间数据共享
//要先安装第三方包mitt //npm i mitt import mitt from 'mitt' const bus = mitt() export default bus
<template>
<div>
<h3>数据发送方---count的值为{{count}}</h3>
<button type="button" class="btn btn-primary" @click="add">+1</button>
</div>
</template>
<script>
import bus from './eventBus.js'
export default {
name:'Left',
data() {
return {
count:0,
}
},
methods: {
add(){
this.count++
bus.emit('countChange',this.count)
}
},
}
</script>
template>
<div>
<h3>数据接收方---num的值为:{{num}}</h3>
<!-- <button type="button" class="btn btn-primary" @click="count+=1">+1</button> -->
</div>
</template>
<script>
import bus from './eventBus.js'
export default {
name:'Right',
data() {
return {
num:0,
}
},
created() {
bus.on('countChange',(count)=>{
this.num = count
})
},
}
</script>
资料
vue-router路由
基本步骤
- 在项目中安装 vue-router 安装插件：npm install vue-router@next -S
- 定义路由组件 就是先定义一下你要使用的组件
- 声明路由链接和占位符
<!-- 声明路由链接 --> <router-link to="/home">首页</router-link>  <router-link to="/movie">电影</router-link>  <router-link to="/about">关于</router-link> <!-- 声明路由占位符 --> <router-view></router-view>
- 创建路由模块
在项目中创建 router.js 路由模块，在其中按照如下 4 个步骤创建并得到路由的实例对象：
① 从 vue-router 中按需导入两个方法
② 导入需要使用路由控制的组件
③ 创建路由实例对象
④ 向外共享路由实例对象
⑤ 在 main.js 中导入并挂载路由模块
// createRouter可以让我们创建路由实例对象
// createWebHashHistory可以指定路由工作模式
import { createRouter, createWebHashHistory} from 'vue-router'
// createRouter可以让我们创建路由实例对象
// createWebHashHistory可以指定路由工作模式
import { createRouter, createWebHashHistory} from 'vue-router'
//导入组件c
import Home from './MyHome.vue'
import Movie from './MyMovie.vue'
import About from './MyAbout.vue'
// 创建路由实例对象
const router = createRouter({
// 通过history属性指定路由工作模式
history:createWebHashHistory(),
//通过routers数组指定路由规则
//其中path是哈希地址，component是要展示的组件
routes:[
{ path: '/',redirect: '/home'}, //路由重定向
{ path: '/home',component: Home},
{ path: '/movie',component: Movie},
{ path: '/about', component: About}
]
})
export default router
- 路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。
通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向。
main.js中导入并挂载路由
import router from './components/10.next/router'
const app =createApp(App)
//挂载路由模块
app.use(router)
app.mount('#app')
- 导入并挂载路由模块
路由高亮效果
-
- 默认的高亮class类
-
- 自定义路由高亮的class类
嵌套路由
- 在子路由中声明子路由链接和子路由占位符
<!-- 声明子路由链接 -->
<router-link to="/about/tab1">Tab1</router-link> 
<router-link to="/about/tab2">Tab2</router-link>
<!-- 声明子路由占位符 -->
<router-view></router-view>
- 子路由路径不要以/开头.
const router = createRouter({
history:createWebHashHistory(),
routes:[
{ path: '/',redirect: '/home'},
{ path: '/home',component: Home},
{ path: '/movie',component: Movie},
{
path: '/about',
component: About,
redirect: '/about/tab1',//重定向
//嵌套路由----------------嵌套路由----------------嵌套路由--
children:[
{ path: 'tab1', component: Tab1},
{ path: 'tab2', component: Tab2 },
]
//嵌套路由----------------嵌套路由----------------嵌套路由--
}
]
})
动态路由匹配---语雀吧
main中路由规则
主件中props接收动态参数id，再应用到path
编程式导航
-
- 调用API发生跳转属于编程式导航
- vue-router中两个常用的编程式导航API
-
-
- this.$router.push('hash地址')
-
-
-
-
- 跳转到指定hash地址，从而展示对应组件
-
-
-
-
-
- this.$router.go(数值 n)
-
-
-
-
- 实现导航历史的前进、后退
-
-
-
命名路由
-
- 给路由规则起名字，即name属性
(这个是路由规则处)
