vue安装&vue指令&vue生命周期钩子函数[web前端]

╰半夏微凉° 2024-04-03 08:35 172阅读 0赞

**目录**

前言

1 MVVM

2 VUE.js

2.1 VUE.js 是什么

2.2 Vue.js 优点

3 Vue 安装

4 第一个 Vue 程序

5 模板语法

6 Vue 指令

v-text

v-html

v-on

v-model

v-show

v-if

v-else

v-bind

v-for

7 Vue 实例生命周期

--------------------

### 前言 ###

html css javascript是前端中最基础的三种语言，没有任何的封装，对于开发来讲非常繁琐，所以产生了各种前端框架和后端框架，使开发变得简单高效。

*  网页操作：最原始的方式操作--->框架(一套完整的解决方案，封装大量的语法，简化操作)

我们接下来要学习的两种前端框架：

1.  vue.js是一个非常流行的前端js框架，对js语言做了大量的封装，使得语法简洁，功能强大；
2.  ElementUI(UI：User Interface 用户界面)对html、css进行封装，给我们封装出来许多非常美观的前端组件

### 1 MVVM ###

MVVM 是 Model-View-ViewModel 的简写，MVVM 就是将其中的 View 的状态和行为抽象化，让我们将视图UI和业务逻辑分开，当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。

![32ead00ff38841bba5e71f2f2f042dd7.png][]

![407debc06c8e4c4ebc3495b2b21310a6.jpeg][]

**案例：**

*  实现功能：在输入框中输入的数值要实时更新到p标签上

原始写法：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script type="text/javascript">
                function oper(val){
                    // 这是直接对dom对象进行操作，操作后网页需要进行重新渲染，频繁操作的话，效率低
                    document.getElementById("pid").innerHTML = val;
                }
            </script>
        </head>
        <body>
            <p id="pid">
            
            </p>
            <input type="text" onkeyup="oper(this.value)"/>
        </body>
    </html>

使用vue框架：整个过程，我们不需要直接对标签进行操作，只关心数据即可。

![87cee1dd603147a6bd9e2e365232bdcb.png][]

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            
            <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
        </head>
        <body>
            <div id="app-6">
              <p>{
       { message }}</p>
              <input v-model="message">
            </div>
            <script>
                //创建vue对象
                var app6 = new Vue({
                  el: '#app-6',
                  data: {
                    message: 'Hello Vue!'
                  }
                })
            </script>
        </body>
    </html>

效果：

![6283cf7cfae94bdf8a0041128befba2a.png][]

###  ###

### 2 VUE.js ###

#### 2.1 VUE.js 是什么 ####

Vue (读音 /vjuː/，类似于 **view**) 是一套用于构建用户界面的**渐进式框架**。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。Vue.js 是前端的主流框架之一，与 Angular.js、React.js 一起，并成为前端三大主流框架！

官方网站：[Vue.js - 渐进式 JavaScript 框架 | Vue.js][Vue.js - _ JavaScript _ _ Vue.js]

#### 2.2 Vue.js 优点 ####

1.  体积小，压缩后 33K
2.  更高的运行效率
    
    1.  原来我们用 JQuery 或者原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的时候，浏览器要不停的渲染新的 DOM 树，导致页面看起来非常卡顿。
    2.  现在使用vue.js基于虚拟 dom，可以预先通过 JavaScript 进行各种计算，把最终的DOM 操作计算出来并优化的技术，由于这个 DOM 操作属于预处理操作，并没有真实的操作 DOM，所以叫做虚拟 DOM，最后在计算完毕才真正将 DOM 操作提交，将 DOM 操作变化反映到 DOM 树上。
3.  双向数据绑定，简化 Dom 操作
    
    1.  通过 MVVM 思想实现数据的双向绑定，让开发者不用再操作 dom 对象，把更多的精力投入到业务逻辑上。
4.  生态丰富、学习成本低
    
    1.  市场上拥有大量成熟、稳定的基于 vue.js 的 ui 框架、常用组件！来即用实现快速开发！对初学者友好、入门容易、学习资料多。

### 3 Vue 安装 ###

**方式 1：直接用 <script> 引入**

*  下载 Vue.js 并导入 js 文件，Vue会被注册为一个全局变量

![2d183011dc08415abeb3675505086d77.png][]

**方式 2:命令行工具 (CLI)**

*  安装教程给出了更多安装 Vue 的方式，请注意我们不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。

更多方式参考 [安装 — Vue.js 中文文档 (bootcss.com)][_ Vue.js _ _bootcss.com]

### 4 第一个 Vue 程序 ###

1.  导入开发版本的 Vue.js
2.  创建 Vue 实例对象，设置 el 属性和 data 属性
3.  使用简洁的模板语法把数据渲染到页面上

Vue.js 的核心就是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

![48621b61a12e4361b35d121cda0b0123.png][]

### 5 模板语法 ###

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

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

**插值文本**

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：Message: \{ \{ msg \}\} Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。

迄今为止，在我们的模板中，我们一直都只绑定简单的 property 键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

例如：

{
       { number + 1 }} 
    {
       { ok ? 'YES' : 'NO' }} 
    {
       { message.split('').reverse().join('') }} 
    <div v-bind:id="'list-' + id"></div>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析，有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

{
       { var a = 1 }} 
     
    {
       { if (ok) { return message } }}

### 6 Vue 指令 ###

指令带有前缀 v- 开头，以表示它们是 Vue 提供的特殊属性。

#### v-text ####

*  设置标签的文本内容

*  默认写法会替换全部内容，使用差值表达式可以替换指定内容

*  内部支持写表达式

#### v-html ####

*  设置元素的 innerHTML

*  内容中有 html 结构会被解析为标签

*  内部支持写表达式

案例：

<div id="app">
        <p>{
       {message}} Vue!</p> 
        <p v-text="message+1"> Vue!</p> 
        <p v-html="message"> Vue!</p> 
    </div>
            
    <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data:{
                    message:'<b>Hello</b>'
                }
            })
    </script>

效果：

![6191cac55f8e4159a030950da045f0ab.png][]

#### v-on ####

*  为元素绑定事件

*  事件名不需要写 on 指令可以简写为@

*  绑定的方法定义在 methods 属性中，可以传入自定义参数

<div id="app">
        <input type="button" value="按钮1" v-on:click="test(1,2)" /> 
        <input type="button" value="按钮2" @click="test('按钮2',1)" /> 
    </div>
            
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            methods:{
                test(a,b){
                    alert(a);
                }
            }
        })
    </script>

#### v-model ####

*  便捷的设置和获取表单元素的值

*  绑定的数据会和表单元素值相关联

*  绑定的数据<---->表单元素的值，双向数据绑定

案例：

<div id="app">
        
        <input type="text" v-model="account"/>
        <p>{
       {account}}</p>
    </div>
            
    script type="text/javascript">
       var app = new Vue({
           el: '#app',
           data:{
              account:'123'
           }
       })
    </script>

效果：

![086c68b93dc04adba83049f94d0a02ff.png][]

#### v-show ####

*  根据真假切换元素的显示状态

*  原理是修改元素的 display，实现显示隐藏，dom还是存在的

*  指令后面的内容，最终都会解析为布尔值，值为 true 元素显示，值为 false 元素隐藏

*  数据改变之后，对应元素的显示状态会同步更新
 *  操作数量多的时候，效率更高

#### v-if ####

*  根据表达式的真假切换元素的显示状态

*  本质是通过操纵 dom 元素来切换

*  显示状态表达式的值为 true，元素存在于 dom 中，为 false，从 dom 中移除
 *  操作数量多的时候，效率较低

*  频繁的切换使用 v-show，反之使用 v-if，前者的切换消耗小于 v-bind

#### v-else ####

*  if不成立显示，且必须和v-if相邻使用

v-show、v-if、v-else案例：

![79c4a7b38e56424a97bfd9642dc89297.png][]

<div id="app">
        
        <p v-show="isShow">v-show1</p>
        <p v-show="num>5">v-show2</p>
        <p v-if="isShow">v-if</p>
        <p v-else>v-else</p>
    </div>
            
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data:{
                isShow:false,
                num:10
            }
        })
    </script>

效果：

![d6ce373274314c23995757da22178c46.png][]

#### v-bind ####

*  为元素绑定属性，为标签中属性动态赋值

*  完整写法是 v-bind：属性名

*  简写的话可以直接省略 v-bind，只保留：属性名

<img v-bind:src="imgSrc" /> 
    <img :src="imgSrc" /> 
    <img :title="imgTitle" :src="imgSrc" /> 
    data:{ 
        imgSrc:'img/3.jpg' 
        imgTitle:"这是一张图片" 
    }

#### v-for ####

*  根据数据生成列表结构

*  数组经常和 v-for 结合

*  使用语法是：（item，index）in 数据

*  item 和 index 可以结合其他指令一起使用

*  数组长度的更新会同步到页面上是响应式的

*  为循环绑定一个 key 值 :key=”值” 尽可能唯一

<table border="1">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        <tr v-for="user in users">
            <td>{
       {user.name}}</td>
            <td>{
       {user.age}}</td>
        </tr>
    </table>
    
    var app = new Vue({
        el: '#app',
        data:{
            users:[{name:"张三",age:10},{name:"李四",age:11},{name:"王五",age:12}]
        }
    })

效果：

![902d86a232944ec6829b04fdb30b7cfb.png][]

### 7 Vue 实例生命周期 ###

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做**生命周期钩子**的函数，这给了用户在不同阶段添加自己的代码的机会。

![54713ed49dc0482e926c36f0ebcfca83.png][]

1.  new Vue()实例化一个vue实例，然后init初始化event 和 lifecycle， 其实这个过程中分别调用了3个初始化函数（initLifecycle(), initEvents(), initRender()），分别初始化了生命周期，事件以及定义createElement函数，初始化生命周期时，定义了一些属性，比如表示当前状态生命周期状态得isMounted ，isDestroyed ，isBeingDestroyed，表示keep-alive中组件状态的\_inactive，而初始化event时，实际上就是定义了$once、$off、$emit、$on几个函数。而createElement函数是在初始化render时定义的（调用了initRender函数）
2.  执行beforeCreate生命周期函数
3.  beforeCreate执行完后，会开始进行数据初始化，这个过程，会定义data数据，方法以及事件，并且完成数据劫持observe以及给组件实例配置watcher观察者实例。这样，后续当数据发生变化时，才能感知到数据的变化并完成页面的渲染
4.  执行created生命周期函数，所以，当这个函数执行的时候，我们已经可以拿到data下的数据以及methods下的方法了，所以在这里，我们可以开始调用方法进行数据请求了
5.  created执行完后，我们可以看到，这里有个判断，判断当前是否有el参数(这里为什么需要判断，是因为我们后面的操作是会依赖这个el的，后面会详细说)，如果有，我们再看是否有template参数。如果没有el，那么我们会等待调用$mount(el)方法。
6.  确保有了el后，继续往下走，判断当有template参数时，我们会选择去将template模板转换成render函数（其实在这前面是还有一个判断的，判断当前是否有render函数，如果有的话，则会直接去渲染当前的render函数，如果没有那么我们才开始去查找是否有template模板），如果没有template，那么我们就会直接将获取到的el（也就是我们常见的\#app，\#app里面可能还会有其他标签）编译成templae, 然后在将这个template转换成render函数。
7.  之后再调用beforMount， 也就是说实际从creted到beforeMount之间，最主要的工作就是将模板或者el转换为render函数。并且我们可以看出一点，就是你不管是用el，还是用template, 或者是用我们最常用的.vue文件(如果是.vue文件，他其实是会先编译成为template)，最终他都是会被转换为render函数的。
8.  beforeMount调用后，我们是不是要开始渲染render函数了，首先我们会先生产一个虚拟dom（用于后续数据发生变化时，新老虚拟dom对比计算），进行保存，然后再开始将render渲染成为真实的dom。渲染成真实dom后，会将渲染出来的真实dom替换掉原来的vm.$el（这一步我们可能不理解，请耐心往下看，后面我会举例说明）,然后再将替换后的$el append到我们的页面内。整个初步流程就算是走完了。
9.  之后再调用mounted，并将标识生命周期的一个属性isMounted 置为true。所以mounted函数内，我们是可以操作dom的，因为这个时候dom已经渲染完成了。
10. 再之后，只有当我们状态数据发生变化时,我们在触发beforeUpdate，要开始将我们变化后的数据渲染到页面上了（实际上这里是有个判断的，判断当前的*isMounted是不是为ture并且*isDestroyed是不是为false，也就是说，保证dom已经被挂载的情况下，且当前组件并未被销毁，才会走update流程)。
11. beforeUpdate调用之后，我们又会重新生成一个新的虚拟dom(Vnode)，然后会拿这个最新的Vnode和原来的Vnode去做一个diff算，这里就涉及到一系列的计算，算出最小的更新范围，从而更新render函数中的最新数据，再将更新后的render函数渲染成真实dom。也就完成了我们的数据更新。
12. 然后再执行updated，所以updated里面也可以操作dom，并拿到最新更新后的dom。不过这里我要插一句话了，mouted和updated的执行，并不会等待所有子组件都被挂载完成后再执行，所以如果你希望所有视图都更新完毕后再做些什么事情，那么你最好在mouted或者updated中加一个$nextTick（），然后把要做的事情放在$netTick()中去做。
13. 再之后beforeDestroy，实例销毁前，也就是说在这个函数内，你还是可以操作实例的。
14. 之后会做一系列的销毁动作，解除各种数据引用，移除事件监听，删除组件watcher，删除子实例，删除自身self等。同时将实例属性\_isDestroyed置为true
15. 销毁完成后，再执行destroyed

beforeCreate: function () { 
        console.log('beforeCreatea ’); 
    },
    created: function () { 
        console.log('createda ' ); 
    },
    beforeMount:function(){ 
        console.log('beforeMounta’); 
    },
    // 使用mounted，当vue对象与标签绑定完毕后执行，类似于onload事件  
    mounted:function(){ 
        console.log('mounteda’); 
    }

[32ead00ff38841bba5e71f2f2f042dd7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/3812100334dd4b21844d86b44cfc768f.png
[407debc06c8e4c4ebc3495b2b21310a6.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/19b0035f8f104836a12b6ec19d9b5a6f.jpeg
[87cee1dd603147a6bd9e2e365232bdcb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/3befc276dd784df188d386502e540fbd.png
[6283cf7cfae94bdf8a0041128befba2a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/44a500eb39e341e6ad5aa642ecd7c6e8.png
[Vue.js - _ JavaScript _ _ Vue.js]: https://cn.vuejs.org/
[2d183011dc08415abeb3675505086d77.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/95124c8078334185842205e487d3babc.png
[_ Vue.js _ _bootcss.com]: https://vuejs.bootcss.com/guide/installation.html
[48621b61a12e4361b35d121cda0b0123.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/00d33131e1bf4725837cb2f1a74c84c5.png
[6191cac55f8e4159a030950da045f0ab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/c9afe98d177b4f1b9ec3521d9b46714a.png
[086c68b93dc04adba83049f94d0a02ff.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/195034bd48a64528b1b0da6bd1816e0e.png
[79c4a7b38e56424a97bfd9642dc89297.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/bef1815e929747379dce18ac65332863.png
[d6ce373274314c23995757da22178c46.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/7ada69542ae043f7859845cdd9c75b36.png
[902d86a232944ec6829b04fdb30b7cfb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/51e69f9136c14417b36acf8b09e564f3.png
[54713ed49dc0482e926c36f0ebcfca83.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/bbcaa9ae161745758e02444ce3dc3af4.png