VUE知识整理

• VUE 准备工作

  • Node.js 安装 版本号 V16.14.2

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

下载 https://nodejs.org/en/

image.png image.png

修改全局缓存路径

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算法的核心点!

  
  image.png

• 内置指令：

  • 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: 计算属性，用计算属性的前提是：

  • 1. 和vuex中的状态属性之间有关联
  • 2. 需要用到的 三元表达式代码

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

  image.png

• 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);
    },
  },
};

局部混入的使用

image.png

• 组件的通信
  第一种： 父传子
  props: 传入的属性是只读的
  第二种： 子传父 this.$emit()
  image.png
  第三种: 跨组件(2.0之前，3.0后this.$on()取消了)
  this.$emit() this.$on() 在需要的组件
  第四种： 插槽
  默认插槽、具名插槽、作用域插槽
  image.png
  image.png

作用域插槽：商品列表（elementUI 中的table组件）
数据在子组件中，但是自己不能决定结构，需要将数据传递给父组件，父组件决定结构

• this.$nextTick: 确保dom渲染完成后，执行一个方法，保证界面体验无错误
  适用的场景

  
  image.png

三、路由（vue-router）

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

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

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

image.png

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

多用于嵌套路由

image.png

跳转的页面接收：

image.png

第二种： push方法

多用于单页面间的跳转

常规用法

image.png

传递参数的用法

image.png

小程序使用的 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 }
      }
    ]
  }
]

用到的组件库

1. element-ui 2.2
2. uView 2.0