# vuedemo202204

**Repository Path**: driftfloat/vuedemo202204

## Basic Information

- **Project Name**: vuedemo202204
- **Description**: vuedemo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2022-10-30
- **Last Updated**: 2022-10-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue

## 本地构建

1. 运行命令

   ~~~shell
   npm  init vue@latest
   ~~~

   按照步骤一路默认创建

2. 安装依赖

   ~~~shell
   npm i
   ~~~

3. 运行

   ~~~shell
   npm run dev
   ~~~

   

## 非本地构建

~~~html
<script src="https://unpkg.com/vue@3"></script>
<!--这是一个模板  用来显示vue实例的-->
     <div id="root">
           {{msg}}
     </div>
    
    <script>
        //从Vue对象中解析属性createApp 用来创建Vue实例
        const {createApp}=Vue;

        const app=createApp({
            //配置响应式对象 
            data:function(){
                //返回一个普通对象  由vue包装成响应式对象   
                return {
                  //定义对象的属性 
                  msg:"hello vue!"
                }
            }
        });

        //说明该vue实例在哪里显示  挂载到哪里 
       // app.mount("div");
       app.mount("#root");

    </script>
~~~





## Vue渲染模板

* 挂载容器内的innerHTML  (没有template和render选项)
* template  如果有这个选项，它会替换 容器内的innerHTML
* render 渲染函数  它的优先级最高 



## Vue实例属性 

* 以$开头      在定义响应式对象属性时，属性名避免使用$开头  

* 访问根组件的属性或方法时

  > 方式 一通过实例对象 
  >
  > app.$data.msg
  >
  > app.msg  
  >
  > 方式二 
  >
  > 在组件对象内，可以通过this来访问
  >
  > this.$data.msg
  >
  > this.msg  

## 内置属性

以 _ 开头 是内置属性 ， 在定义响应式对象属性时，属性名避免使用_开头 



## 属性绑定

*  v-bind:属性名="响应对象属性||计算属性"

* 简化   :属性名="响应对象属性||计算属性"  (开发常用 )

  > 如果v-bind绑定的是一个对象，则不能使用简化形式 

## 布尔属性

* disabled  可用/不可用
* hidden   隐藏/不隐藏 

  如果绑定的值是true 或  ""    ，具有该属性 ，否则没有该属性 

## 计算属性

在{{}} 使用表达式，建议使用简单表达式

对于复杂的逻辑表达式，建议使用计算属性 

选项：

## computed

* 默认的是只读的  

* 属性名是字符串 ，类型可以是函数和对象 

  > 1. 函数
  >
  >    属性名:function(){}   直接返回一个新的值 
  >
  > 2. 对象 
  >
  >    属性名:{
  >
  >       //只读的 返回值 
  >
  >    ​    get:function(){},
  >
  >       //可写的，但更改的仍然是响应式对象的属性   v是新值 
  >
  >       set:function(v){}
  >
  >    }

## 绑定事件

* v-on:事件名称  ="方法||表达式"
* @事件名称="方法||表达式"

  

  事件方法传值：

* 只传递方法名    适合方法没有参数的情况  

  > 如果方法定义时有参数，则该参数是  一个事件对象 

* 调用方法    方法名()  适合有参数的情况  

  > 如果方法定义时有参数,调用时无参，参数值是undefined 

事件冒泡

事件捕获



## 样式绑定

### class绑定

1. 三元表达式 

   ~~~html
   <span :class="num>0?'enable':'disable'"  @click="num--">-</span>
   <span :class="[num>0?'enable':'disable']"  @click="num--">-</span>
   ~~~

2. 绑定对象 

   :class="{样式名称:布尔表达式}"  只有布尔表达式为true才会有该样式 

   ~~~html
   <span :class="{enable:num>0 , disable:num==0}"  @click="num--">-</span>
   ~~~

3. 绑定数组 

   :class=[]

### 内联style绑定

~~~html
   <!--正常样式定义 -->
<span style="width: 200px;height:100px;display:inline-block;background:#f00">内联样式</span
        <!--绑定对象   -->
<span :style="{width:w ,height:h+'px',background:'#f00',display:'inline-block'}">内联样式</span>
        <!----直接传递对象 -->
<span :style="obj">内联直接传递对象</span>
~~~

绑定数组，可以传递多个对象



## 条件渲染



v-if与v-show区别

* v-if是创建和销毁，有很高的切换开销，如果初始条件不成立，代码不会创建
* v-show不管条件是否成立，都会创建，有很高的初始渲染开销
* 如果需要频繁切换，则使用 `v-show` 较好；如果在运行时绑定条件很少改变，则 `v-if` 会更合适

## 列表渲染

### 遍历数组

* 一个参数 

  item in items      item 是变量名，items是数组 

* 二个参数

  (item,index) in items    item 是变量名，index是索引，items是数组 

### 遍历范围

​    item in number        item 是变量名,number是一个整数，用来循环number次 

### 遍历对象 

* 一个参数

  v in obj    v是对象属性的值，obj要遍历的对象 

* 二个参数

  （v,n） in obj    v是对象属性的值，n是对象的属性名，obj要遍历的对象 

* 三个参数
   （v,n,index）in obj   v是对象属性的值，n是对象的属性名，index是索引，obj要遍历的对象 

注意：v-for与v-if不要一起使用 



## 表单绑定

使用v-model指令实现双向绑定

表单： 文本框  textarea   select  checkbox radio  

 注意：

* 复选框

  > 1. 一个复选框，v-model绑定一个布尔值，为真选中，否则不选中
  > 2. 多个复选框，v-model绑定一个数组，（数组里有值则为默认值，对应的复选框选 中）

* select

  > 1. 单选    v-model绑定一个变量 
  > 2. 多选   v-model绑定一个数组 



## 生命周期函数

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



## 侦听器

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



## 组件

### vue代码片段

vscode vue代码片段定义:

~~~javascript
{
	"vue template":{
		"scope": "vue",
		"prefix": "vue",
		 "body":[
			"<!--vue模板-->",
			"<template>",
			"",
			"</template>",
			"",
			"<!--vue 组件选项定义-->",
			"<script>",
			"   export default{",
			"       data(){",
			"         return {",
			"",
			"         }",
			"       }",
			"   }",
			"</script>",
			"",
			"<!--vue样式 scoped当前样式只适用于当前组件-->",
			"<style scoped>",
			"",
			"</style>"
		 ]
	}
}
~~~



### 组件注册

#### 全局注册

~~~vue
app.component("组件名"，组件)
~~~

全局注册的组件，在整个应用中都可以使用

#### 局部注册

通过选项:components:{}  注册

~~~javascript
  import CarItem from '@/components/CarItem.vue'
  export default {
    //组件的局部注册
    components: { 
      CarItem   //简写  ===   "CarItem":CarItem   驼峰命名法 组件引用时可以使用驼峰名称也可以使用对应的短横线命名
      //"car-item":CarItem  //只能使用短横线命名
     }
}
~~~

#### 组件名称

* 驼峰命名法 所有单词首字母大写  组件引用时可以使用驼峰名称也可以使用对应的短横线命名,如

  ~~~html
  <CarItem></CarItem>
  <car-item></car-item>
  ~~~

* 短横线命名法    如  "car-item":组件 ，引用时只能使用<car-item></car-item>

### Props属性 (父组件给子组件传值)

定义属性有两种方式:

* 字符串数组

  ~~~javascript
  props:["属性名"...]
  ~~~

  通过数组指明多个属性，这种方式过于简单 ，在开发中推荐使用对象形式

* 对象形式

  ~~~javascript
  props:{
      属性名:{
            type?: PropType<T>
            required?: boolean
            default?: T | ((rawProps: object) => T)
            validator?: (value: unknown) => boolean
      }
  }
  ~~~

  > 1. type 数据类型 
  >
  >    可以是下列原生构造函数之一：`String`、`Number`、`Boolean`、`Array`、`Object`、`Date`、`Function`、`Symbol`、任何自定义构造函数，或由上述内容组成的数组。
  >
  > 2. **`required`**：定义该 prop 是否必需传入
  >
  > 3. default默认值 
  >
  >    * 为该 prop 指定一个当其没有被传入或值为 `undefined` 时的默认值。
  >    * 对象或数组的默认值必须从一个工厂函数返回。工厂函数也接收原始 prop 对象作为参数。
  >
  > 4. validator  验证器，接收一个函数，该函数有一个参数指向属性值，返回false验证失败



### 事件(子组件给父组件传值)

* 父组件监听子组件事件  通过v-on或@ 自定义事件名

* 子组件触发事件并传值

  ~~~javascript
  $emit(event: string, ...args: any[]): void
  ~~~

  如

  ~~~javascript
    //在子组件中触发一个自定义的事件 
   this.$emit("close","张三",23,"13555555");
  ~~~

  父组件接收：

  ~~~javascript
   <save-user :visible="ishow" @close="closeUser"></save-user>
  .....
   closeUser(name,age,mobile){
             console.log("父组件收到值:",name,age,mobile);
             //隐藏保存用户组件 
             this.ishow=false;
    }
  ~~~

  

### 透传属性

   如果在子组件中定义了一个单根元素，那么给子组件传递的未通过props定义的属性时，默认会将属性添加到根元素上，这就是透传。

  透传属性常用的有class  style  id   

  如果想禁用属性继承，既不想让未定义的属性添加到单根元素上，可以禁用inheritAttrs:false  ，禁用后的属性只能通过实例属性$attrs来访问



### 插槽

   插槽是在子组件中获得  由子组件包裹的内容 ，如下

  ~~~html
  <hello>你好，张三</hello>
  ~~~

将 “你好，张三” 显示在hello组件内：

~~~html
<!--vue模板-->
<template>
    <div>
       <!--插槽 可以将slot看成占位符 变量  它代表着组件中间的内容 "你好，张三" -->
        <slot></slot>
    </div>
</template>
~~~

注：

* 插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的

* 插槽 <slot>默认值</slot> 可以提供默认值，如果没有插槽内容显示默认的

* 插槽 <slot name="插槽名字"></slot> 可以指定名字，默认为default 

* 给指定名称的插槽传递插槽内容时，可以通过<template v-slot:插槽名字>插槽内容</template>

* v-slot可以简化为#，既<template #插槽名字>插槽内容</template>

* 插槽内容中默认无法访问子组件中的数据作用域

* 可以给插槽定义属性，接收数据，然后在插槽内访问，如

  ~~~html
  <slot  :属性名="data||props||..."></slot>
  ~~~

  访问：

  ~~~html
  <!--object是自定义的任意对象名称，该对象是包含了所有在slot上定义的属性及值-->
  <template v-slot="object">
      <!--通过自定义的object访问插槽属性-->
      {{object.slot属性名}}  
  </template>
  ~~~

  或者使用解构赋值：

  ~~~html
  <template v-slot="{slot属性名}">
      {{slot属性名}}  
  </template>
  ~~~

* 具名插槽属性访问时

  ~~~html
  <!--object是自定义的任意对象名称，该对象是包含了所有在slot上定义的属性及值-->
  <template v-slot:插槽名称="object">
      <!--通过自定义的object访问插槽属性-->
      {{object.slot属性名}}  
  </template>
  ~~~

  或者

  ~~~html
  <template #插槽名称="object">
      <!--通过自定义的object访问插槽属性-->
      {{object.slot属性名}}  
  </template>
  ~~~

  注：同样上面的object,可以换成{slot属性名}。



### 依赖注入

​    在父组件中，通过provide选项，配置要传递给后代子孙的属性，如

~~~json
provide:{
    "host":"http://localhost:8080"
}
~~~

在后代子组件中，需要该属性的，可以通过inject注入，如

~~~json
inject:["host"]  //通过数组的形式注入
~~~

或者

~~~json
inject:{
    属性名:{   //属性名自定义  代表host在当前组件的别名
        from:"host",  //来自哪个provide属性
        default:""  //如果注入的属性不存在或undefined 时，默认值
    }
}
~~~

注：  inject注入时在data响应状太解析之前，所以可以在响应状态对象中直接访问注入属性

 

### 插件

插件是在vue上增加全局功能 （属性、方法等）,可以通过

app.use(plugin,参数); 来安装插件，plugin可以是install函数或者包含install函数的对象，在该函数中接收多个参数，第一个代表vue实例，如增加全局属性$host,实现如下：

~~~javascript
let myplugin={
            //instance vue实例 
            install:function(instance){
               instance.config.globalProperties.$host="http://localhost:8080";
               instance.config.globalProperties.$test=function(){
                console.log("-------插件方法");
               }
            }
        };

        //安装插件
        app.use(myplugin);
~~~



## Vue Router 路由

###   安装

~~~shell
npm install vue-router@4
~~~

### 配置路由

~~~javascript
//配置路由模板 
//引入路由
import {createRouter,createWebHashHistory} from 'vue-router'

//引入组件 
import Login from '@/views/common/Login.vue'

//配置路由信息
const routes=[
    {
        path:"/",
        component:Login
    }
];

//创建路由实例 
let router=createRouter({
    history: createWebHashHistory(),
    routes  //等同于  "routes":routes
});

export default router;
~~~



### 安装插件

~~~javascript
import { createApp } from 'vue'
//引入路由
import router from './router';
import App from './App.vue'
//创建vue组件 
const app=createApp(App);
//将路由实例安装到vue上
app.use(router);
//挂载 
app.mount("#app");
~~~

### 配置路由出口

在根组件上，增加如下

~~~html
<!--vue模板-->
<template>
    <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</template>
~~~



### 嵌套路由

  在一个组件中，定义了路由出口，同时定义了<router-link></router-link>  ,我们希望路由连接的内容显示到当前组件中，那么连接的路径路由必须配置到当前组件路由下，如：

~~~json
//配置路由信息
const routes=[
    {
        path:"/",
        component:Login
    },
    {
        path:"/main",  //工作区组件路由 
        component:Main,
        //配置嵌套路由
        children:[
            {
                path:"/user",  //用户列表显示在工作区组件 
                component:User
            }
        ]
    }

];
~~~



## Element UI 引入

> [官网地址](https://element-plus.gitee.io/zh-CN/)

### 安装

~~~shell
# NPM
$ npm install element-plus --save
~~~

### 完全引入

~~~javascript
import { createApp } from 'vue'
//引入elementui
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import App from './App.vue'

//创建vue组件 
const app=createApp(App);

//安装elementui
app.use(ElementPlus);

//挂载 
app.mount("#app");
~~~



# 参考

## VSCode自定义代码块

第一步：点击文件-首选项-用户代码片段

![img](assets/1620.png)

第二步：选择代码块作用域的文件类型

![img](assets/1620-16612361398431.png)

- **类型一：全局作用域** 这种类型的代码块是创建在vscode软件内部的文件。是跟随这当前安装的vscode这个软件的，不会随着项目的关闭而失效，会一直存在。
-  **类型二：文件夹作用域** 这种类型的代码块是创建在某个文件下.vscode这个隐藏文件夹中的，这个代码块只适用于当前文件夹，出了这个文件夹就不能使用这个代码块了
-  **类型三：特定文件类型作用域** 这种类型的代码块跟全局作用域的文件路径是一致的，都是创建在了vscode中，会一直存在。但是这种代码块只适合于你指定的文件类型。比如：如果你创建的是JavaScript类型，那这个代码块就不能再vue文件中使用。 **注意三种类型的代码块书写规范都是一致的**

第三步：代码块的书写

　　我们选择一种类型（我这里选择全局作用域类型），并且给这个文件起一个名字， 　　ps:名字随便起

![img](assets/1620-16612361398432.png)

 　我们需要在这对大括号中书写我们的代码块，这里系统给了我们一个例子Example下方就是一个例子。下方是我自己书写的一个代码块

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

　　所有的代码段都必须写在最外层大括号中，每个代码块之间用逗号隔开，一个代码块就类似一个对象。

　　上方代码就是简单写了两个代码块。 接下来介绍每个属性的作用及方法。 **`scope：`**作用文件类型。就是代码块的作用文件类型，这里我们可以指定文件类型，多种类型之间用逗号隔开，

　　比如如果指定作用范围类型"css, javascript" 那么这个代码块只能在这两种类型的文件中起作用。

　　如果值为空，或者是不写这个属性，默认所有类型文件都支持该代码块。

 **在特定文件类型中这个值是不起作用的，写了会报错，因为这种类型已经本身已经限制了文件类型** **`prefix：`** 触发代码块的字符串。写代码的时候我们只需敲出这个字符串就会触发我们的代码块。 **`body：`**代码块的主体内容。我们需要把我们的代码书写在这个属性中。仔细观察我们可以看出，代码块主体就是字符串的数组。 **`description：`**代码块的简单介绍，我们可以介绍一下这段代码块是干什么用的

　　**代码主体的书写规范：**

　　每个字符串元素就代表一行，行与行之间用 **`,`** 隔开表示换行。或者使用**`\n`**换行

　　行内不能使用tab键缩进，只能使用空格或者**`\t`**缩进

　　\1使用代码块敲击回车或者tab键后光标定位的位置。2 34...表示我们按下tab光标依次出现的位置

 **第四步：代码块的使用**

 使用代码块的方式非常简单，我们只需在想要书写的位置敲出触发我们代码块的关键字就行 **全局作用域的代码块：**

![img](assets/1620-16612361398434.png)

![img](assets/1620-16612361398435.png)