【一】vue-cli创建项目

【1】引入

单页面应用（SPA）

单页面应用（Single Page Application，简称SPA）是一种Web应用程序的架构方式。
- 传统的多页面应用中，每次导航到新页面都会进行整个页面的重新加载。
- 而SPA只有一个主页面（通常是index.html），页面的内容通过动态渲染来更新，不会重新加载整个页面。
在使用Vue开发SPA时，我们通常只需要一个HTML文件（如xx.html）作为主页面
- 所有的页面内容都是通过Vue的组件来进行切换和更新。

单文件组件

单文件组件是Vue官方推荐的一种组织代码的方式。
通常情况下，一个组件会包含三个部分：HTML内容、CSS内容和JavaScript逻辑。
- HTML内容：
  - 我们将HTML代码放在一个<template>标签中，用来定义组件的布局和结构。
- CSS内容：
  - 我们将CSS代码放在一个<style>标签中，用来定义组件的样式。
- JavaScript内容：
  - 我们将JavaScript代码放在一个<script>标签中，用来定义组件的逻辑和行为。
使用单文件组件的好处是，可以更好地组织和管理代码，将相关的代码放在一个文件中，提高可读性和开发效率。

Vue脚手架（Vue CLI）

Vue脚手架（Vue CLI）是由Vue官方提供的一个工具，用于快速创建Vue项目并提供开箱即用的基础代码。
- 通过使用Vue脚手架，我们可以轻松创建出一个完整的Vue项目结构，包括配置文件、目录结构和示例代码。
类似于Django的django-admin命令用于创建Django项目，Vue脚手架通过一些简单的命令行操作，帮助我们快速生成Vue项目的初始代码，同时也提供了一系列的开发工具和便捷的开发环境。
总结来说，SPA、单文件组件和Vue脚手架是Vue开发中常用的概念和工具，它们能够帮助我们更好地组织和开发Vue应用程序。

【2】Vue CLI脚手架介绍

Vue CLI是一个官方提供的用于快速搭建Vue项目的脚手架工具。
- 它简化了Vue项目的配置和构建过程，提供了一系列的命令行工具，帮助开发者更高效地创建、管理和构建Vue应用程序。
在Vue 2中，使用Vue CLI是创建Vue项目的标准方式。
- 而在Vue 3中，除了Vue CLI，还可以使用Vite作为新一代的构建工具来创建Vue项目。

1. 快速创建项目

Vue CLI提供了快速创建Vue项目的命令，只需简单几步就能初始化一个基本的Vue项目结构，包括配置文件、目录结构和示例代码。

2. 丰富的插件生态系统

Vue CLI支持插件机制，用户可以根据项目需求选择性地安装和配置插件，以扩展Vue项目的功能。

3. 集成的开发服务器

Vue CLI内置了一个开发服务器，支持热重载(Hot Reload)特性，能够在开发阶段实时预览修改后的效果，提高开发效率。

4. 自动化构建和打包

Vue CLI集成了Webpack，提供了自动化构建和打包的功能。开发者可以使用预设的构建配置，也可以根据需求进行自定义配置。
同时，Vue CLI还支持代码分割、资源压缩等优化功能，生成最优化的生产环境代码。

5. 配置灵活、可扩展性强

Vue CLI的配置文件可用于更细粒度地控制项目的行为和打包过程。用户可以对各个环节做定制化配置，以满足项目的特殊需求。
总而言之，Vue CLI是一个能够提升开发效率、简化项目配置和构建过程的强大工具，广泛应用于Vue开发的各个阶段。

【二】安装Node.js和Vue CLI

（1）下载和安装Node.js

Vue CLI是一个基于Node.js运行的软件，因此需要先安装Node.js。
- 下载地址：https://nodejs.org/en/download/
- 下载完成后，运行安装程序，并按照提示一路点击"Next"进行安装。
- 在安装过程中，可以选择安装位置，并勾选"Automatically install the necessary tools for Node.js"，以确保在安装过程中自动安装所需的工具。
- 安装完成后，在命令行中输入以下命令，检查Node.js是否安装成功：
  - node -v
- 如果成功安装，会显示Node.js的版本号。

（2）安装Vue CLI

安装完成Node.js后，需要使用npm安装Vue CLI。
- 打开命令行窗口（Windows用户可以打开"命令提示符"或"PowerShell"），输入以下命令来安装Vue CLI：
  - npm install -g @vue/cli
- 这会在全局环境下安装Vue CLI，允许您在任何地方使用该命令。

（3）镜像替换（可选）

npm默认下载第三方模块的速度可能较慢，但是您可以使用淘宝的镜像站点加速下载过程。
- 在命令行中输入以下命令，用cnpm替代npm：
  - npm install -g cnpm --registry=https://registry.npm.taobao.org
- 安装完成后，以后使用npm安装模块的命令可以替换为cnpm。

（4）创建Vue项目

使用Vue CLI创建新的Vue项目非常简单。
- 打开命令行窗口，并进入您想要创建项目的目录。
- 输入以下命令，用Vue CLI创建项目：
  - vue create 项目名
- 例如，如果您想要创建一个名为"myfirstvue"的项目，可以输入以下命令：
  - vue create myfirstvue
- 创建项目时，Vue CLI会提示您选择包含预设配置的默认配置或手动选择配置。您可以根据需要进行选择。
- 创建过程可能需要一些时间，取决于网络和计算机性能。
- 创建完成后，您可以进入项目目录并开始开发Vue应用程序。

【三】Vue-cli创建项目

【1】命令行创建项目

vue create 项目名
vue create myfirstvue

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)       
  Default ([Vue 2] babel, eslint)       
  Manually select features

选择

Manually select features

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, 
and <enter> to proceed)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

选择Babel，Router，vuex
- Babel：语法转换
- Router：页面跳转路由效果
- vuex：状态管理器，存储数据的

选vue版本

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
   3.x
>  2.x

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

选package.json

装的第三方模块，都放在这个文件中，类似于Python中的requirements.txt

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Where do you prefer placing config for Babel, ESLint, etc.? 
  In dedicated config files
> In package.json

之前的设置，保存与不保存都可以

如果将配置保存，下次可以直接使用这个配置

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? Yes
? Save preset as: normal

等待即可

Vue CLI v5.0.8
✨  Creating project in E:\Old Boy\vue_project\myfirstvue.
?  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


added 844 packages in 3m
?  Invoking generators...
?  Installing additional dependencies...


added 7 packages in 2m
⚓  Running completion hooks...

?  Generating README.md...

?  Successfully created project myfirstvue.
?  Get started with the following commands:

 $ cd myfirstvue
 $ npm run serve

【2】使用vue-cli-ui创建

vue ui 启动出一个服务，直接在浏览器中点点击就可以创建

C:\Users\Administrator>vue ui
?  Starting GUI...
?  Ready on http://localhost:8000

【四】运行Vue项目

【1】找到Vue项目目录并打开

编写vue项目，使用编辑器
使用pycharm打开vue项目

【2】运行vue项目

（1）方式一

命令行中（一定要注意路径）

npm run serve

（2）方式二

使用pycharm运行 ---> 点击绿色箭头
- 配置一个启动脚本，以后点绿色箭头运行即可
Current File
- Edit configuration
- - scripts
    - serve
  - OK
直接运行

【3】Vue项目的解析

（1）浏览器中访问某个地址，会显示某个页面组件

vue-router:第三方插件
- 访问 /
  - 显示 HomeView.vue
- 访问 /about
  - 显示 AboutView.vue
根组件中：App.vue的整个页面中必须是
- 必须配置 router-view 标签
```
<template>
<div id="app">
    <router-view></router-view>
    </div>
</template>
```
- div id="app"
  - 被根组件管理了
  - 被根组件中[template]写什么，index.html就显示什么
  - 根组件中必须配置 router-view 标签
  - 使用 router-view 标签撑满这个 div 标签
  - 访问某个路径，显示不同的页面组件
    - router-view 标签被不同的组件撑满

1. 使用vue-router配置路由

路由是通过vue-router插件进行配置的。
- 在项目根目录下的router文件夹中的index.js文件是用于配置路由的主要文件
在 Views 文件夹内创建 MooView.vue 文件
router----> index.js---> const routes内配置路由

import Vue from 'vue'
import Router from 'vue-router'
import HomeView from '@/views/HomeView.vue'
import AboutView from '@/views/AboutView.vue'
// @代指src的文件路径


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: HomeView
    },
    {
      path: '/about', // 路由地址
      name: 'About', // 路由别名
      component: AboutView // 路由对应的视图文件
    }
  ]
})

放心大胆的写页面组件
- src---->views文件夹

2. 配置根组件

在根组件（App.vue）中，一般会包含<router-view></router-view>标签，用于展示不同路由所对应的组件。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

3. 编写页面组件

在src文件夹下的views文件夹内，可以编写各个页面组件
- 比如HomeView.vue和AboutView.vue。
HomeView.vue:

<template>
  <div class="home-view">
    <h1>Welcome to Home View!</h1>
  </div>
</template>

AboutView.vue:

<template>
  <div class="about-view">
    <h1>About Us</h1>
    <p>This is the About View component.</p>
  </div>
</template>

4. 在页面组件中使用小组件

在Vue项目中，我们可以把一些较小的可复用组件提取出来
- 然后在需要使用它们的父组件中导入、注册和使用。
导入组件：
- 在父组件（比如HomeView.vue）中，使用import语句导入需要使用的组件。

<script>
import Child from "@/components/Child";

export default {
  name: "HomeView",
  components: {
    Child
  },
  // ...
};
</script>

注册组件：
- 在父组件的components选项中注册需要使用的组件。

<script>
import Child from "@/components/Child";

export default {
  name: "HomeView",
  components: {
    Child
  },
  // ...
};
</script>

使用组件：在父组件的模板中使用子组件。

<template>
  <div class="home-view">
    <h1>Welcome to Home View!</h1>
    <Child></Child>
  </div>
</template>

同时，也可以向子组件传递属性或监听子组件抛出的事件。

<template>
  <div class="home-view">
    <h1>Welcome to Home View!</h1>
    <Child :message="msg" @myevent="handleEvent"></Child>
  </div>
</template>

<script>
import Child from "@/components/Child";

export default {
  name: "HomeView",
  components: {
    Child
  },
  data() {
    return {
      msg: "Hello from parent component!"
    };
  },
  methods: {
    handleEvent(data) {
      // 处理子组件抛出的事件
    }
  }
};
</script>

（2）在页面组件中使用小组件

写一个小组件，我们写了个Child.vue
在父组件中，导入组件
- import Child from "@/components/Child";
父组件中，注册组件
```
components: {
    Child
}
```
父组件中使用组件
- <Child :msg="msg" @myevent="handleEvent"></Child>
自定义属性，自定义事件，插槽，跟之前一模一样

【五】Vue项目的目录结构

myfirstvue          	      # 项目名
	-node_modules    		  # 文件夹，放了该项目所有的依赖，很小很多，以后把项目传给别人，这个要删除 ，别人拿到执行  cnpm install  安装依赖
    -public           		  # 文件夹
    	-favicon.ico  		  # 小图标，浏览器上面显示，可以替换
    	-index.html   		  # spa，这个html是整个项目的一个html，建议不要动
    -src          	          # 以后动这里面的东西，所有代码都在者
    	-assets      		  # 文件夹，放一些静态资源，图片，js，css
        -components  		  # 以后小组件写在里面  xx.vue
        	-HelloWorld.vue   # 默认提供了一个组件
        -router       		  # 装了vueRouter就会有这个文件夹，如果不装就没有
        	-index.js
        -store        		  # 装了vuex就会有，不装就没有   
        	-index.js
   		 -views      		  # 文件夹，里面放了所有页面组件
        	-AboutView.vue    # 首页组件
		    -HomeView.vue	  # 关于组件 	 
          -App.vue           # 根组件
          -main.js           # 项目启动的入口文件，核心
            
    -.gitignore       		  # git相关
    -README.md        	      # 项目介绍
    -package.json     		  # 重要，存放依赖
    -vue.config.js    		  # vue项目的配置文件
    -package-lock.json 		  # 锁定文件
    -babel.config.js   		  # babel的配置
    -jsconfig.json

总结
- 以后只需要关注src文件夹下的文件即可

node_modules: 该文件夹存放了项目所需的所有依赖库，这些依赖库在开发过程中会被安装。当将项目传递给别人时，可以将该文件夹删除，接收者可以通过运行命令 "cnpm install" 来安装项目所需的依赖库。

public: 该文件夹存放了一些公共静态资源文件。

favicon.ico: 这是网站的小图标，显示在浏览器标签页上，如果需要更换图标可以替换该文件。

index.html: 这是整个项目的一个HTML文件，是单页应用程序的入口文件，建议不要对它进行修改。

src: 该文件夹是整个项目的主要工作目录，大部分代码都是存放在这里。具体内容如下：

assets: 该文件夹存放一些静态资源，比如图片、JavaScript文件或者CSS文件。

components: 该文件夹用于存放项目中的各种小组件，每个小组件以.vue为后缀。默认提供了一个名为HelloWorld的组件。

router: 如果安装了vueRouter，就会有这个文件夹，用于配置路由。如果未安装vueRouter，则不会出现该文件夹。

store: 如果安装了vuex，就会有这个文件夹，用于管理和存储应用程序的状态。如果未安装vuex，则不会出现该文件夹。

views: 该文件夹用于存放各个页面的组件。

AboutView.vue: 关于页面的组件。

HomeView.vue: 首页组件。

App.vue: 这是整个项目的根组件。

main.js: 这是项目的入口文件，负责初始化vue实例并加载其他组件和配置。

.gitignore: 这个文件是用来配置Git版本控制时忽略的文件或目录。

README.md: 这是对项目的简要介绍和说明的文件。

package.json: 这个文件是整个项目的重要配置文件，它包含了项目的元数据信息、依赖库以及一些自定义的脚本命令。

vue.config.js: 这是Vue项目的配置文件，可以在这个文件中进行一些项目级别的配置，比如代理设置、构建路径等。

package-lock.json: 这个文件是用来锁定项目依赖库版本的文件，确保团队成员或者部署环境使用相同的依赖版本。

babel.config.js: 这是Babel编译工具的配置文件，用于将ES6+的代码转换为浏览器可运行的ES5代码。

jsconfig.json: 这是用于配置JavaScript语言服务的配置文件，提供了跳转到定义、自动补全等IDE功能支持。

【六】Vue的项目编写规范

【1】App.vue

myfirstvue\src\App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

【2】HomeView.vue

myfirstvue\src\views\HomeView.vue

<template>
  <div class="home">
  </div>
</template>

<script>
export default {
  name: 'HomeView',
}
</script>

【3】AboutView.vue

myfirstvue\src\views\AboutView.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

【4】Vue代码书写位置

写vue项目，只需要在固定位置写固定代码即可
只需要创建页面组件
- IndexView.vue
里面有三部分
- template标签
  - 必须只能有一个标签，以后所有的html都写在这里
  - 该标签内部应包含组件的HTML模板代码。
  - 通常情况下，模板中必须只能有一个根节点。
```
<template>
<div class="home">
    <h1>我是首页</h1>
    <button @click="handleClick">点我看美女</button>
    </div>
</template>
```
- script标签
  - 写js代码
  - 该标签内部应包含组件的JavaScript代码。
  - 在export default对象内定义组件的相关选项、数据和方法。
```
<script>
    export default {
name: 'HomeView',
    data(){return {

}},
    methods: {
        handleClick() {
            alert('美女')
        }
    }
}
    </script>
```
- style标签
  - 所有的样式
  - 该标签内部可以包含组件的样式代码
```
<style>
h1{
    font-size: 80px;
}
</style>
```

【七】scoped

新建的组件
- 加了scoped，表示样式只在当前组件生效
- 如果不加，子组件都会使用这个样式

<style scoped>
</style>

scoped 是 Vue.js 中的一个样式作用域限定符，用于将样式限制在当前组件中生效，并不会影响子组件或父组件。
- 使用 scoped 后，样式只会应用于当前组件的模板部分，不会影响其他组件。
例如，在一个 Vue 组件中，我们可以这样定义样式：

<template>
  <div class="app">
    <h1>{{ message }}</h1>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'AppComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello World'
    };
  }
}
</script>

<style scoped>
.app {
  background-color: #f0f0f0;
  padding: 20px;
}
h1 {
  color: blue;
}
</style>

在上述代码中，我们给 <style> 标签添加了 scoped 属性。
- 这意味着 .app 类和 h1 元素的样式仅适用于当前组件（AppComponent），不会影响其他组件或全局样式。
- 如果在这个组件的模板中使用了 <child-component></child-component>，子组件的样式将不受到父组件的样式影响。
下面是子组件（ChildComponent）的示例代码：

<template>
  <div class="child">
    <h2>Child component</h2>
    <p>This is a child component.</p>
  </div>
</template>

<style scoped>
.child {
  background-color: yellow;
  padding: 10px;
}
h2 {
  color: red;
}
</style>

在子组件中，我们同样使用了 scoped 属性来限定样式作用域。
- 这样，子组件的样式也仅在子组件中生效，不会受到父组件或其他组件样式的干扰。
总结来说
- 使用 <style scoped> 可以让样式仅在当前组件中生效，避免样式冲突和作用域泄漏的问题。
- 每个组件都有自己的作用域，可以独立定义和管理样式，提高代码的可维护性。

【八】ref属性

放在普通标签上，通过 this.$refs.名字---》取到的是dom对象，可以直接操作dom

放在组件上，通过该this.$refs.名字---》取到的是组件对象，这样在父组件中，就拿到了子组件对象，对象属性和方法直接用即可

ref 属性是 Vue.js 中用于获取对 DOM 元素或组件实例的引用的属性。通过在普通标签上或组件上添加 ref 属性，我们可以在 JavaScript 代码中使用 this.$refs.xxx 来访问对应的 DOM 元素或组件实例。

【1】在普通标签上使用 ref：

当 ref 属性放置在普通标签上时，this.$refs.xxx 将返回一个指向该 DOM 元素的引用。
- 我们可以通过操作该 DOM 元素进行各种 DOM 操作。
例如
- 在下面的示例中，我们在一个 input 标签上添加了 ref 属性，并通过按钮点击事件获取该 input 标签的值并进行处理：

<template>
  <div>
    <input type="text" ref="myInput">
    <button @click="handleClick">获取输入值</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      const input = this.$refs.myInput;
      const value = input.value;
      // 处理获取到的输入值
      console.log(value);
    }
  }
}
</script>

在上面的代码中，我们在 input 标签上添加了 ref="myInput" 属性
- 然后在 handleClick 方法中通过 this.$refs.myInput 获取到该 input 元素的引用。
- 接着，我们可以使用该引用来获取输入框的值并进行进一步的处理。

【2】在组件上使用 ref：

当 ref 属性放置在组件上时，this.$refs.xxx 将返回一个对该组件实例的引用。
- 这样在父组件中，我们可以通过 this.$refs.xxx 来访问子组件的属性和方法，实现父子组件之间的通信。
例如
- 在下面的示例中，我们有一个父组件和一个子组件，通过在子组件上添加 ref 属性并在父组件中访问该引用，实现了父组件获取到子组件实例的功能：

<template>
  <div>
    <child-component ref="myChild"></child-component>
    <button @click="handleChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildMethod() {
      const child = this.$refs.myChild;
      child.childMethod(); // 调用子组件的方法
    }
  }
}
</script>

在上面的代码中，我们在子组件的标签上添加了 ref="myChild" 属性
- 然后在父组件中通过 this.$refs.myChild 获取到该子组件的实例，并进行进一步的操作，例如调用子组件的方法。
总结来说
- ref 属性可以用于获取对 DOM 元素或组件实例的引用，从而实现对其的操作和通信。
- 在普通标签上使用 ref 属性可以获得对应的 DOM 元素的引用，而在组件上使用 ref 属性则可以获得对应的组件实例的引用，方便进行组件之间的交互和通信。

【九】props其它

父传子之自定义属性
基本使用
- props: ['msg']
限制类型
- props: {'msg': Boolean}

限制类型，必填，默认值

props: {
    msg: {
        type: String, //类型
            required: true, //必要性
                default: '老王' //默认值
    }
}

props 是 Vue.js 中用于父组件向子组件传递数据的方式之一。
props 允许父组件向子组件传递数据，并在子组件中以属性的形式接收这些数据。

【1】父传子之自定义属性：

通过 props，父组件可以向子组件传递自定义属性，子组件可以通过在 props 中声明该属性来接收传递的值。
例如，在下面的示例中，我们有一个父组件和一个子组件，通过在子组件上添加 props 声明接收属性，实现了父组件向子组件传递自定义属性的功能：

<template>
  <div>
    <child-component :customMsg="message"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello from parent!'
    };
  }
}
</script>

在上面的代码中，我们将父组件的 message 属性赋值为 'Hello from parent!'。
- 然后，将这个属性通过 v-bind 绑定到子组件的 customMsg 属性上，子组件就可以接收到父组件传递过来的自定义属性。

【2】基本使用：

在子组件中基本使用 props 的方式是将要传递的属性名作为数组传递给 props。子组件将能够接收到父组件传递过来的对应值。
例如，在下面的示例中，我们有一个父组件和一个子组件，父组件向子组件传递了一个名为 msg 的属性：

<template>
  <div>
    <child-component :msg="message"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello from parent!'
    };
  }
}
</script>

在子组件中，我们可以通过在 props 中添加 'msg' 来声明接收属性，然后在子组件中使用该属性。

<template>
  <div>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  props: ['msg']
}
</script>

上述子组件会渲染出从父组件传递过来的 message 属性的值。

【3】限制类型：

在使用 props 时
- 可以通过设置 type 选项来限制传递属性的类型。
- 这样可以确保接收到的值是符合预期的类型。
例如，在下面的示例中，我们限制了传递的 msg 属性只能是 Boolean 类型：

<template>
  <div>
    <child-component :msg="true"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
}
</script>

在子组件中，我们可以通过设置 props 中的值为指定的类型来限制传递属性的类型：

<template>
  <div>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  props: {
    msg: Boolean
  }
}
</script>

上述子组件只接受布尔类型的 msg 属性
- 如果父组件传递了其他类型的属性值，Vue.js 会发出一个警告。

【4】限制类型、必填和默认值：

除了限制类型外
- 还可以通过 required 选项来指定一个属性是否为必填项，并使用 default 选项来指定属性的默认值。
例如
- 在下面的示例中
- 我们限制了传递的 msg 属性只能是字符串类型，必须填写，并且默认值为 '老王'：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
}
</script>

在子组件中
- 我们可以通过设置 props 中的值为一个对象来限制属性的类型、必填和默认值：

<template>
  <div>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  props: {
    msg: {
      type: String,
      required: true,
      default: '老王'
    }
  }
}
</script>

上述示例中的子组件会默认渲染出 '老王'，因为没有父组件给它传递 msg 属性。
- 如果父组件传递了 msg 属性，则子组件将渲染出传递的值。
- 如果没有传递 msg 属性，并且设置了 required: true，Vue.js 会发出一个警告。
总结来说
- props 是用于父组件向子组件传递数据的方式之一。
- 通过在子组件中声明 props，可以限制传递属性的类型，并指定某些属性为必填项，并为属性设置默认值。
- 这样可以有效地控制父子组件之间的数据传递和交互。

【十】混入mixin

包下的 index.js 有特殊函数
- 之前导入
  - import xx from './mixin/index.js'
- 简化导入路径
  - import xx from './mixin'
mixin(混入)
- 混入可以将多个组件共用的配置提取成一个混入对象，从而实现代码复用和逻辑分离的目的。
- 混入对象一般会包含组件的数据、方法等。

使用步骤

定义混入对象
在 mixin/index.js 文件中，定义了一个名为 child 的混入对象，包含了 data 和 methods。

export const child = {
    data() {
        return {
            name: 'child',
        }
    },
    methods: {
        clickFunc() {
            alert(this.name)
        }
    }
}

使用混入：

通过局部使用混入，即在组件中使用混入对象 child 的配置。

// 导入混入对象
import {child} from "@/mixin";

export default {
  name: 'HomeViews',
  data() {
    return {}
  },
  methods: {},
  // 注册混入对象
  mixins: [child,]
}

全局使用混入：

每个组件都有效main.js中

// 全局注册混入
// 导入混入
import {child} from "@/mixin";
// 注册混入
Vue.mixin()

局部优先

<template>
  <div class="home">

    <h1>这是 HomeView 首页</h1>

    <button @click="clickFunc">点我弹名字</button>
  </div>
</template>
<div class="home">

</div>
<script>
// 导入混入对象
import {child} from "@/mixin";

export default {
  name: 'HomeView',
  data() {
    return {
      name:'HomeView',
    }
  },
  methods: {},
  // 注册混入对象
  mixins: [child,]
}
</script>

【十一】插件

插件功能：用于增强Vue，有很多第三方插件
- (vuex，router，elemetui)
定义自己的插件
- 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据

使用步骤：

定义插件

plugins---》index.js---》

export default {
    install() {
        # 1 在vue实例中放属性
        # 2 定义混入，全局都可以使用混入
        # 3 自定义指令(不讲了)---》以后我们可能使用了一个第三方插件，它提供了一些指令  v-lq
         # 4 定义全局组件---》全局
        }
    }

在main.js中使用插件

import child from '@/plugins'
        Vue.use(child)  # 这句话，就会执行child中得install，并且把vue传入

import axios from "axios";
import Vue from 'vue';

export default {
    install(vue) {
        // console.log(vue) // vue 实例
        //  1 在vue实例中放属性
        // 向Vue的原型中方axios对象,在组件中 this.$ajax ----> 拿到的就是 axios 对象 ，直接使用即可
        // Vue.prototype.$ajax = axios;
        // 2 定义混入，全局都可以使用混入
        // Vue.mixin({
        //     data() {
        //         return {
        //             name: 'child',
        //         }
        //     },
        //     methods: {
        //         clickFunc() {
        //             alert(this.name)
        //         }
        //     }
        // })
        // 3 自定义指令(不讲了)---》以后我们可能使用了一个第三方插件，它提供了一些指令  v-lq
        
        // 4 定义全局组件---》全局
    }
};

【十二】Elementui

ElementUI是一个基于Vue.js的UI库，用于控制样式和提供丰富的组件、指令和工具。
- 通过引入ElementUI，可以快速构建美观、响应式的用户界面。
在Vue项目中使用ElementUI，需要进行以下配置步骤：
- 在项目中安装
  
  cnpm install element-ui -S
- main.js配置
  - 导入ElementUI对象：
    - 在main.js文件中
    - 使用import ElementUI from 'element-ui'将ElementUI对象引入。
  - 引入ElementUI样式：
    - 继续在main.js文件中
    - 使用import 'element-ui/lib/theme-chalk/index.css'引入ElementUI的样式。
```
// 导入ElementUI对象
import ElementUI from 'element-ui';       
// 引入ElementUI样式
import 'element-ui/lib/theme-chalk/index.css'; 
```
- 注册ElementUI组件：
  - 在main.js文件中，通过Vue.use(ElementUI)全局注册ElementUI组件，并使其可在所有的Vue组件中使用。
```
Vue.use(ElementUI)
```
- 这样配置完成后，就可以在项目中直接使用ElementUI提供的组件和样式了。
  - 如果在其他组件中看到了喜欢的ElementUI的样式效果，可以直接复制相关的HTML、CSS和JavaScript代码来使用。
  - 通过引入ElementUI，可以简化UI设计和开发工作，提供了许多常用的交互组件和布局，如按钮、弹窗、表格等。
  - 此外，ElementUI还提供了一些附加的功能，如表单验证、日期选择器、图标库等，可根据具体需求灵活使用。

【案例一】Vue案例之登陆案例

【1】登录页面：LoginView.vue

<script setup>

</script>

<template>

  <div>
    <p>用户名:: <input type="text" v-model="username"></p>
    <p>密码:: <input type="text" v-model="password"></p>
    <button @click="clickFunc">点我登陆</button>
  </div>

</template>

<script>
// 安装的依赖直接导入即可
import axios from "axios";

export default {
  name: "LoginView",
  data() {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    clickFunc() {
      // console.log(this.username)
      // console.log(this.password)
      axios.post("http://127.0.0.1:8000/login/", {
        username: this.username,
        password: this.password
      }).then(res => {
        // console.log(res.data) // {code: 201, msg: '用户名或密码错误!'}
        // 根据后端结果返回指定数据
        if (res.data.code === 200) {
          // 密码正确跳转页面
          location.href = "https://pic.netbian.com/4kmeinv/"
        } else {
          // 密码错误
          alert(res.data.msg)
        }
      })
    }
  }

}
</script>

<style scoped>

</style>

【2】访问/login 显示这个页面组件

const routes = [
    {
        path: '/login',
        name: 'login',
        component: LoginView
    },
]

【3】在LoginView.vue写html/js/axios

安装 axios

cnpm install -S axios
- S:把安装的axios放到package.json中

【4】写ajax，向后端发送请求

给按钮绑定两个一个事件
安装axios，导入axios

（1）后端

视图

from django.shortcuts import render, HttpResponse

from rest_framework.viewsets import ViewSet
from rest_framework.response import Response


# Create your views here.

class LoginView(ViewSet):
    back_dict = {"code": 200, "msg": ""}

    def login(self, request):
        username = request.data.get('username')
        password = request.data.get('password')
        if username == "dream" and password == "521":
            self.back_dict["code"] = 200
            self.back_dict["msg"] = "登陆成功!"
            return Response(self.back_dict)
        self.back_dict["code"] = 201
        self.back_dict["msg"] = "用户名或密码错误!"
        return Response(self.back_dict)

路由

from vue06 import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('login/', views.LoginView.as_view({
        "post": 'login',
    })),
]

配置文件

INSTALLED_APPS = [
    'vue06.apps.Vue06Config',
    'corsheaders',
    'rest_framework'
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
]

# 跨域配置
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)

CORS_ALLOW_HEADERS = (
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'Pragma',
    'token'
)

（2）前端逻辑

<script>
// 安装的依赖直接导入即可
import axios from "axios";

export default {
  name: "LoginView",
  data() {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    clickFunc() {
      // console.log(this.username)
      // console.log(this.password)
      axios.post("http://127.0.0.1:8000/login/", {
        username: this.username,
        password: this.password
      }).then(res => {
        // console.log(res.data) // {code: 201, msg: '用户名或密码错误!'}
        // 根据后端结果返回指定数据
        if (res.data.code === 200) {
          // 密码正确跳转页面
          location.href = "https://pic.netbian.com/4kmeinv/"
        } else {
          // 密码错误
          alert(res.data.msg)
        }
      })
    }
  }

}
</script>

【补充】后端接口处理跨域

【1】安装

pip3.9 install django-cors-headers

【2】注册app

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

【3】配置中间件

MIDDLEWARE = [  
    ...
    'corsheaders.middleware.CorsMiddleware',
    ...
]

【4】配置文件

配置文件中加入：setting下面添加下面的配置

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)

CORS_ALLOW_HEADERS = (
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'Pragma',
    'token'
)

【补充】es6导入导出语法

es6 导入导出语法用于在模块化开发中进行模块之间的依赖管理。

【1】导出语法

项目中：创建包，创建要给文件夹 model
在包的文件中定义变量、函数等。
- 在包下创建 package.js
- 在文件中写js代码

（1）默认导出对象

使用 export default 关键字将需要导出的内容包裹在一个对象中，并将该对象作为默认导出。

var name = 'first_child'
function add(a, b) {
    return a + b
}

export default {
    add:add,
    name:name
}

（2）命名导出（可以导出多个变量）

在包的文件中定义变量、函数等。
使用 export 关键字分别导出需要导出的变量、函数等。

export const name = 'dream'
export const add = (a, b) => {
    return a * b
}

【2】导入语法

（1）默认导出的导入

在任意的 JavaScript 文件中使用 import 关键字导入默认导出。
导入的内容将被赋值给一个自定义的变量名，可以根据需求自行命名。
```
import 起个名字  from './model/package'

import myPackage from './model/package'
```
使用导入的包时，通过自定义的变量名访问导出的字段。
- 例如，myPackage.add 或 myPackage.name。

（2）命名导出的导入

在任意的 JavaScript 文件中使用 import 关键字导入命名导出。
要导入的变量名需要和导出时保持一致。
```
import {name,add}  from './model/package'
```
直接使用导入的变量即可
- 例如直接使用 name 和 add。

JZTXT

【9.0】Vue之项目规范

【一】vue-cli创建项目

【1】引入

单页面应用（SPA）

单文件组件

Vue脚手架（Vue CLI）

【2】Vue CLI脚手架介绍

1. 快速创建项目

2. 丰富的插件生态系统

3. 集成的开发服务器

4. 自动化构建和打包

5. 配置灵活、可扩展性强

【二】安装Node.js和Vue CLI

（1）下载和安装Node.js

（2）安装Vue CLI

（3）镜像替换（可选）

（4）创建Vue项目

【三】Vue-cli创建项目

【1】命令行创建项目

【2】使用vue-cli-ui创建

【四】运行Vue项目

【1】找到Vue项目目录并打开

【2】运行vue项目

（1）方式一

（2）方式二

【3】Vue项目的解析

（1）浏览器中访问某个地址，会显示某个页面组件

1. 使用vue-router配置路由

2. 配置根组件

3. 编写页面组件

4. 在页面组件中使用小组件

（2）在页面组件中使用小组件

【五】Vue项目的目录结构

【六】Vue的项目编写规范

【1】App.vue

【2】HomeView.vue

【3】AboutView.vue

【4】Vue代码书写位置

【七】scoped

【八】ref属性

【1】在普通标签上使用 ref：

【2】在组件上使用 ref：

【九】props其它

【1】父传子之自定义属性：

【2】基本使用：

【3】限制类型：

【4】限制类型、必填和默认值：

【十】混入mixin

【十一】插件

【十二】Elementui

【案例一】Vue案例之登陆案例

【1】登录页面：LoginView.vue

【2】访问/login 显示这个页面组件

【3】在LoginView.vue写html/js/axios

【4】写ajax，向后端发送请求

（1）后端

（2）前端逻辑

【补充】后端接口处理跨域

【1】安装

【2】注册app

【3】配置中间件

【4】配置文件

【补充】es6导入导出语法

【1】导出语法

（1）默认导出 对象

（2）命名导出（可以导出多个变量）

【2】导入语法

（1）默认导出的导入

（2）命名导出的导入

（1）默认导出对象