Vue脚手架

ppgo8 于 2023-06-25 发布

Vue脚手架

初始化脚手架

说明

具体步骤

分析脚手架结构

image-20230617213803051

render配置项

总结

关于不同版本的Vue:

  1. vue.js和vue.runtime.xxx.js的区别：

    • vue.js是完整版的Vue，包含：核心功能+模板解析器。

    • vue.runtime.xxx.js是运行版的vue，只包含：核心功能，没有模板解析器。

      Vue.runtime.xxx.js没有模板解析器，所以vm不能使用template配置项

      需要使用render函数接收到createElement函数去指定具体内容。

脚手架基础配置

vue inspect > output.js

该命令会输入一个output.js对象，里面有vue隐藏起来的配置。

配置参考网站：https://cli.vuejs.org/zh/config/

脚手架里面的不能改的东西：

public文件夹和它下面的内容,即public的全部

src文件夹 它下面的内容可以改

main.js文件名不能改

约定优于配置，其他东西也不建议改。

需要改：

语法检查要关闭，比如定义了一个变量但是没用也会报错，所以不是运行的最终代码就给关掉。

image-20230618121009972

ref属性

总结

  1. 被用来给元素或子组件注册引用信息（使用id的获得DOM的替代者)

  2. 获得内容：

    • 应用在html标签上获取的是真实DOM元素
    • 应用在组件标签上获得的是组件实例对象(vc)

  3. 使用方式：

    打标识：<h1 ref='xxx'>...</h1>或<School ref='xxx'></School>

    获取：this.$refs.xxx

控制台有时候不会自动刷新，需要手动刷新。

props属性

mixin混合

组件自己已经是复用代码,如果组件里面的代码还想要复用，那么就使用混合技术。

混合就是在src目录下再写一个.js文件，想需要复用的配置写该在.js文件中，之后暴露、引用。

image-20230625092349885

总结

  1. 功能：可以把多个组件共用的配置提取成为一个混合对象

  2. 使用步骤：

    • 定义混合

      举例：

      // 哪一种暴露方法都可以
// Vue组件的任何配置都可以写成混合
export const hunhe2 = { 
    data() {
        return {
            x: 100,
            y: 200
        }
    }
}

    • 使用混合

      • 全局混入：import导入模块后，配置Vue.mixin(xxx)
      • 局部混入：import导入模块后，在Vue组件中配置mixins:['xxx']

插件

总结

样式

scoped

less

lang可以指定css的编写方式

<style lang='less'>
	// 这里面写less的css    
</style>

但是Vue无法解析less,还需要使用npm包管理工具安装less-order

总结

  1. scoped作用：让样式在局部生效，防止冲突

  2. scoped写法：

    <style scoped>
	// 里面写css代码
</scoped>

Todolist案例

通过这个案例学习组件化编码流程,组件化编码流程：

  1. 实现静态组件：抽取组件，使用组件实现静态效果。

    组件命名的方式：

    • 按照功能，如添加add、列表list

    • 按照在页面中的位置，一般都是首尾按位置命名。Header、Footer、MyFooter不能用,因为H5中已经使用过了,Myxxx不易理解不好,建议将My改成其他名词。

    实际开发中，html和css代码的使用方式：

    • 已有的html全部复制粘贴到app组件的template中，后面再划分。

    • 已有的css样式全部复制粘贴到app组件的style中，后面再换分。

如果名字很难起，那么很可能是组件划分的不够好。

  1. 展示动态数据

    • 数据的类型、名称
      • 类型：存储数据一般都是对象和数组，比如对象中存储数组对象，很常见。
    • 数据保存在哪个组件
      • 一个组件在用：放在组件自身即可。
      • 一些组件在用：放在他们共同的父组件上（状态提升）。

  2. 交互——从绑定事件监听开始

    • 获得用户输入的表单数据的方法

      • 方法1：事件对象

        fn(e) {
  // 获得用户表单输入数据的方法
  console.log(e.target.value);
}

      • 方法2：v-model双向绑定

        <template>
  <div class="todo-header">
    <input type="text" placeholder="请输入你的任务名称，按回车键确认" 
     v-model="title" @keyup.enter="add" />
  </div>
</template>
       
<script>
export default {
  // 部分略
  data() { return { title: ""} },
  methods: { 
  	add() {
      // 获得用户表单输入数据的方法
      console.log(this.title);
    },
  },
};
</script>

    • 没有服务器时（单机），怎么设定用户id

      • 根据时间设置

      • 随机数

      • uuid或nanoid，使用这两个需要使用npm安装包

        // 调包
import { nanoid } from "nanoid";
// 使用
const todoObj = { id: nanoid() };

    • 组件之间传递数据

      • 父传给孩子

        父组件做的时间：在父组件template标签中,使用v-bind的方式给子组件实例化对象传递数据。

        // 父组件
<div class="todo-wrap">
    // 在下面的组件标签中写:变量名=数据的方式
    <my-header :a='123'/>
    <List />
    <MyFooter />
</div>

        子组件做的操作：在子组件中使用props属性接受数据

        // 子组件
props:['a']  // 这个a要和v-bind后的变量对应

      • 儿子给父亲传东西：

        • 父亲给儿子一个函数，该函数定义在父亲中。

          这个函数需要有形参，形参就是父子传递的数据。

        • 儿子props接受到函数，调用函数传递数据。

        https://www.bilibili.com/video/BV1Zy4y1K7SH?p=72&spm_id_from=pageDriver&vd_source=dde2f4dd432156027fedf9b1734ba705

      • 兄弟之间

        消息队列、全局机制

        本节使用：props的方式，将数据从父亲传递给两个兄弟，兄弟再传递给父亲，通过父亲通信。

    • 完善，表单有个值又改又设置

      计算属性的setter和getter（完善 ）

      https://www.bilibili.com/video/BV1Zy4y1K7SH?p=76&spm_id_from=pageDriver&vd_source=dde2f4dd432156027fedf9b1734ba705

总结

  1. 组件化编码流程：

    • 拆分静态组件：1.按照功能划分 2.命名不要和html元素冲突。

    • 实现动态组件：考虑好数据存放的位置

      1）一个组件在用，放在组件自身

      2）一些组件在用，放在他们共同的父组件上

  2. props适用于：

    1）父组件 ==> 子组件 通信

    2）子组件 ==> 父组件 通信

    要求父先给子一个函数,这些函数之间通过**函数参数**和this通信

  3. 使用v-model时要切记：

    v-model绑定的值不能是props传过来的值；因为props是不可以修改的!

  4. props传过来的值若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

约定：不修改props的值

webStorage

本地存储不是vue团队打造的,而是在js中就有.

webStorage包括localStorage和sessionStorage

localStorage

// 1.添加数据
localStorage.setItem('key', 'value')
// 2.获得数据
localStorage.getItem('key')
// 3.删除一条数据
localStorage.removeItem('key')
// 4.清空数据
localStorage.clear()

// 注意,针对对象类型的数据,存储和获取时需要借助JSON
// 0.1存储
let p = { name: '张三', age: 22 }
localStorage.setItem('person', JSON.stringify(p))  // 否则会被系统存储为不认识的[object Object]
// 0.2读取
JSON.parse(localStorage.getItem('person'))

sessionStorage

操作：API和上述localStorage相同,只是需要把local换成session

特点：只要关闭浏览器,里面存储的数据就会消失.

组件自定义事件

自定义事件和Vue中的内置事件相对应。

绑定自定义事件

解绑自定义事件

自定义事件总结

``插值语法中可以用的xxx的来源

  1. data 最先定义的数据

  2. props 父组件传过来的数据

  3. computed 根据已有的数据计算得到的数据

  4. 子组件传递过来的数据

    • 在data中定义xxx为空,

    • 在传给子组件的函数体中使用this.xxx=’子组件传递过来的数据’,

      this将xxx挂在到了data上(因为事先已经定义了data.xxx)

注意点

总结

  1. 一种组件间通信的方式，适用于：子组件 ===> 父组件

  2. 使用场景：

    • A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

    • 在父组件中给子组件绑定自定义事件

  3. 绑定自定义事件：

    • 第一种方式，在父组件中

      <Demo @atguigu="test"/>

      <Demo v-on:atguigu="test"/>

    • 第二种方式，在父组件中：

      <Demo ref="demo"/>
......
mounted(){
   this.$refs.xxx.$on('atguigu',this.test)
}

    • 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

  4. 触发自定义事件：this.$emit('atguigu',数据)

  5. 解绑自定义事件this.$off('atguigu')

  6. 组件上也可以绑定原生DOM事件，需要使用native修饰符。

  7. 注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

全局事件总线

总结笔记未整理

image-20230627110052231

消息订阅与发布

实现任意组件间通信的技术

要分清

需要消息的人(接受数据方)

发送消息的人(发送数据方)

Vue没有原生方法,使用第三方库pubsun-js,这个库可以实现在任何框架中

步骤:

订阅消息:需要数据的人去订阅消息,指定消息名

发布消息:发送数据的人,给指定的消息名发送数据

订阅的时候是什么名,发布的人就使用什么名.

B发送消息触发A的回调函数

image-20230711090131219

接收方代码:

// 订阅消息
mounted:{
    // publishid 
    // hello消息名
    // 回调函数,通过参数获得发送方发送的数据,msgName消息名,data发送方传递的数据
    // pubsub引入的库
	this.publishid = pubsub.subscribe('hello',function(msgName,data){
        // 操作,略
        console.log(this)  // 输出undefined,因为实在pubsub库中用的函数,不保证this指向
})
}
// 取消订阅
beforeDestroy() {
    // 取消订阅,定时器
    pubsub.undescribe(this.pubId);
  },

this指向的问题

问题:如果想让 pubsub的this指向Vue的实例对象怎么办?

方法:

  1. 把pubsub.subscribe的回调函数写成箭头函数的形式
  2. 在methods定义一个函数,然后在pubsub中调用这个函数,如this.demo

发送方代码:

// 业务:点击按钮发送消息
methods:{
    sendMessage(){
        // 执行发送消息的函数,发送666给订阅者
        pubsub.publish('hello',666)
        
    }
}

image-20230711092511309

总结

全局视总线和消息订阅与发布都可以实现任意组件的通信.

应该选择哪个

建议全局事件总线,因为这是Vue中自带的东西

nextclick

vue操作过程:等到回调函数全部执行完毕,才会重新渲染模板;这样做的好处时:如果改变多次数据,那么就要重新解析模板多次,太花费时间了.所以等到回调执行完统一重新解析模板.

解决方法

1.使用定时器

不给时间的定时器,给时间也可以

image-20230711095032263

2.使用$nextTick

$nextTick中的回调函数会等待模板解析完后再执行

  1. 语法：this.$nextTick(回调函数)
  2. 作用：在下一次 DOM 更新结束后执行其指定的回调。
  3. 什么时候用：当改变数据后，要==基于更新后的新DOM进行某些操作==时，要在nextTick所指定的回调函数中执行。

过渡与动画

显示与隐藏

动画效果

vue提供的功能：

在节点在显示和隐藏的时候自动调用 v-enter-active或v-leave-active加载动画

而不是自己手写js控制现在应该添加显示样式还是隐藏样式.

在页面加载的初次显示时,就使用显示动画,那么使用appear属性

在显示和隐藏时自动调用:

不给transion指定名字,默认去找v-enter-active和v-leave-active

/* 整个进入的过程 */
.v-enter-active
/* 整个离开的过程 */
.v-leave-active

过渡效果

过渡效果:在一定时间内实现元素状态转变为最终状态

/* 进入 */
.v-enter    进入起点
.v-enter-to 进入终点
/* 离开 */
.v-leave     离开起点
.v-leave-to  离开终点

进入起点的位置和离开终点位置相同

进入重点和位置和离开起点位置相同

因此,样式可以写成这样:

.v-enter , .v-leave-to  {
    
}
.v-enter-to , .v-leave {
    
}