Vue2基础学习笔记02_vue笔记购物车-CSDN博客

本文链接：https://blog.csdn.net/weixin_53547097/article/details/125619256

文章目录

一、vue-cli（脚手架）
二、vue组件

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

一、vue-cli（脚手架）

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

单页面应用程序

2、什么是vue-cli

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中的组件化开发

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

组件props

7.1、props示例

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

7.2、props只读

props只读

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

转存props

转存例子:

转存例子

7.3、props的默认值

props的默认值

设置props的默认值：

7.4、props的type属性

type属性

报错案例

7.5、props的`required`

required

实例：

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

组件之间的样式冲突问题

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

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

9、组件的生命周期

生命周期

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

三个阶段

9.2、生命周期示意图

生命周期图示

生命周期中最重要的三个

10、组件之间的关系

组件之间的关系

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

父子共享数据

数据共享案例

10.2、子向父出传递数据

子向父传递数据

案例

10.3、兄弟之间传输数据

兄弟传输数据

10.3.1、eventBus

eventBus

实例：

11、对前几天所学做总结

Vue基础思维导图

12、ref引用

12.1、什么是ref

什么是ref

12.2、使用ref引用DOM

实例

12.3、ref引用组件

ref引用组件实例

实例

12.4、this.newtTick(cb)

延时操作dom

13、购物车实例

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

14、动态组件

14.1、什么是的动态组件

什么是动态组件

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

实现动态组件渲染

14.3、keep-alive保持状态

keep-alive

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

对应周期函数

14.5、keep-alive — include

置顶谁被缓存

14.6、keep-alive — exclude

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

15、插槽

15.1、什么是插槽

什么是插槽

示例代码

<Left>
  <!-- 默认情况下，在使用组件的时候，提供的内容都会被填充到名字为
   default 的插槽之中 -->
   <!-- 1.如果要把内容填充到置顶名称的插槽中，需要使用 v-slot：这个指令 -->
   <!-- 2.v-slot：后面按要跟上插槽的名字 -->
   <!-- 3.v-slot: 指令不能直接用在元素身上，必须用在ttemplate标签上 -->
   <!-- 4.template 这个标签，他是一个虚拟的婊气啊俺，只起到包裹性质的作用，但是不会被渲染为任何实质性的html标签 -->
   <!-- v-slot简写为 # -->
  <template #default>
    <p>这是在Left区域的内容</p>
  </template>
</Left>

15.2、后备内容

后备内容

15.3、自定义插槽

自定义插槽

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

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

16、自定义指令

16.1、什么是自定义指令

什么是自定义指令

16.2、自定义指令的分类

自定义指令的分类

16.3、私有自定义指令

声明自定义指令

16.4、bind函数

bind函数

16.5、update函数

update函数

示例

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

16.6、函数简写

函数简写

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

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

Vue.config.productionTip = true

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

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