VUE3知识点总结

小丽o

已于 2022-10-26 14:42:49 修改

阅读量498

点赞数 2

分类专栏： VUE3 文章标签：前端 vue

于 2022-10-23 16:07:46 首次发布

本文链接：https://blog.csdn.net/m0_64641665/article/details/127407711

版权

VUE3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

VUE 准备工作：

Node.js 安装版本号 V16.14.2

安装路径不要加空格！！！！！！！

下载地址
在这里插入图片描述

修改全局缓存路径：

npm config set registry https://registry.npm.taobao.org
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
npm install -g yarn --registry=https://registry.npm.taobao.org

如果安装的node 是17以上，对 yarn 的指令执行有影响
需在命令行执行 $env:NODE_OPTIONS=“–openssl-legacy-provider”

.vue 文件解释：

Vue 的单文件组件 (即 *.vue 文件，英文 Single-File Component，简称 SFC) 是一种特殊的文件格式，使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。下面是一个单文件组件（MyCup.vue）的示例：

<template>
  <div>
  <!-- 这里是vue的html代码片段 -->
  </div>
</template>
  
<script>
// js代码片段，通常使用ES6语法写
export default {
  name: "MyCup", // 组件的名字，和文件名字一致
  props: {
    //这里是自定义的属性 :前面是自定义的属性名，后面是属性类型
  },
  data() {
    // 管理对象的数据项, 是一个对象
    return {
        type:'玻璃杯',
        weight:'200g'
    };
  },
  watch: {
    // 监听data中的数据项，方法名字 和data()中的变量名字一样
  },
  methods: {
// 定义方法，作为template 中的元素事件绑定
      water(){
          
      }
  },
};
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
/* 这里是内部的style的样式 */
</style>

一、项目脚手架：

第一步

npm install -g @vue/cli 或  yarn add -g @vue/cli

第二步

vue create 项目的名字（尽量用英文）

第三步

npm run serve
npm run lint   #修复一些ESLint 的规则限制
npm run build  #打包工程用已使用

安装新的软件包，使用npm i 依赖包的名字或 yarn add 依赖包的名字

二、VUE相关概念：

vue3 渐进式javaScript 框架
特点：组件化、虚拟dom、diff算法
vue文件以.vue 结尾，是一个SFC（Single-File-Component）单文件组件
遵循 MVVM架构，Model-View-ViewModel，重点是实现了数据的双向绑定，指令用的是v-model、v-bind、v-on
理解M-V-VM 模型，VIewModel 是实现虚拟dom、diff算法的核心点!
内置指令：
- v-text：插值绑定、语法也可以是 {{}}
- v-html：绑定html代码片段，相当于是原生的 innerHtml、有安全性问题，容易XSS攻击
- v-show：显示一个dom元素，dom元素存在后不会被删除
- v-if、v-else-if、v-else: 动态显示一个dom元素，条件成立，dom元素才会真正显示出来、否则移除（不新增）真实dom
- v-for：循环当前所在的元素，当前！当前！当前！
- v-on: 简写@，绑定事件，鼠标的事件、键盘的事件、例如@click，@dbclick、@mouseup、@mousedown、@mousemove
- v-bind: 绑定属性指令，可以是组件的 prop或者 attribute（width、height、style）
- v-model: 值的双向绑定，通常用与input（text、password、radio、checkbox、number）、select
- v-slot: 声明具名插槽或是期望接收 props 的作用域插槽

<!-- 具名插槽 -->
<BaseLayout>
  <template v-slot:header>
    Header content
  </template>

  <template v-slot:default>
    Default slot content
  </template>

  <template v-slot:footer>
    Footer content
  </template>
</BaseLayout>

<!-- 接收 prop 的具名插槽 -->
<InfiniteScroll>
  <template v-slot:item="slotProps">
    <div class="item">
      {{ slotProps.item.text }}
    </div>
  </template>
</InfiniteScroll>

v-cloak 防止闪现指令、v-once 静态内容指令、 v-pre 跳过编译指令
属性相关：
- data：返回一个对象，这个对象是局部的状态，可以通过this直接引用

<template>
  <div class="about">
    <el-form label-position="left" label-width="100px" style="max-width: 460px">
      <el-form-item label="用户名">
        <el-input v-model="formObj.username" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="formObj.password" />
      </el-form-item>
      <el-form-item>
        <!-- 使用动态跳转方式 -->
        <el-button type="primary" @click="submitForm()">立即登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "LoginView",
  data() {
    return {
      // 在 eslint 中的标准的对象，k-value 中的 value通常需要使用 单引号
      formObj: {
        username: "",
        password: "",
      },
    };
  },
}

在template 中不用写 this

computed: 计算属性，用计算属性的前提是：
- 和vuex中的状态属性之间有关联
- 需要用到的三元表达式代码

这里面不能写耗时的一些代码，必须有返回值

在这里插入图片描述

watch：侦听器，作用：每次响应式属性（data中返回的局部状态）发生变化时触发一个函数。
- 监听的方法名字是和局部状态中的状态名字一一对应.
监听到变化后,执行的是一个异步操作, 同步的话会使用计算属性、

export default {
  data() {
    return {
      question: '',
      answer: 'Questions usually contain a question mark. ;-)'
    }
  },
  watch: {
    // 每当 question 改变时，这个函数就会执行
    question(newQuestion, oldQuestion) {
      if (newQuestion.includes('?')) {
        this.getAnswer()
      }
    }
  },
  methods: {
    async getAnswer() {
      this.answer = 'Thinking...'
      try {
        const res = await fetch('https://yesno.wtf/api')
        this.answer = (await res.json()).answer
      } catch (error) {
        this.answer = 'Error! Could not reach the API. ' + error
      }
    }
  }
}

props 声明: 接收父组件传入的相应状态或方法

props 在当前组件中是只读的

export default {
  props: {
    title: String,
    likes: Number
  }
}

mixin: 对代码的复用进行抽取
弊端：大项目里命名不可控，容易冲突，不好发现
优点：代码复用，加强团队之间的代码协作

声明混入的代码
// 这里和组件中的 export default{} 中的属性平级关系
export const score = {
  methods: {
    alertScore(student, score1) {
      alert(student + "的总成绩：" + score1);
    },
  },
};

局部混入的使用
在这里插入图片描述

组件的通信
- 第一种：父传子
  - props: 传入的属性是只读的
- 第二种：子传父 this.$emit()
- 第三种: 跨组件(2.0之前，3.0后this.$on()取消了)
  - this. $e mi t () t hi s .$ on() 在需要的组件
- 第四种：插槽
  默认插槽、具名插槽、作用域插槽
  
  作用域插槽：商品列表（elementUI 中的table组件）
  数据在子组件中，但是自己不能决定结构，需要将数据传递给父组件，父组件决定结构
this.$nextTick: 确保dom渲染完成后，执行一个方法，保证界面体验无错误
适用的场景

三、路由（vue-router）

路由是前端框架定制化的一种对界面跳转的新叫法

hash 路由：地址栏的路径规则有 # 这个符号
history 路由：传统的用符号 / 分割的地址（刷新页面，会提示404错误，需要后端做代理配置）
路由的定义方式：

// 路由懒加载，延迟加载 import中的值是路径地址
component: () => import(“…/layout/BaseLayout.vue”)

在这里插入图片描述

路由的传参
第一种：使用path中的占位符号（定义的方式 :id, id相当于形参）

多用于嵌套路由

跳转的页面接收：
在这里插入图片描述
第二种： push方法

多用于单页面间的跳转

常规用法
在这里插入图片描述
传递参数的用法

小程序使用的 uni.navigateTo : 跳转单页面
uni.switchTab : 跳转到tab导航页面

导航守卫
全局的前置守卫:
- 界面跳转时增加一个进度条效果
- 判断用户是否有权限访问当前页面

// to：要跳转的导航地址   from：当前页面    next：执行跳转页面的方法
router.beforeEach((to, from, next) => {
   // 判断是否登录过了，如果是，跳转到 to 传入的页面地址  反之，拦截页面跳转，还停留在登录界面
  if (to.name !== 'Login' && !isAuthenticated){
    next({ name: 'Login' })
  }else{
    next()
  }
})

全局的后置守卫

页面开始渲染时，修改地址栏的信息、和 title

router.afterEach((to, from, failure) => {
  if (!failure) sendToAnalytics(to.fullPath)
})

路由元信息定义的规则： meta：{}
使用 $route.meta 获取到元信息

const routes = [
  {
    path: '/posts',
    component: PostsLayout,
    children: [
      {
        path: 'new',
        component: PostsNew,
        // 只有经过身份验证的用户才能创建帖子
        meta: { requiresAuth: true }
      },
      {
        path: ':id',
        component: PostsDetail
        // 任何人都可以阅读文章
        meta: { requiresAuth: false }
      }
    ]
  }
]