Vue基础学习笔记02

• 若需要vue-cli前的部分（也就是基础）请访问我的Vue基础学习笔记01链接如下
  Vue基础学习笔记01
• 本文部分截图来自于b站黑马程序员vue2.0教学视频
  教学视频入口

一、vue-cli（脚手架）

1、什么是单页面应用程序

2、什么是vue-cli

3、安装和使用

3.1）安装使用vue-cli创建项目

• 1、在终端下运行如下命令

npm install -g @vue/cli

• 2、在根目录内大考终端，运行如下命令创建目录

vue create 项目名称

• 3、选择自己所需的方案（上下箭头选择，这里我选择的是第三个，手动生成）
  
• 4、选择自己所需要的库（按空格是选择，这里我选择了babel个css）
  
• 5、选择vue版本（因为我们学习的是vue2，所以我们在这里选择2.x）
  
• 6、选择css处理模块（选择less处理模块）
  
• 7、选择创建的文件类型（独立配置文件还是.json配置文件，这里我们是开发，所以先选独立配置，也就是第一个）
  
• 8、选择是否保存预设（看你自己）
  
• 9、项目创建成功
  

使用 npm run serve 就可以了 如果这里看不明白，就请进入我的webpack文章去看看，链接在下方
Webpack学习笔记

3.2）vue项目中src目录的构成：

• 1、assets 文件夹：存放项目中用到的静态资源文件，例如：css 样式表、图片资源
• 2、components 文件夹：程序员封装的、可复用的组件。都要存放到components 目录下
• 3、main.js 是项目的入口文件，整个项目的运行，要先执行main.js
• 4、App.vue 是项目的根组件

4、vue项目的运行流程

• 测试$mount(‘idname’)
  

二、vue组件

1、什么是组件化开发

2、vue中的组件化开发

3、vue组件的三个组成部分

每个.vue 组件都有三部分组成，分别是：

• template -> 组件的模板结构
• script -> 组件的JavaScript行为
• style -> 组件的样式

4、 .vue组件的格式

<template>
    <div class="text-box">
        <h3>这是用户自定义的test.vue  --- {{ username }}h3>
        <button @click='changename'>修改用户名button>
    div>
template>

<script>
//默认导出，这是固定写法
export default {
    //data数据
    //注意：.vue 组件中的data 不能像之前一样，不能指向对象
    //注意： 组件中的data必须是一个函数

    data() {
        //这个return出去的 {}中，可以定义数据
        return {
            username: 'admin'
        }
    },
    methods: {
        changename(){
            //在组件中，this就表示当前组件的实例对象
            this.username = 'wahaha'
            console.log('this :>> ', this);
        }
    },
    //当前组件中的侦听器
    watch: {

    },
    //当前组件中的计算属性
    computed: {

    },
    //当前组件中的过滤器
    filters: {

    },
}
script>


<style lang='less'>
    .text-box{
        background-color:pink;
    }
    h3{
        color: red;
    }
style>

5、main.js组件代码解析

// 导入 vue 这个包，得到 vue 的构造函数
import Vue from 'vue'
// 导入 app.vue 根组件, 将来要把 App.vue 中的模板结构，渲染到HTML页面中
import App from './App.vue'
import test from './test.vue'

Vue.config.productionTip = false

//创建Vue的实例对象
new Vue({
  // el: '#app',    //el:  和 $mount('#app')都是替换掉原网页中  div为 app的替换成app.vue里面的内容
  // render 把render 函数指定的组件，渲染到 HTML 页面中
  //render函数中，渲染的是哪个.vue组件，那么这个组件就叫做“根组件”
  render: h => h(test),
}).$mount('#app')

//vue 实例的 $mount()  方法，作用和 el 属性完全一样

6、组件之间的父子关系

• 1、文件位置：
  
• 2、关系图：
  

6.1、组件使用的三个步骤

• 1、使用实例：
  

6.1.1）配置路径提示

然后我们再settings.json文件中输入：

    "path-autocomplete.extensionOnImport": true,
    "path-autocomplete.pathMappings":{"@":"${folder}/src"},

即可~

6.2、通过components注册的是私有子组件

6.3、注册全局组件

7、组件props

7.1、props示例

这里我们需要左右两边的box中的count都不同，那么我们使用一个自定义参数props（只要不符合命名规范即可）来设置一个init来代替count再将init渲染到页面上就可以了

7.2、props只读

• 转存props让count来接收它的值，这样count是可读可写的

• 转存例子:

7.3、props的默认值

• 设置props的默认值：
  

7.4、props的type属性

• 报错案例
  

7.5、props的required

• 实例：
  

8、组件之间的样式冲突问题

• 为防止组件之间的样式冲突，我们在写样式的时候，尽量加上一个scoped
  

当使用第三方组件库的时候，如果有修改组件默认样式的需求，需要用到 /deep/

9、组件的生命周期

9.1、组件生命周期函数的分类

9.2、生命周期示意图

• 生命周期中最重要的三个
  

10、组件之间的关系

10.1、父子组件之间的数据共享

• 数据共享案例
  

10.2、子向父出传递数据

• 案例
  

10.3、兄弟之间传输数据

10.3.1、eventBus

• 实例：
  

11、对前几天所学做总结

12、ref引用

12.1、什么是ref

12.2、使用ref引用DOM

• 实例
  

12.3、ref引用组件

• 实例
  

12.4、this.newtTick(cb)

13、购物车实例

经历两天才做出来
详情请见Vue购物车案例：
购物车案例

14、动态组件

14.1、什么是的动态组件

14.2、如何实现动态组件渲染

14.3、keep-alive保持状态

14.4、keep-alive对应的生命周期函数

14.5、keep-alive — include

14.6、keep-alive — exclude

• 和上面的 include 使用方法一样，但是这个是排除，不要同时使用 include 和 exclude 这两个属性

15、插槽

15.1、什么是插槽

• 示例代码

<Left>
  
   
   
   
   
   
  <template #default>
    <p>这是在Left区域的内容p>
  template>
Left>

15.2、后备内容

15.3、自定义插槽

15.5、将购物车案例进行重构

• 使用今天学的知识，将购物车案例进行重构

16、自定义指令

16.1、什么是自定义指令

16.2、自定义指令的分类

16.3、私有自定义指令

• 声明自定义指令
  

16.4、bind函数

16.5、update函数

• 示例
  

注意： bind函数只在第一次生效，但是若不同时使用两者，只是用update的话，那么第一次不会被执行

16.6、函数简写

注意：一定要在bind和update的逻辑完全相同的时候才能简写，也就是他们两个要实现的颜色之类的必须是一样的才能简写

16.7、main.js 文件中的一行代码

Vue.config.productionTip = true

这行代码删除或者写成true，在控制台里我们回看见他给我们的提示

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

• 大致的意思就是我们正在处于开发阶段，若需要正式挂载，那么就进入 production mode 去实现打包

17、ESLint

给一个写代码的规则
详情请点击下面ESLint中文网链接：
ESLint

非常好，今天又是全天报错的一天

18、路由

18.1、什么是路由

18.2、SPA与前端路由

18.3、什么是前端路由

18.4、前端路由的工作方式

18.5、简易实现前端路由

19、vue-router

19.1、什么是vue-router

19.2、vue-router安装和配置的步骤

19.3、一个小小的路由跳转

20、vue-router的常见用法

20.1、默认路由

20.2、默认路由

20.3、动态路由匹配

20.3.1、动态路由的概念

20.4、声明式导航 & 编程式导航

20.4.1、vue-router 中的编程式导航API

20.4.1.1、&router.go方法

20.4.1.2、&router.go的简化用法

注意：在行内使用编程式导航跳转的时候，this 必须要省略，否则会报错！

21、导航守卫

21.1、全局前置守卫

20.2、守卫方法的3个形参

20.3、next函数的3中调用方式

20.4、后台管理系统

• 这里有一个点没完成，在添加防止未登录情况下直接通过地址栏访问home主页的路由守卫时，会导致登录的时候拿到了token但是无法登录，所以在这里先把路由守卫给删除了