# 0310vuebase

**Repository Path**: newsegmentfault/vuebase-0310

## Basic Information

- **Project Name**: 0310vuebase
- **Description**: 这是一个讲解vue基础的项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2022-07-18
- **Last Updated**: 2022-08-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

0310vuebase内容

接下来vue这段的课程由我来给大家带
vue2 基础
vue2 前台项目
vue3 基础
vue3 后台管理项目

强调两个点:
问: 有不会的一定要问
练: 一个知识点,你会了,你熟悉,你精通这是三个不同的层次
    下去一定要多练习,多敲一敲,把代码量堆起来

关于环境:
下载插件:
1. vscode的插件: vetur、Search node_modules
2. chrome插件: vue-devtools

代码会托管到git平台,以后下载代码可以直接git clone地址即可
0310vuebase:
地址: https://gitee.com/newsegmentfault/vuebase-0310
clone地址: https://gitee.com/newsegmentfault/vuebase-0310.git
componentvue-0310:
https://gitee.com/newsegmentfault/componentvue-0310
https://gitee.com/newsegmentfault/componentvue-0310.git

关于视频:
每天上传到QQ群中下载即可,在课程的最后,会统一上传到百度云


## day01

### 介绍了vue
尤雨溪
在vue中,数据为尊,使用的是数据去驱动页面

### vue的基本使用
1. 引入vue.js文件
2. 书写挂载点
    `<div id="#app"></div>`
3. 创建vue实例,与挂载点关联
    ```js
        new Vue({
        })
    ```
4. 书写配置项
    ```js
        new Vue({
            el: '#app',
            data: {
                msg: "我爱你高圆圆"
            }
        })
    ```
5. 书写模板中内容(挂载点内容)
    ```html
        <div id="#app">
            <p>{{ msg }}</p>
        </div>
    ```
#### 基本使用配置项说明
* el: 关联vue实例与DOM元素,可以写选择器,可以写DOM元素(一般不使用DOM元素)
* data: 数据,所有vue中使用的数据都配置在data当中(data是一个对象,对象下去配置属性)
#### 注意点
* 当页面有多个挂载点的时候,vue实例的el配置,只会找到第一个挂载点
* 当有多个vue实例挂载同一个挂载点的时候,第一个vue实例会起作用

### 插值语法和指令语法
#### 插值语法
    `{{}}`在花括号中书写内容,里面可以写数据和表达式

```html
{{ msg }}
```

#### 指令语法

```html
v-
以`v-`开头都是vue指令,vue指令有很多
v-html 给标签设置内容,写法如下

<div v-html="msg"></div>
这里的双引号将不再是字符串,理解成分隔符
在分隔符里面写数据或表达式
```

### v-html 和 v-bind
* v-html 给元素设置内容,将内容解析成html渲染
* v-bind 是给元素绑定属性使用的,绑定属性的时候需要告诉元素绑定的是什么属性,例如:
```html
<a v-bind:href="url">url是数据</a>
<!-- 简写 -->
<a :href="url">url是数据</a>
```

### v-on 和 methods
* v-on 是vue的一个指令,给元素绑定事件的,绑定什么事件需要告诉元素
* methods 是创建vue实例的一个配置项,所有vue中用到的方法都配置在 methods 中

```html
    <div id="app">
        <button v-on:click="clickHandle">按钮</button>
        <!-- 简写 -->
        <button @click="clickHandle">按钮</button>
        <!-- 注意点 -->
        <button @click="test">按钮</button>
    <div>
    <script>
        new Vue({
            el: '#app',
            data: {
                test: () => {} // 可以被绑定事件
            },
            methods: {
                clickHandle() {
                    console.log('出发了按钮点击事件');
                }
            }
        })
    </script>
```

> 注意点: 在给元素绑定事件的时候,一般情况下绑定的都是methods中配置的方法
> 也可以绑定数据中的函数数据,但是一般不会这么操作,因为数据是可变的,后期有可能这个函数数据会变成其他数据类型
> 这样的话会引发报错

### vue 中this指向的问题
#### js中this的指向总共有7种
* test()  --  this指向window(test是一个方法)
* obj.test() -- this指向obj(obj是个对象,test是obj下的一个属性(方法))
* new Test() -- 构造函数中 this永远指向即将创建出的实例
* btn.onclick = function() {}  -- 事件中this永远指向事件源
* call、apply和bind -- this被call、apply、bind方法改变了this指向
* let fn = () => {} -- 箭头函数中this指向永远指向上一层作用域的this
* 在vue当中,this永远指向当前vue实例(就是new出来的vue实例)

#### 模板中和vue实例中this都指向的是new出来的vue实例


### 单项数据绑定 和 双向数据绑定
当数据发生改变的时候,页面中的内容就发生改变,叫做单项数据绑定
单项数据绑定在这里使用的是 v-bind 指令

当数据发生改变,页面变化,且页面修改内容数据也跟着变化,叫做双向数据绑定
双向数据绑定使用的是 v-model 指令

v-model指令我们一般用于[表单元素] 和 组件(后面说), 其他标签都不能使用v-model指令
v-model:value="" 作用与表单元素的value属性,在这里我们一般可以省略value属性
v-model="message"

### Object.defineProperty()
Object.defineProperty
功能:
        给对象添加属性用的
参数:
        参数一: 要添加属性的对象
        参数二: 要添加的属性
        参数三: 添加的这个属性的配置对象
返回值:
        当前对象
```js
let obj = {
    firstName: "li",
    lastName: "si"
}

Object.defineProperty(obj, 'fullname', {
    // value: 'xxx', // 配置 fullname 这个属性的值
    // configurable: true, // 这个属性是否可重新定义(可删除)
    // enumerable: true, // 这个属性是否可枚举(遍历)
    // writable: false, // 这个值是否可修改
    // 我们研究的是get和set
    // 当获取当前配置的这个属性的时候,会走get方法
    // 获取到的值是这个方法的返回值,在这个方法中this是当前的这个对象
    get() {
        // console.log(this);
        return this.firstName + '-' + this.lastName;
    },
    // 当设置当前的这个属性的时候,会走set方法
    // 且设置的值会当成形参传进来
    set(val) {
        console.log(val);
        var valArr = val.split('-'); // ['zhao', 'si']
        this.firstName = valArr[0];
        this.lastName = valArr[1];
        console.log(this)
    }
})
```

> 在vue中数据代理、数据劫持(还没讲)、计算属性(没讲呢)这些底层上都是用的是 Object.defineProperty()


### computed 和 watch
计算属性简写 和 方法 看着很像,他俩有啥区别?
计算属性,只要计算出这个属性的值之后,只要这个属性依赖的数据不发生变化,那么计算属性只走一次
方法是一个函数,调用几次走几次

计算属性
相当于是自身没有,根据自身其他数据计算出来的属性(两种书写方式,一种对象,一种函数)
watch监听
相当于对自身已有数据进行监听,当自身已有数据发生变化的时候,此时会走监听函数


### methods 和 computed 和 watch 的区别
* methods 和 computed
    methods是方法,使用一次就会调用一次,没有缓存
    computed是属性,这个属性是计算出来的(相当于依赖自身其他属性计算出来的),计算出来之后会把结果缓存上,只要依赖的数据不发生变化,计算属性就一直使用缓存的那个值
* computed 和 watch区别
    computed 是计算属性,相当于自身没有,通过计算得出的
        computed中不能有异步
    watch 是监视/监听,对已存在数据的监视和监听,当监视的数据发生改变的时候,进行一些列操作,
        watch中是有异步的


## day02

### 回顾前一天
第二天这个文件总结很详细,详情见 回顾前一天.html
同时再次强调了 computed 和 watch


### 条件渲染
指令:
* v-if、v-else-if、v-else
    * v-if 系列指令绑定的标签中间不能写其他标签
    * v-if 条件成立渲染DOM,不成立不渲染DOM
* v-show
    条件成立不成立都渲染DOM,显示和隐藏通过`css`的`display:none;`属性来控制的

```html
    <p v-if="type == 0">0000</p>
    <p v-else-if="type == 1">1111</p>
    <p v-else-if="type == 2">2222</p>
    <p v-else>3333</p>

    <p v-show="isSuccess">成功</p>
    <p v-show="!isSuccess">失败</p>

    <script>
        new Vue({
            data: {
                type: 1, // type总共有4中情况  0、1、2、其他
                isSuccess: true // 两种情况 true / false
            }
        })
    </script>
```

> `v-if` 和 `v-show` 的使用场景
> 当条件不是频繁变化的时候,推荐使用v-if
> 当条件频繁发生改变的时候,推荐使用v-show


### 列表渲染
指令:
v-for
    有点像js中的for...in,需要注意的是,循环展示的时候,需要给标签绑定一个key

可以使用in
`<li v-for="(item, index) in persons"></li>`
也可以使用of
`<li v-for="(item, index) of persons"></li>`

* 数组的遍历
```html
    <ul>
        <li v-for="(item, index) in persons" :key="item.id">
            {{ index }} -- {{ item.id }} -- {{ item.name }} -- {{ item.age }}
        </li>
    </ul>
    <script>
        new Vue({
            el: '#app',
            data: {
                persons: [
                    { id: 1001, name: 'gaoyuanyuan', age: 21 },
                    { id: 1002, name: 'yangmi', age: 28 },
                    { id: 1003, name: 'dilireba', age: 24 },
                    { id: 1004, name: 'maerzhaha', age: 18 },
                ],
            }
        })
    </script>
```

* 对象的遍历
```html
    <ul>
        <li v-for="(item, keyVal) in obj" :key="keyVal">
            {{ keyVal }} -- {{ item }}
        </li>
    </ul>
    <script>
        new Vue({
            el: '#app',
            data: {
                obj: {
                    name: "张三",
                    age: 30,
                    height: 175,
                    weight: 140
                }
            }
        })
    </script>
```

### 列表过滤、列表排序 - 目的:主要是为了体验 computed 和 watch 的差异


### vue中对象和数组的响应式
* vue中的数据,所有的对象都是响应式的,不管嵌套基层数据,都被 Object.defineProperty() 方法将数据改成了响应式的

* vue中的数据,所有的数组不是响应式的,Object.defineProperty()方法是给对象用的
    那么在修改数组的时候,需要注意,vue有时候会监视不到数组的变化
    * 什么时候?
    直接重新设置数组某个成员的时候,例如:
    ```js
        this.persons[0] = { id: 1001, name: 'jingdong', age: 21 };
    ```
    * 如何解决?
    vue重写了修改数组的一些方法,使用这些方法即可:
    ```js
        push()
        pop()
        shift()
        unshift()
        splice()
        sort()
        reverse()
    ```

### 绑定 class 和 style
#### class
```html
1. 绑定某一个类名
<div class="default" :class="myClass"><div>
2. 数组形式
<div class="default" :class="[myClass, myClass2]"><div>
3.对象形式
<div class="default" :class="{ box1: true, box2: isB }"><div>

<script>
    new Vue({
        el: "#app",
        data: {
            myClass: 'box1', // 假设后端给的数据类名
            myClass2: 'box2',

            isB: false,

            wh: '200px'
        }
    })
</script>
```
#### style
```html
    <div :style="{
        width: '100px',
        height: '100px,
        backgroundColor: 'red',
        'text-align': 'center',
        lineHeight: wh
    }"></div>

    <script>
        new Vue({
            el: "#app",
            data: {
                wh: '100px'
            }
        })
    </script>
```

### 事件深入
1. 事件不传参
```html
    <div @click="clickHandler"><div>
```
2. 事件传参
```html
    <div @click="clickHandler(9527)"><div>
```
3. 既要传参,又要事件对象
    * 这里的 $event 固定写法,这里和参数没有顺序
```html
    <div @click="clickHandler($event, 9527)"><div>
```
4. 事件修饰符
```html
    修饰符写法:
    <div @click.stop="clickHandler">

    .stop        阻止冒泡
    .prevent     阻止默认行为

    .capture    将事件触发改成捕获形式
    .self       绑定在外层元素上来阻止冒泡的
    .once       事件值触发一次
    .passive    滚轮事件修饰符,加了该修饰符,先滚动页面,再执行滚动的回调

    键盘的
    .enter      回车按键
    .13         回车按键

```

## day03

### 模板中绑定事件 - 深入说明
```html
<!-- 这里的test底层上执行的就是methods中配置的test方法 -->
<button @click="test">按钮1</button>
<!-- 这里的test底层上执行的就是methods中配置的test方法 -->
<button @click="this.test">按钮2</button>

<!-- 
    这里v-on绑定的事件在底层上实际是套了一层函数的
    并且套的这层函数的形参是$event,并且我们这里使用的 $event 就是套的那层函数的形参
-->
<button @click="test($event)">按钮2</button>

<button @click="test($event, n)">按钮3</button>

<!--
    这个报错,为什么?
    因为此时底层上套的这层函数执行的时候,this指向的是window,
    而这里的this就是套那层函数的this
-->
<button @click="this.test($event, n)">按钮3</button>
```
* 结论:
* 在模板中绑定事件的时候:
* 没有加小括号,此时底层执行就是执行的methods中配置的方法
* 如果加了小括号,就是自己在调用,此时底层会套一层函数
    * 那么如果此时有this,this的指向会发生改变(因为套的那层函数是全局调用的)
        * 这个this在非严格模式下指向window
        * 在严格模式下是undefined,会报错
* 所以:
* 之后在模板中写代码的时候,尽量不要加 this

### 收集表单数据
收集表单数据包含所有的表单元素,input的type类型来决定:
text、password、radio、checkbox、selecte-option、
textarea
收集数据使用v-model指令来时候
* 注意: 
* radio 收集的时候,需要使用name属性将选择的选项绑定成一组,最终选择的是一个值
* checkbox
    * 当是一组checkbox的时候,绑定获取的数据是一个数组
    * 当是单独一个checkbox的时候,绑定获取的数据是一个值
    收集完数据要做的事情:
1. 整理数据
2. 校验数据
3. 发送请求

### vue内置指令
* v-text
* v-html
* v-show
* v-if
* v-else
* v-else-if
* v-for
* v-on
* v-bind
* v-model
* v-slot
* v-pre
* v-cloak
* v-once

问题:
v-if 和 v-for可以一起使用吗?
可以的
v-if 和 v-for 这两个指令哪一个优先级高?
v-for 的优先级高

### 过渡和动画
步骤:
1. 将过渡的内容放到 transition 标签中
2. 书写类名
    * v-enter、v-enter-to、v-enter-active
    * v-leave、v-leave-to、v-leave-active
    * 三个类名对应是起始状态、结束状态、中间过渡状态,一般会在 -active 中添加 transition css属性 或者 animation css动画
3. 使用数据来控制元素改变

> 注意: 当页面中有多个过渡元素的时候,需要给 transtion 标签设置[name属性值],
> 类名将变成 v-[name属性值]

### 生命周期
| 生命周期钩子  | 说明                                       |
| ------------- | ------------------------------------------ |
| beforeCreate  | 创建前,可以获取到this,获取不到数据和方法   |
| created       | 创建后,可以获取到this,可以获取到数据和方法 |
| beforeMount   | 挂在前,获取不到DOM元素                     |
| mounted       | 挂在后,可以获取到DOM元素                   |
| beforeUpdate  | 更新前,数据已经更新,DOM没有更新            |
| updated       | 更新后,数据已经更新,DOM更新                |
| beforeDestroy | 销毁前,watch,事件监听,DOM元素都在          |
| destroyed     | 销毁后,watch,事件监听,DOM元素都不在        |

### 自定义过滤器
步骤:
1. 写过滤器名称
2. 写过滤器处理函数
```html
    <p>{{ num | addTen }}<p>
    <p>{{ num | subTen }}<p>

    <script>
        // 全局注册
        Vue.filter('addTen', (val) => {
            return val + 10;
        })

        new Vue({
            el: '#app',
            // ...
            // 局部注册
            filters: {
                subTen(val) {
                    return val - 10;
                }
            }
        })
    </script>
```
例子:
格式化事件的过滤器


## day04
### 自定义指令

步骤:

1. 指令名称
2. 回调函数
```html


<div id="app">
	<p v-upper="msg"><p>
    <p v-upper="lower"><p>
</div>
<script>
    // 全局定义指令
    // 参数一: 指令名称
    // 参数二: 回调函数
    //			回调有4个参数
    //     		参数一 当前指令绑定的元素
    //			参数二 绑定的一些相关信息
    //  		参数三 新的虚拟节点
    //   		参数四 老的虚拟节点
	Vue.directive('upper', (el, binding, vnode, oldvnode) => {
        el.innerText = binding.value.toUpperCase();
    })
    
    new Vue({
        ...
        // 局部定义指令
        directives: {
            // 属性名指令名称
            // 属性值回调函数
            lower: (el, binding, vnode, oldvnode) => {
                el.innerText = binding.value.toLowerCase();
            }
        }
    })
    
    // 这里定义指令第二个参数是函数的形式是简写,这个函数会在 bind(初始化) 和 update(数据更新)的时候去执行
    // 全写的形式下,参数二是一个配置对象,可以配置5个钩子
    Vue.directive('upper', {
        // 初始化
        bind(el, binding, vnode, oldvnode) {},
        // 被绑定元素插入父节点
        inserted(el, binding, vnode, oldvnode) {},
        // 所有组件vnode更新时
        update(el, binding, vnode, oldvnode) {},
        // 所有组件vnode更新完
        componentUpdated(el, binding, vnode, oldvnode) {},
        // 指令解绑
        // 注意: 当前实例销毁的时候(vm.$destroy()),指令才会解绑
        unbind(el, binding, vnode, oldvnode) {}
    })
    
</script>

```



### 自定义插件

1. 定义插件
2. 使用插件

```js
// 定义插件: 插件必须有 install方法
let plugin = {}
plugin.install = () => {}
// 使用插件
// 注意:Vue.use()本质上是在调用插件的install方法
Vue.use(plugin)
```



### 自定义组件之非单文件组件

步骤:

1. 定义组件

   Vue.extend({}) 参数是一个配置对象,这个配置对象和`new Vue()`时候的配置对象一摸一样,唯独不一样的地方是这个配置对象中没有el这个配置项,返回值是一个组件的构造函数

2. 注册组件

   * 全局注册

     Vue.component('组件名', 组件构造函数)

   * 局部注册

     ```js
     new Vue({
         ...
         // 局部注册
         components: {
             组件名: 组件的构造函数
         }
     })
     ```

   * 全局注册在哪都能用,局部注册只能在当前实例中使用

3. 使用组件

   ```html
   <div id="app">
   	<!-- 使用组件 -->
       <组件名></组件名>
   </div>
   ```

> 注意: 组件注册有简写, Vue.componet('组件名', 配置对象),相当于步骤1和步骤2合并了,定义并注册



### 自定义组件之单文件组件

一个`.vue`文件就是一个组件,步骤也是三步:

1. 定义组件: 定义一个`xxx.vue`文件即可

   ```vue
   <template>
   	<div>
           模板中要有一个跟节点
       </div>
   </template>
   <script>
   export default {
       // 组件中data配置想必须使用函数的形式
       data() {
           return {
               count: 0
           }
       },
       methods: {}
   }
   </script>
   <style></style>
   ```

2. 注册组件

   ```js
   import xxx from './components/xxx.vue'
   
   new Vue({
   	components: {
           xxx
       }
   })
   ```

3. 使用组件

   ```html
   <div id="app">
   	<xxx></xxx>
   </div>
   ```

> 注意: 在传统引入vue.js的形式中,不能使用单文件组件,需要上脚手架工具
>
> 1. js中不支持ES6的语法
> 2. 不识别.vue文件




### 脚手架 - 创建项目

1. 打开cmd命令行窗口

2. 安装`vuecli`脚手架工具
    npm install -g @vue/cli
    如果觉得慢,使用cnpm安装
    cnpm install -g @vue/cli
    
3. 验证安装成功,cmd窗口中输入以下内容
    `vue -V`
    如果出现版本号,代表脚手架的版本号,脚手架安装成功
    
4. 跳转到桌面,创建一个vue项目
    cd Desktop
    vue create vue-demo
    注意:项目的名称不能有中文

    ![image-20220722142236325](assets/image-20220722142236325.png)

    第一项: 创建vue3项目

    第二项: 创建vue2项目

    第三项: 创建自定义配置项目

    我们目前选择vue项目,使用上下按钮键选中,然后回车

5. 使用vscode打开项目,直接新建vscode窗口,把桌面上刚刚创建的项目拖进来即可

    为了让vscode打开的就当前这一个项目
    
    ![image-20220722142846237](assets/image-20220722142846237.png)
    
    注意,需要跳转到 vue-demo 目录下,再执行`npm run serve`启动项目



### 项目的目录介绍

![image-20220723090855688](assets/image-20220723090855688.png)

node_modules 依赖包

public 静态资源

​	favicon.ico  浏览器页签上的图标

​	index.html  我们启动的项目打开的页面就是这个页面

src 所有我们写的代码都放在src这个目录中

​	main.js  入口文件

​	App.vue

​	components 文件夹放组件

​	assets 静态资源

.gitugnore  配置git忽略文件

babel.config.js  babel的配置文件

jsconfig.json  js相关的配置

package-lock.json  当前项目的依赖包的依赖包信息

package.json  管理当前项目依赖、运行指令等

vue.config.js  可以配置一些webpack的配置项



> public 和 assets 的区别?
>
> public 中的内容在打包的时候,不会经过webpack处理
>
> assets 中的内容,会在打包的时候进行处理,压缩、文件名被修改等





### eslint 语法检查 - 关闭

var一个变量不使用,eslint会检测到这个变量,并且会报一个错误,如何解决:

1. 单文件禁用ellist

   在代码开始处输入以下注释即可

   ```js
   /* eslint-disable no-unused-vars */
   ```

   > 缺点: 只能在这一个文件中禁用eslint, 不推荐

2. 在eslint配置`rules`的地方,配置规则

   ![image-20220722151227347](assets/image-20220722151227347.png)

   > 注意: 修改配置文件之后,需要重启项目才可生效
   >
   > ellint规则地址: https://eslint.bootcss.com/docs/rules/

3.  在`vue.config.js`中配置禁用eslint

   ```js
   const { defineConfig } = require('@vue/cli-service')
   module.exports = defineConfig({
     transpileDependencies: true,
     // 关闭eslint校验
     lintOnSave: false
   })
   ```

   > 这里也修改了配置文件,需要重启才可生效

   

### vue渲染的两种方式

1. 不带模板编译器的渲染(官方默认)

   ```js
   import Vue from 'vue' // 不含模板编译器的vue
   import App from './App.vue'
   
   Vue.config.productionTip = false
   
   new Vue({
     render: h => h(App),
   }).$mount('#app')
   ```

2. 带有模板编译器的渲染(我们学习)

   ```js
   import Vue from 'vue/dist/vue.js' // 包含模板编译器的vue
   import App from './App.vue'
   new Vue({
       el: "#app",
       data: {},
       components: {
           // 注册
           App
       },
       // 第二种写法
       template: '<App />'
   })
   ```

* 两种渲染模式差异 - 文件不同

![vue的两种渲染方式](assets/vue的两种渲染方式.png)

* 页面加载不同

![两种渲染模式的差异](assets/两种渲染模式的差异.png)



* search node_modules 使用

  1. 必须有保证vscode打开项目是一个项目

  2. `ctrl + p`打开全局下拉框: 输入 `>  空格  search` 找到 search node_modules ,回车

     此时所出的位置

     ![image-20220722153200370](assets/image-20220722153200370.png)

  3. 接下来就可以搜索当前项目的依赖包

     > 如果熟练使用 search node_modules 是比手动在node_modules文件夹中找依赖包要快