【9.0】Vue之项目规范

【一】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。