VUE基本知识梳理

vue是什么：

Vue是一套拥有自己规则语法的渐进式JavaScript框架

渐进式是什么：

逐渐进步，想用就用，不需要全部使用

库和框架：

库：封装的属性及方法

框架：拥有自己的规则与元素，比库强大

工程化开发：在webpack环境下开发vue

1.全局安装_@vue/cli脚手架

yarn global add @vue/cli
# OR
npm install -g @vue/cli

2.安装完成后使用 vue -V 查看版本

ps：如果不行可以查找vue.cmd的绝对路径放到高级系统中的环境变量path内

3.创建项目启动服务

# vue和create是命令, vuecli-demo是文件夹名
vue create vuecli-demo

4.根据需要选择选项

5.进入脚手架项目下, 启动内置的热更新本地服务器

cd vuecil-demo

npm run serve
# 或
yarn serve

@vue/cli 目录和代码分析

 vuecil-demo        # 项目目录
    ├── node_modules # 项目依赖的第三方包
    ├── public       # 静态文件目录
      ├── favicon.ico# 浏览器小图标
      └── index.html # 单页面的html文件(网页浏览的是它)
    ├── src          # 业务文件夹
      ├── assets     # 静态资源
        └── logo.png # vue的logo图片
      ├── components # 组件目录
        └── HelloWorld.vue # 欢迎页面vue代码文件 
      ├── App.vue    # 整个应用的根组件
      └── main.js    # 入口js文件
    ├── .gitignore   # git提交忽略配置
    ├── babel.config.js  # babel配置
    ├── package.json  # 依赖包列表
    ├── README.md    # 项目说明
	└── yarn.lock    # 项目包版本锁定和缓存地址

主要文件及含义

node_modules下都是下载的第三方包
public/index.html – 浏览器运行的网页
src/main.js – webpack打包的入口文件
src/App.vue – vue项目入口页面
package.json – 依赖包列表文件

_@vue/cli 自定义配置

项目中没有webpack.config.js文件，因为@vue/cli用的vue.config.js

src并列处新建vue.config.js

module.exports = {
  devServer: { // 自定义服务配置
    open: true, // 自动打开浏览器
    port: 3000 //设置端口号
  }
}

关于eslint检查，可以通过配置以下解决

module.exports={
  lintOnSave:false//关闭eslint检查
}

注意事项：

Vue推荐采用.vue文件来开发项目

template里只能有一个根标签

vue文件-独立模块-作用域互不影响

style配合scoped属性, 保证样式只针对当前template内标签生效

vue文件配合webpack, 把他们打包起来插入到index.html

<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 -->
<template>
  <div>欢迎使用vue</div>
</template>

<!-- js相关 -->
<script>
export default {
  name: 'App'
}
</script>

<!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 -->
<style scoped>
</style>

默认的欢迎页面清空方式：

• src/App.vue默认有很多内容, 可以全部删除留下框

• assets 和 components 文件夹下的一切都删除掉 (不要默认的欢迎页面)

vue指令：https://blog.csdn.net/m0_66239230/article/details/123075925

重绘与回流(重排)的概念

回流(重排): 当浏览器必须重新处理和绘制部分或全部页面时，回流就会发生

重绘: 不影响布局, 只是标签页面发生变化, 重新绘制

注意: 回流(重排)必引发重绘, 重绘不一定引发回流(重排)

虚拟DOM

本质是保存dom关键信息的JS对象，真实dom的属性很多，遍历很麻烦，影响性能，虚拟dom只包含必要的属性

数据更新时，在内存中比较旧dom和新dom差异，再给真实dom更新

diff算法

新旧虚拟dom比较时：

• 根元素改变 – 删除当前DOM树重新建

• 根元素未变, 属性改变 – 更新属性

• 根元素未变, 子元素/内容改变

• 无key – 就地更新 / 有key – 按key比较

Vue组件

组件是可复用的 Vue 实例, 封装标签, 样式和JS代码

组件化 ：封装的思想，把页面上 可重用的部分 封装为 组件，从而方便项目的 开发 和 维护

vue组件_基础使用
: 每个组件都是一个独立的个体, 代码里体现为一个独立的.vue文件

口诀: 哪部分标签复用, 就把哪部分封装到组件内

==(重要): 组件内template只能有一个根标签==

==(重要): 组件内data必须是一个函数, 独立作用域==

  1、创建组件 components/Pannel.vue

2、注册组件: 创建后需要注册后再使用

组件使用总结:

(创建)封装html+css+vue到独立的.vue文件中

(引入注册)组件文件 => 得到组件配置对象

(使用)当前页面当做标签使用

vue组件通信
因为每个组件的变量和值都是独立的

组件通信先暂时关注父传子, 子传父

父: 使用其他组件的vue文件

子: 被引入的组件(嵌入)

组件是什么?

是一个vue实例, 封装标签, 样式和JS代码

组件好处?

便于复用, 易于扩展

组件通信哪几种, 具体如何实现?

父 -> 子

父 <- 子

vue组件通信-EventBus
常用于跨组件通信时使用  

axios基本使用
axios({
  method: '请求方式', // get post
  url: '请求地址',
  data: {    // 拼接到请求体的参数,  post请求的参数
    xxx: xxx,
  },
  params: {  // 拼接到请求行的参数, get请求的参数
       xxx: xxx 
  }
}).then(res => {
  console.log(res.data) // 后台返回的结果
}).catch(err => {
  console.log(err) // 后台报错返回
})

、

$refs-获取DOM
利用 ref 和 $refs 可以用于获取 dom 元素

ref定义值, 通过$refs.值 来获取组件对象, 就能继续调用组件内的变量

$nextTick使用
因为DOM更新是异步的

组件name属性使用
 可以用组件的name属性值, 来注册组件名字
 

 

组件进阶 - 动态组件
动态组件是在同一个挂载点, 可以切换显示不同组件

使用vue内置的component组件, 配合is属性， 改变is属性的值, 为要显示的组件名即可

组件进阶 - 组件缓存
组件切换会导致组件被频繁销毁和重新创建, 性能不高，我们使用Vue内置的keep-alive组件, 可以让包裹的组件保存在内存中不被销毁

补充生命周期:

activated - 激活

deactivated - 失去激活状态

总结: keep-alive可以提高组件的性能, 内部包裹的标签不会被销毁和重新创建, 触发激活和非激活的生命周期方法

组件进阶 - 组件插槽
用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容

语法口诀:

组件内用<slot></slot>占位

使用组件时<Pannel></Pannel>夹着的地方, 传入标签替换slot

组件进阶 - 作用域插槽
子组件, 在slot上绑定属性和子组件内的值

使用组件, 传入自定义标签, 用template和v-slot="自定义变量名"

scope变量名自动绑定slot上所有属性和值

. 自定义指令
 局部注册

 directives: {
        focus: {
            inserted(el){
                el.focus()
            }
        }
    }
全局注册

// 全局指令 - 到处"直接"使用
Vue.directive("gfocus", {
  inserted(el) {
    el.focus() // 触发标签的事件方法
  }
}) 
 
 
自定义指令-传值
main.js定义处修改一下
// 目标: 自定义指令传值
Vue.directive('color', {
  inserted(el, binding) {
    el.style.color = binding.value
  },
  update(el, binding) {
    el.style.color = binding.value
  }
})
 Direct.vue处更改一下

<p v-color="colorStr" @click="changeColor">修改文字颜色</p>
 
<script>
  data() {
    return {
      theColor: "red",
    };
  },
  methods: {
    changeColor() {
      this.theColor = 'blue';
    },
  },
</script>
 

路由是路径和组件的映射关系

路由 - 组件分类
.vue文件分2类, 一个是页面组件, 一个是复用组件

.vue文件本质无区别, 方便大家学习和理解, 总结的一个经验

src/views(或pages) 文件夹 和 src/components文件夹

页面组件 - 页面展示 - 配合路由用

复用组件 - 展示数据/常用于复用

vue路由 - 声明式导航
  链接导航, 用router-link配合to, 实现点击切换路由

声明式导航 - 跳转传参
在router-link上的to属性传值, 语法格式如下

/path?参数名=值

/path/值 – 需要路由对象提前配置 path: “/path/参数名”

对应页面组件接收传递过来的值

$route.query.参数名

$route.params.参数名

vue路由 - 重定向和模式
3.0 路由 - 重定向
匹配path后, 强制切换到目标path上

网页打开url默认hash值是/路径

redirect是设置要重定向到哪个路由路径

vue路由 - 嵌套和守卫
 嵌套路由, 找准在哪个页面里写router-view和对应规则里写children

声明导航 - 类名区别
观察路由嵌套导航的样式

router-link-exact-active (精确匹配) url中hash值路径, 与href属性值完全相同, 设置此类名

router-link-active (模糊匹配) url中hash值, 包含href属性值这个路径

全局前置守卫
 next()放行, next(false)留在原地不跳转路由, next(path路径)强制换成对应path路径跳转

// 例子: 判断用户是否登录, 是否决定去"我的音乐"/my
const isLogin = true; // 登录状态(未登录)
router.beforeEach((to, from, next) => {
  if (to.path === "/my" && isLogin === false) {
    alert("请登录")
    next(false) // 阻止路由跳转
  } else {
    next() // 正常放行
  }
})