vue学习笔记
vue框架介绍
Vue.js（读音/vju：/，发音类似于view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。
Vue 的核心库只关注视图层，并且非常容易学习，也非常容易与其他库或已有项目整合。Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
Vue.js 还提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API，其目标是通过尽可能简单的 API 实现响应式的数据绑定和可组合的视图组件。
我们也可以说 Vue.js 是一套响应式系统（Reactivity System）。数据模型层（Model）只是普通 JavaScript 对象，如下图所示，{ }代表一个 JavaScript 对象，修改它则更新相应的 HTML 片段（DOM），这些 HTML 片段也称为“视图（view）”。这会让状态管理变得非常简单且直观，可实现数据的双向绑定，所以我们也称之为响应式系统。
node的下载步骤
1、下载nodejs
2、安装过程
3、在cmd下输入 node -v
4、设置文件的日志缓存存放路径和包下载地址（在安装路径下新建文件夹 cache global)
5 、命令为
npm config set prefix "安装路径/global"
npm config set cache "安装路径/cache"
6.根据版本不同查看是否配置成功（我用的命令是npm config list 也有的是npm config ls)
vue脚手架的下载
- 确认是否安装npm包管理工具
- 执行命令 npm install -g @vue/cli
- 查看是否安装成功vue -V(注意后面的V是大写)
创建vue项目
-
自己选择一个文件夹
-
用cmd命令打开
-
执行vue create 项目名称
vue create demo -
可以选择自定义版本也可以使用官方配置
-
选择完成后输入以下命令并打开浏览器复制cmd命令窗口的网址
npm run serve
props 的注意事项
- props节点的数据只能读不能写
- 一般用来接受数据（父组件数据传给子组件）
父组件传给子组件数据演示
-
在子组件中定义props节点
2.父组件传值
子组件给父组件传值
-
通过自定义事件
this.$emit("绑定数据名",)
-
父组件通过函数赋值
<Son1 :name="name" :age="age" @count="getCount"></Son1>兄弟间传输数据需要定义第三方EventBus
-
定义的数据转换方
import Vue from "vue"; export default new Vue()
-
2.兄弟组件都需要导入上面的EventBus
3.发送方代码
Bus.$emit('share',this.sendMsg)
4.接收方代码
Bus.$on('share',val=>{
this.msg=val
})
接收方代码截图
使用vant组件库开发
-
打开vant官网
-
根据自己的版本执行如下命令
# Vue 3 项目，安装最新版 Vant： npm i vant -S # Vue 2 项目，安装 Vant 2： npm i vant@latest-v2 -S -
在项目中引入组件
导入所有组件 import Vant from 'vant' 按需导入 import { Button } from 'vant' -
vue挂载(然后小伙伴就可以快乐的使用咯)
Vue.use(Vant)
路由的安装与使用
-
创建项目时自定义模式可以选择是否添加路由
-
没添加就要自己配置
-
先安装路由
npm i vue-router -s -
在src下创建router文件夹 在router下新建router.js文件
// src/router/index.js就是当前项目的路由模块 // 1 导入Vue 和VueRouter的包 import Vue from 'vue' import VueRouter from 'vue-router' // 导入路由要用到的组件 import Home from '../components/Home.vue' import Movie from '../components/Movie.vue' import About from '../components/About.vue' // 2 调用vue.use()函数，把VueRouter安装为vue插件 Vue.use(VueRouter) // 3 创建路由的实例对象 const router = new VueRouter({ // 定义数组routes[],对应哈希地址与组件之间的关系 routes: [ //路由规则 { path: '/home', component: Home }, { path: '/movie', component: Movie }, { path: '/about', component: About, // about组件里的嵌套路由 children: [ { path: 'tab1', component: Tab1 }, { path: 'tab2', component: Tab2 } ] }, // 路由重定向：强制跳转 { path: '/', redirect: '/home' } ] }) // 4 向外共享路由的实例对象 export default router
3.在main.js导入路由模块 并且挂载实例
// 1 导入路由模块，拿到路由实例 import router from '../src/router/index.js' new Vue({ render: h => h(App), // 2 挂载路由 router: router }).$mount('#app')使用router切换页面
-
先创建自己的组件需要放在views目录下
-
在引用的组件下用进行占位
-
代码演示
//要展示的组件进行占位 <router-view></router-view> //路由链接 <router-link to="切换的路径">切换到Fisrt组件</router-link> -
在router.js文件下进行注册配置
import Vue from 'vue' import VueRouter from 'vue-router' //注册组件 import First from '@/views/First.vue'; import Second from '@/views/Second.vue'; Vue.use(VueRouter) //配置规则 const routes = [ {path:'/first',component:First}, {path:'/second',component:Second} ] const router = new VueRouter({ //挂载引用 routes }) export default router -
路由可以嵌套子路由就像套娃一样（就是在展示的组件里面继续加路由规则）
//代码示例 //配置规则 const routes = [ {path:'/first',component:First}, {path:'/second',component:Second， children:[ {path:'路径',component:组件} ] } ] -
路由守卫
-
全局前置守卫
//to表示要去的组件路径 from 表示要离开的组件路径 next表示是否放行 router.beforeEach(function(to,from,next){ //简单的判断 可以做登录判断 if(to.path=='/first'){ next() } }) -
next(‘路径’)表示强制跳转到输入路径下
-
全局后置守卫
全局后置守卫，组件初始化时调用，每次路由切换之后调用，路由切换之后指的就是，举个例子说，当前我在A路由组件，我要切换到B路由组件，那么前置路由守卫就是在我点了切换按钮B路由组件呈现到页面中后被调用。
router.afterEach(function(to,from){ //to表示要去的组件路径 from 表示要离开的组件路径 next表示是否放行 } -
独享守卫
是在进入组件时被调用,区别就在于，想对那个路由进行权限控制就直接在其路由配置项中添加守卫
beforeEnter(to,from,next){ //to表示要去的组件路径 from 表示要离开的组件路径 next表示是否放行 } -
组件内守卫
当使用路由规则进入该组件或离开该组件时，就会触发组件内守卫的调用
//进入守卫：通过路由规则，进入该组件时被调用 beforeRouteEnter (to, from, next) { //to表示要去的组件路径 from 表示要离开的组件路径 next表示是否放行 }, //离开守卫：通过路由规则，离开该组件时被调用 beforeRouteLeave (to, from, next) { //to表示要去的组件路径 from 表示要离开的组件路径 next表示是否放行 }
-
-
组件的使用
-
自定义组件（在components文件夹里面定义 或者在views文件夹下面定义）
-
views一般存放的是由路由控制的组件
-
组件文件后缀（.vue）文件名首字母大写
-
先导入语法规则如下
import ** from '**' -
在components函数注册后使用
封装axios发送异步请求（代码的复用性）
-
导入axios模块
import axios from "axios"; -
封装axios设置地址并共享出去
const request=axios.create({ baseURL:'http://www.baidu.com' }) export default request -
使用前导入就可以使用了
抽取异步请求的公共部分
-
简化开发提高代码的复用（我来个简单示例）
//get请求方式 request就是一个axios模块 export const 函数名=function(){ return requst.get('请求地址') }
ES6模块化
- 注意node的版本（v14.15.1以上）在packag.json中加入type：”module“
2.默认导出只允许出现一次（export default)
promise
-
promise的基本概念
-
promise是一个构造函数
- 我们可以创建一个promise实例 const p = new promise()
- new 出来的promise对象表示异步操作
2.promise.prototype上包含一个.then()方法
-
then()方法用来指定成功和失败的回调函数
- p.then(result=>{},error=>{})
- 成功的回调函数是必选的，失败的可选可不选
-
-
回调地狱的问题
- 建议使用链式调用
- 可读性差 代码冗余 牵一发动全身
-
async和await
- 他们都是用来简化promise开发的
- 用了await的函数必须要用aysnc来修饰
- 注意事项
- 在async中第一个await会同步执行 剩下的会异步执行
-
同步任务和异步任务
- javascript是一门单线程语言
- 同步任务指的是后面的任务必须依靠前一个执行完成
- 异步任务指的是同时执行耗时任务
异步任务
- 包括宏任务和微任务（宏任务队列）
- 先执行宏任务在执行微任务
1.把同步任务相继加入同步任务队列。
2.把同步任务队列的任务相继加入主线程。
3.待主线程的任务相继执行完毕后，把主线程队列清空。
4.把宏任务相继加入宏任务队列，像setTimeout(()=>{},time)
5.把宏任务队列的任务相继加入主线程。
6.待主线程的任务相继执行完毕后，把主线程队列清空。
7.把微任务相继加入微任务队列。
8.把微任务队列的任务相继加入主线程。
9.待主线程的任务相继执行完毕后，把主线程队列清空。
EventLoop
-
事件循环（event loop）就是 任务在主线程不断进栈出栈的一个循环过程。任务会在将要执行时进入主线程，在执行完毕后会退出主线程。
setTimeout(()=>{console.log(6)},100) setTimeout(()=>{console.log(4)}) setTimeout(()=>{console.log(5)}) new Promise((rel)=>{ console.log(1) }) .then((res)=>{console.log(res)}) console.log(2) // 打印结果：1,2,3,4,5,6
微任务队列的任务相继加入主线程。
9.待主线程的任务相继执行完毕后，把主线程队列清空。
### EventLoop
- 事件循环（event loop）就是 任务在主线程不断进栈出栈的一个循环过程。任务会在将要执行时进入主线程，在执行完毕后会退出主线程。
setTimeout(()=>{console.log(6)},100)
setTimeout(()=>{console.log(4)})
setTimeout(()=>{console.log(5)})
new Promise((rel)=>{
console.log(1)
})
.then((res)=>{console.log(res)})
console.log(2)
// 打印结果：1,2,3,4,5,6
1369
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
