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

chen☆

已于 2022-10-04 23:27:22 修改

阅读量486

点赞数

文章标签：前端 vue.js

于 2022-10-02 23:54:21 首次发布

本文链接：https://blog.csdn.net/m0_58450531/article/details/127147820

版权

前言

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

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

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

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

1 MVVM

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

案例：

实现功能：在输入框中输入的数值要实时更新到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框架：整个过程，我们不需要直接对标签进行操作，只关心数据即可。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 导入vue.js -->
        <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>

效果：

2 VUE.js

2.1 VUE.js 是什么

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

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

2.2 Vue.js 优点

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

3 Vue 安装

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

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

<script src="js/vue.js"></script>

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

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

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

4 第一个 Vue 程序

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

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

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 } }}