开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 2022秋第二次讨论班 -> 正文阅读

[JavaScript知识库]2022秋第二次讨论班

涉及内容：（Vue基础），组件初始化，父子组件传值，插槽

1-11 Vue介绍

原生js开发慢，更少的时间干更多的活——开发网站速度快
渐进式js框架，一套拥有自己规则的语法
渐进式：逐渐进步，想用什么就用什么，不必全都使用
web里的渐进式：html写网页，css能让网页更好看，js赋予网页交互效果，jQ写的更快，node可以提供动态数据
Vue里的渐进式，声明式渲染，组件系统，客户端路由，大规模状态管理，构建工具
官网地址https://cn.vuejs.org

11.1 库和框架

库：封装的属性或方法（jQuery）
框架：拥有自己的规则和元素，比库强大得多（Vue）

11.2 Vue学习方式

传统开发模式：基于html文件开发Vue
工程化开发方式：在webpack环境中开发Vue，这是最推荐，企业常用的方式（如下图）在这里插入图片描述

1-12 Vue脚手架介绍

12.1 @vue/cli脚手架介绍

@vue/cli是Vue官方提供的一个全局模块包（得到vue命令），此包用于创建脚手架项目
脚手架是为了保证各施工过程顺利进行而搭设的工作平台
好处：开箱即用 0配置webpack（babel支持，css、less支持，开发服务器支持）
创建脚手架项目vue create 项目名
如何在网页上浏览这个项目
1.所在文件夹路径处cmd 进入终端
2.yarn serve 启动本地热更新开发服务器（http网址复制到浏览器中打开）
在这里插入图片描述

12.2 @vue/cli目录和代码分析

在这里插入图片描述

脚手架中的主要文件及作用说明
node_modules 下载的第三方包
public/index.html 浏览器运行的网页
src/main.js webpack打包的入口
src/App.vue Vue页面入口
package.json 依赖包列表文件

1-13 Vue配置

13.1 项目架构了解

知道项目入口，代码执行顺序和引入关系
在这里插入图片描述

main.js 项目打包主入口——Vue初始化
App.vue Vue页面主入口
index.html 浏览器运行的文件
App.vue => main.js => index.html

13.2 @vue/cli自定义配置

在这里插入图片描述

13.3 eslint检查代码

代码检查工具，写代码违反eslint的规则——报错
演示：在main.js中随便定义变量，不使用（这个变量），会报错
解决方法：
1.手动解决错误，以后项目中会讲如何自动解决
2.暂时关闭eslint检查，在vue.config.js中配置后重启服务器

module.exports = {
	//...其他配置，
	lintOnSave：false //关闭eslint检查
}

1-14 Vue单文件开发

14.1 vue单文件开发

代码写在一起，需要留意class类名和js变量名不能重复
Vue推荐采用.vue文件来开发项目
template里只能有一个根标签
js独立作用域互不影响
style配合scoped属性，保证样式只针对当前template内标签有效

	<!-- template必须，只能有一个根标签，影响渲染到页面的标签结构 -->
    <template>
        <div>欢迎使用Vue</div><!-- 一个根标签 可以是p 也可以是div等 -->
    </template>
    <!-- js相关 -->
    <script>
        export default {
            name: 'App',
        }
    </script>
    <!-- 当前组件的样式，设置scoped，可以保证样式只对当前页面有效 -->
    <style scoped>
    </style>

单vue文件好处：独立作用域，不再担心变量重名问题

14.2 清空脚手架欢迎界面

在这里插入图片描述

<template>
  <!-- 添加div标签 -->
  <div></div>
</template>

<script>
export default {

}
</script>

<style>

</style>

1-15 Vue指令（一）

1-16 Vue指令（二）

1-25 Vue组件

25.1 实现多个

多套相同结构标签，变量区分开，分别控制，需要一一命名（isShow1,isShow2,…）
解决方案:采用vue提供的单.vue文件——组件方式来封装一套然后复用
在这里插入图片描述
（对应style也要拿过来）

25.2组件引入，注册

在这里插入图片描述

<template>
  <!-- 添加div标签 -->
  <div id="app">
    <h3>案例：折叠面板</h3>
    <Pannel></Pannel>
    <Pannel></Pannel>
    <Pannel></Pannel>
  </div>
</template>

<script>
import Pannel from "./components/Pannel";//引入
export default {
  components: {
    Pannel: Pannel,//注册
  },
};
</script>

<style></style>

组件可以自己进行封装，在别的项目也可以进行使用
组件各自独立，便于复用

25.3 组件概念

组件是可复用的Vue实例，封装标签，样式和代码
组件各自独立，互不影响
组件化，封装的思想，把页面上“可重用的部分”封装为组件，从而方便项目的开发和维护
一个页面，可以拆分成一个个组件，一个组件就是一个整体，每个组件可以有自己独立的结构、样式和行为（html，css，js）
遇到重复标签，可复用的时候——封装组件

25.4 组件基本使用

1.创建组件，封装要复用的标签，样式，js代码
2.引入，注册组件
3.组件名当作标签使用即可

a.全局注册——main.js中
import Vue from 'vue'
import 组件对象 from 'vue文件路径'
Vue.component("组件名",组件对象)

b.局部注册——某.vue文件内
import 组件对象 from 'vue文件路径'
export default {
???? components: {
????????????"组件名":组件对象
??????}
}
注意：key和value变量名同名——组件名与组件对象变量名同名时，可以简写
eg.components： {
?????//Product：Product
?????Product//简写形式
}

25.5 组件——scoped作用

准备：当前组件内标签都被添加data-v-hash值的属性
获取：css选择器都被添加 [data-v-hash值] 的属性选择器
在这里插入图片描述

1-26 组件通信

引入：如何从一个组件内，给另外一个组件传值？（不使用localStorage，直接传递）

26.1 父传子_props

父组件 => 子组件
首先明确父和子是谁（在父引入子——被引入的是子）
目标：父传子，分别传值进入，每次组件显示不同的数据信息
1.子组件——props——变量（准备接收）
在这里插入图片描述
2.父组件——传值进去

26.2 父向子配合循环使用

在这里插入图片描述
注意：每次循环，变量和组件都是独立的，obj也是独立的，变量前面要加“：”

26.3 单向数据流

从父到子的数据流向，叫单向数据流
子组件修改，不通知父级，造成数据不一致
Vue规定props里的变量，本身是只读的
仅针对基本数据类型，对象等类型修改后仍可以正常对父组件进行修改
在这里插入图片描述
点击一次按钮，价格会-1，但是若最终结算，父组件中的值没有被改变
不建议子组件修改父组件传过来的值