Vue基础知识点（一）

男娘i 2023-01-14 00:47 270阅读 0赞

# **1. Vue基础课程** #

## **1.****1** **Vue框架描述** ##

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的**渐进式框架**。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。**Vue** **的核心库只关注视图层**，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

**兼容性**：**Vue 不支持 IE8 及以下版本**，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

**开发者工具****:**在使用 Vue 时，我们推荐在你的浏览器上安装 **Vue Devtools**。它允许你在一个更友好的界面中审查和调试 Vue 应用。

### **1.1.1 安装Vue Devtools** ###

![20210419154826978.png][]

工具网址：[https://github.com/vuejs/vue-devtools\#vue-devtools][https_github.com_vuejs_vue-devtools_vue-devtools]

**安装步骤：**

1.  下载master主文件
2.  进入项目 cnpm i 加载项目依赖
3.  修改chrome文件 -- shells-- chrome--manifest.json-- “persistent”:true
4.  打包项目 cnpm run build
5.  打开浏览器的扩展程序 -- 加载模块 -- 加载chrome文件
6.  ![20210419154845433.png][]

### **1.1.2 Vue基本使用** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70][]

## **1.2** **创建项目** ##

### **1.2.1 Vue脚手架工具** ###

npm install -g @vue/cli  （安装脚手架）

### **1.2.2 创建项目：** ###

vue create my-project

1.  **第一步vue create 后会出现 至少3个选项，**

**第一个选项是默认安装**vue2,babel,eslint

**第二个选项是默认安装** vue3，babel,eslint

**第三个选项 (Manually select features) 自定义安装**

![20210419154916528.png][]

1.  **第二步，选择自定义安装**

第一个选项 vue的版本

** ****第二个 babel es5转码es6**

第三个 ts 先不选 typescript

第四个 PWA 渐进式网页应用

第五个 Router 路由

第六个 vuex 公共数据存储

第七个 css 预处理语言 (less,sass,stylus)

第八个 linter 代码监测

第九，十个 代码测试

![20210419154940849.png][]

**第三步:**选择vue的版本

![20210419155014725.png][]

**第四步：**

Babel，eslint 的配置文件要放在哪？

选项1： 生成独立的配置文件

选项2： 生成到package.json中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70 1][]

**第五步：**

是否保存当前配置

默认不保存

选y就是保存

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70 2][]

如果保存，会让定义一个名称

![20210419155033162.png][]

**第六步：安装**

![20210419155037745.png][]  
安装完成

![20210419155043490.png][]

### **1.2.3 目录结构：** ###

![20210419155058983.png][]

### **1.2.4 vue如何添加到页面中**   ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70 3][] ###

# **2****.**** Vue****基础语法** #

## **2****.1**** ****模板语法** ##

**Vue.js 使用了基于 HTML 的模板语法**，允许开发者声明式地将 **DOM 绑定至底层 Vue 实例的数据**。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，**Vue 将模板编译成虚拟 DOM 渲染函数**。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

vue基础语法
    
        1. 组件的格式
    
            vue中的组件一般由3部分组成，template(页面结构), 
    
            script(页面中的业务逻辑), style (当前页面的样式)
    
        
    
        2. 模板语法：
    
            语法：<div>{
       {单行表达式}}</div>
    
            注意：模板语法渲染的永远是一个字符串 
    
    
    
        3. 组件中定义变量
    
            变量属于js部分，需要在script标签内部来定义
    
            语法:
    
                export default {
    
                    name: 'App',
    
                    data(){
    
                        return {
    
                            a:2
    
                        }
    
                    }
    
                }
    
            使用变量：
    
                直接使用变量名
    
    4. 组件中定义函数
    
            语法：
    
                export default {
    
                    name: 'App',
    
                    methods:{   //定义方法的位置
    
                        fn(){
    
                            return 3
    
                        }
    
                    }
    
                }

**文本**：<span>Message:** \{ \{ msg \}\}**</span>，双花括号中，可以存在语法，**单行表达式**

**表达式**：必须有返回值，有结果的才叫表达式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70 5][]

## **2.2 指令介绍**  ##

指令
    
       指令：vue中定义好的一些以"v-"开头+具体的名称的属性，这些属性都有特定的功能。
    
            指令用法：<div v-xx:prevent.a='表达式'></div>
    
                     <div v-xx></div>  
    
                     <div v-xx='表达式'></div>
    
                     <div v-xx:yy> </div>
    
             注意：指令等号后是js执行环境，里面要写js表达式
    
            指令分：自定义指令和内置指令
    
                内置指令不需要引入，直接调用即可，每个内置指令都有自己的固定用法
    
                自定义指令就是用户自己定义的

**原始的HTML：**** **

<div** v-bind:id**="dynamicId"></div>

<p>Using** v-html** directive: <span v-html="rawHtml"></span></p>

## **2****.****3** **条件渲染** ##

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

语法：v-if/v-else-if/v-else

语法：<div v-if='count === 1'></div>
    
          <div v-else-if='count === 2'></div>   
    
          <div v-else></div>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70 6][]

因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果**想切换多个元素呢**？此时可以把一个 **<template> 元素当做不可见的包裹元**素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

<h1>Title</h1>

<p>Paragraph 1</p>

<p>Paragraph 2</p>

</template>

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样**：v-show**

<h1 v-show="ok">Hello!</h1>

**v-if**** /**** v-show****区别：**

**v-if 是“真正”的条件渲染**，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地**被销毁和重建**。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

**一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销**。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

## **2****.****4** **列表渲染** ##

我们可以用 **v-for 指令基于一个数组来渲染一个列表**。v-for 指令需要使用** item in items**** **形式的特殊语法，其中 **items 是源数据数组**，而 **item 则是被迭代的数组元素的别名**

在 v-for 块中，我们可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数，即当前项的索引

指令：v-for 
    
            语法：<div v-for='(item,key,index) in arr/obj'></div>
    
            用法1：遍历数组
    
                <div v-for='(item) in arr' v-bind:key='item'>{
       {item}}</div>
    
                <div v-for='(item,index) in arr'>{
       {item}}</div>
    
            用法2：遍历对象
    
                <div v-for='(item,key,index) in arr/obj'></div>
    
    
    
    [代码演示]

![2021041916290467.png][]

### **2.4.1 v-for 和v-if集合使用** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70 7][]

**循环列表**   但**列表内的数据是有前置条件的**

![20210419162930898.png][]

### **2.4.2 Vue中key属性的作用 （考点）** ###

**建议尽可能在使用 ****v-for**** 时提供 ****key**** attribute**，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

因为它是 Vue 识别节点的一个通用机制，key 并不仅与 v-for 特别关联。

**不要使用对象或数组**之类的非基本类型值作为 v-for 的 key。请用**字符串或数值类型的值**

**Vue中key属性的作用**

*  在列表渲染时使用key属性
 *  使用key属性强制替换元素

**官方文档中说：**

当 Vue.js 用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

**key的作用主要是为了高效的更新虚拟DOM**

原理便是其**高效的Diff算法**

![20210419162944435.png][]

当页面的数据发生变化时，Diff算法只会比较同一层级的节点

1.**如果节点类型不同，直接干掉前面的节点**，再创建并插入新的节点，不会再比较这个节点以后的子节点了。

2.**如果节点类型相同**，则会**重新设置该节点的属性，从而实现节点的更新**。

当某一层有很多相同的节点时，也就是列表节点时，Diff算法的更新过程默认情况下也是遵循以上原则。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70 8][]

我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的：

![20210419163016629.png][]

即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？  
所以我们需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

![20210419163026903.png][]相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，

【代码演示】

无key数据遍历 执行效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70 9][]

![20210419163102608.png][]

有key数据遍历 执行效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70 10][]

## **2****.****5** **事件处理** ##

可以用** ****v-on 指令监听 DOM 事件**，并在触发时运行一些 JavaScript 代码。

### **2.5.1 定义事件** ###

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
    
            语法：<div v-on:click='dosomething'></div>
    
            函数dosomething定义的位置：
    
                要求定义mothds属

性中

### **2.5.2 事件修饰符** ###

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了**事件修饰符**。之前提过，修饰符是由点开头的指令后缀来表示的。

- 鼠标修饰符：  
    
                <div v-on:click.stop='dosomething'>
    
                .stop
    
                .prevent
    
                .capture
    
                .self
    
                .once
    
                .passive
    
            - 键盘修饰符：
    
                 <input type="text" name="" v-on:keyup.enter='search'>
    
                .enter
    
                .tab
    
                .delete (捕获“删除”和“退格”键)
    
                .esc
    
                .space
    
                .up
    
                .down
    
                .left
    
                .right
    
            - 系统修饰符：
    
                <input type="text" name="" v-on:keyup.enter.ctrl='search'>
    
                .ctrl
    
                .alt
    
                .shift
    
                .meta

![20210419163202389.png][]

![20210419163209596.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70 11][]

### **2.5.3内联处理器中的方法（事件传递参数）:** ###

传参问题：
         1. 事件对象
            1. 当定义的事件没有其他参数时，第一个参数默认就是事件对象
                  <div v-on:click='demo'>
                    demo(e){e就是事件对象}
            2. 当定义的事件有其他参数时，事件对象必须手动传入
                  <div v-on:click='demo(123,$event)'>
                  demo(cs,e){}
           2. 普通参数
               定义函数时直接在函数上添加参数
                <div v-on:click='demo(2)'>
            - 简写：v-on 简写成 @
            - this问题：this指向当前组件

**<button v-on:click="warn('****参数变量****', $event)">**** ****</button>**

methods: \{

** warn: function (message, event)** \{

// 现在我们可以访问原生事件对象

if (event) \{

event.preventDefault()

alert(message)

## **2.6** **数组更新检测** ##

Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：de

xOf(

数组更新检测
            在列表渲染中，如果遍历是数组，当数组数据发生改变时，页面什么时候能自动更新(页面重新渲染)
            数组中分两类操作：
                变异方法: 调用数组原生方法时能改变原数组的方法称为变异方法，变异方法会触发页面自动更新
                    push() unshift() shift() pop() sort() splice() reserve()
                非变异方法:调用数组方法后不会改变原数组
                    filter() jion() concat() slice() indexOf() lastIndexOf()

)

它们不会变更原始数组，而**总是返回一个新数组**。当使用非变更方法时，可以用新数组替换旧数组

你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

## **2.7** **对象变更检测注意事项** ##

由于 JavaScript 的限制，**Vue 不能检测数组和对象的变化**

对于已经创建的实例，**Vue 不允许动态添加根级别的响应式属性**。

但是，可以使用 **Vue.set**(object, propertyName, value) 方法向嵌套对象添加响应式属性。

**官网推荐****：****Vue.set(vm.userProfile, 'age', 27)****   **

对象变更检测注意事项
    
            1. 默认只有修改能响应，会触发页面更新；添加，删除默认是不触发页面更新的
    
            2. 怎么让添加或删除时能触发页面更新  
    
              方法1：重新赋值
    
                        let obj = {}
    
                        this.obj = {...this.obj,c:'c'}
    
                方法2: Object.assgin()
    
                        this.obj = Object.assign({c:'c'},this.obj)
    
                方法3: 官方提供的方法
    
                    添加：$set(target,key,value)
    
                            this.$set(this.obj,'age',30);
    
                    删除：$delete(target,key)
    
                            this.$delete(this.obj,'name')

[20210419154826978.png]: /images/20221022/e8f76bfeebc348e6ae257172cd7faf27.png
[https_github.com_vuejs_vue-devtools_vue-devtools]: https://github.com/vuejs/vue-devtools#vue-devtools
[20210419154845433.png]: /images/20221022/a45b1c2f419d47c0bc0d2de614177f73.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70]: /images/20221022/1d2a0ae60ddc49faa08bce351cd2c5e9.png
[20210419154916528.png]: /images/20221022/f0415b7091724173baebee581687e2be.png
[20210419154940849.png]: /images/20221022/74ee25eb965a49caa12f6637b23d0eed.png
[20210419155014725.png]: /images/20221022/0eda8b0a422c44cabdfb4f7ee279b4f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70 1]: /images/20221022/c6a1dd13fc934830ae42957e1381b0ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70 2]: /images/20221022/0d042ee213f64515b531d5699a185e34.png
[20210419155033162.png]: /images/20221022/c1bb7979f2314b86a3f85d5d43bc3794.png
[20210419155037745.png]: /images/20221022/10dd16f3de2b4f838af63848ad4686fa.png
[20210419155043490.png]: /images/20221022/95d423c1726d47fd95fe18e789668e83.png
[20210419155058983.png]: /images/20221022/7a6a84836772486ebb92668593eeff35.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70 3]: /images/20221022/9bd958391cd94a04991edc2b89cf8aad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70 4]: /images/20221022/3526761b7f7441b29781a2c97f93fb7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70 5]: /images/20221022/37b8d2a4709247119231958f781f9a73.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70 6]: /images/20221022/5a58f8f352e44ecea2564098ed07d7cf.png
[2021041916290467.png]: /images/20221022/950bfae91260475d84af93ada4c432bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70 7]: /images/20221022/f6e30640065f4b119b7adab60a31dac8.png
[20210419162930898.png]: /images/20221022/9cb6f013aa2a4686a19fbd65a26f6b09.png
[20210419162944435.png]: /images/20221022/98dbd5d3d54841a5a02ccaf2b6e4944a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70 8]: /images/20221022/04ac3b6af9bb4c4b97811f7993df691d.png
[20210419163016629.png]: /images/20221022/ef1a8ac14b624fcab8b43765a1f47683.png
[20210419163026903.png]: /images/20221022/893d2e7c91614b548e0e269a0a19b115.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70 9]: /images/20221022/5a58458cea384a53955ff19b47bd704b.png
[20210419163102608.png]: /images/20221022/a1a82441ac1a4925b555bcac55578f46.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70 10]: /images/20221022/dc49d6229190408695887e4fbe932e7a.png
[20210419163202389.png]: /images/20221022/9167edcfd0074a95bc7ec2408524157e.png
[20210419163209596.png]: /images/20221022/923e01816a844544ae9d32fec765201d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70 11]: /images/20221022/f6e29fecdc5a4eb7835e78e1bd48fb78.png