Vue入门-阿里云开发者社区

一、Vue简介

1.1 定义

在Java编程语言中，Vue是一个前端JavaScript框架，用于构建用户界面。它被设计成一个渐进式框架，可以用于构建单页面应用（SPA）或多页面应用（MPA）。Vue提供了丰富的工具和库，使开发者能够通过组件化的方式构建可复用的代码，并且能够灵活地管理应用的状态。

总的来说，Vue是一种在Java编程语言中使用的前端JavaScript框架，用于构建可复用、响应式的用户界面。它提供了丰富的工具和库，使开发者能够以组件化的方式构建应用程序，并通过声明式的模板语法和响应式系统来简化开发流程。

1.2 核心思想

Vue的核心思想是将用户界面抽象为一系列的组件，并以组件化的方式构建应用。以下是Vue的核心思想的几个关键点：

组件化：Vue将用户界面划分为独立的组件，每个组件具有自己的状态和行为。这种组件化的结构使得应用程序更易于理解、维护和扩展，同时也促进了代码的可复用性。

声明式渲染：Vue使用基于HTML的模板语法，使开发者可以以声明式的方式描述组件的结构和行为。通过在模板中绑定数据，Vue能够自动追踪数据的变化并更新相应的视图，使开发者可以专注于描述组件的样式和交互，而不必关注底层的DOM操作。

响应式系统：Vue采用了响应式的数据绑定机制，通过建立数据与视图之间的关联，实现了数据的双向绑定。当数据发生变化时，视图会自动更新，反之亦然。这种响应式的特性让应用程序的状态管理更加简洁和高效。

虚拟DOM：Vue引入了虚拟DOM的概念，通过在内存中构建虚拟的DOM树，减少了对实际DOM的直接操作。通过对虚拟DOM进行比较，Vue能够高效地计算出最小的DOM变更，并将其应用到实际的DOM上，提高了性能和渲染的效率。

组件通信：Vue提供了多种通信方式，使组件之间能够方便地进行数据的传递和交互。包括props和events用于父子组件之间的通信，还有Vuex作为全局状态管理库，以及provide和inject等高级通信方式，满足不同场景下组件之间的需求。

综上所述，Vue的核心思想是以组件化为基础，通过声明式渲染、响应式系统、虚拟DOM和灵活的组件通信方式，使开发者能够以简洁、高效和可维护的方式构建现代化的用户界面应用程序。

1.3 应用领域及用法

Vue广泛应用于前端开发的各个领域，从简单的静态页面到复杂的单页面应用程序（SPA），都可以使用Vue来构建。下面是Vue的一些常见应用领域及用法的示例：

网页开发：Vue可以用于构建各种类型的网页，包括静态网页、多页应用（MPA）和单页面应用（SPA）。通过Vue的组件化思想和模板语法，开发者可以更高效地创建交互性、动态且可维护的网页。

移动应用开发：Vue可以与配套的移动开发框架（如Vue Native、Weex）结合使用，用于开发跨平台的移动应用。这些框架允许开发者使用Vue的语法和组件模型来构建原生移动应用，同时兼顾开发效率和性能。

桌面应用开发：借助Electron等桌面应用开发环境，Vue也可以用于构建桌面应用程序。将Vue与底层的Node.js和Chromium结合，开发者可以使用Web技术构建跨平台的桌面应用程序。

后台管理系统：Vue在开发后台管理系统方面非常流行。Vue的组件化和响应式系统使得开发者能够快速搭建复杂的管理界面，并实现数据的展示、交互和状态管理等功能。同时，Vue生态系统中丰富的第三方库和组件库，如Element UI、Ant Design Vue等，为后台管理系统的开发提供了丰富的解决方案。

嵌入式应用：Vue可以应用于嵌入式领域，用于构建嵌入式的用户界面。例如，在物联网（IoT）设备、智能家居系统或嵌入式控制面板中，开发者可以使用Vue来开发用户界面，监控设备状态和实现用户交互等功能。

补充说明的是，Vue作为前端框架，主要关注于用户界面的构建和交互，多与后端服务进行数据交互。在实际应用中，Vue通常与其他工具和库（如Vue Router、Vuex、Axios等）结合使用，以满足不同场景的需求。

无论是简单的静态页面还是复杂的应用程序，Vue都提供了灵活的工具和库，支持开发者构建高质量、可维护的前端应用。

二、Vue.js

2.1 简介

Vue.js是一个流行的JavaScript前端框架，用于构建用户界面。它是一个开源项目，由尤雨溪（Evan You）于2014年创建并维护。Vue.js旨在简化Web应用程序开发，通过提供一套灵活的工具和库，帮助开发者构建交互性强、高性能的单页面应用（SPA）和可复用组件。

Vue.js采用了基于组件的开发模式，将应用程序拆分为多个可复用的组件，每个组件负责管理自己的视图、逻辑和状态。这种组件化开发的方式提高了代码的可维护性和可复用性，并且使得团队协作更加高效。

Vue.js具有许多重要特性，包括响应式数据绑定、虚拟DOM、模板语法、计算属性、指令等。它还提供了丰富的生态系统，涵盖了路由管理、状态管理、构建工具等方面的库和插件，使得开发者可以根据项目需求进行选择和扩展。

总的来说，Vue.js是一个简洁、易学、灵活和高性能的前端框架，广泛应用于构建现代化的Web应用程序，无论是个人项目还是大型企业应用都能受益于它的优势。

2.2 核心功能

Vue.js的核心功能主要包括以下几个方面：

响应式数据绑定：Vue.js提供了一个响应式的数据绑定系统，可以将数据与视图进行关联。当数据发生变化时，视图会自动更新，反之亦然。这使得开发者可以轻松地管理和更新应用程序的状态，而无需手动操作DOM。

组件化开发：Vue.js鼓励使用组件化的方式构建用户界面。一个组件由自己封装的HTML模板、CSS样式和JavaScript逻辑组成，可以实现更高级别的复用性和可维护性。组件可以嵌套和组合，使得界面的构建更加模块化和灵活。

模板语法：Vue.js使用基于HTML的模板语法，允许开发者通过插值、指令和表达式将数据绑定到模板中。模板语法使开发者可以以声明式的方式描述视图与数据的关系，提高了代码的可读性和可理解性。

虚拟DOM：Vue.js采用了虚拟DOM的概念，通过虚拟DOM的比对算法来高效地更新实际DOM。当数据发生变化时，Vue会生成一个虚拟DOM树，然后与上一次的虚拟DOM树进行比对，找出需要更新的部分，最后只更新这些部分的实际DOM，避免了不必要的DOM操作，提高了性能。

路由管理：Vue.js通过Vue Router插件提供了路由管理功能，可以实现前端路由的配置和管理。Vue Router可以帮助开发者构建单页面应用（SPA），实现页面之间的无刷新切换和动态加载组件。

状态管理：对于大型应用程序，状态管理是一个重要的方面。Vue.js提供了Vuex插件，用于集中管理应用程序的状态。Vuex提供了一个全局的状态管理器，让不同组件之间可以共享和响应这些状态的变化。

除了以上核心功能，Vue.js还支持许多其他特性和插件，例如过渡动画、自定义指令、过滤器等。总之，Vue.js的核心功能使得前端开发更加简单、高效且可维护，适用于各种类型的Web应用开发。

2.3 特性

Vue.js具有以下一些主要的特性：

响应式数据绑定：Vue.js采用了数据劫持和观察的机制，在数据变化时自动更新相关的视图。这样，当应用状态改变时，Vue.js能够智能地更新DOM，保持视图和数据的同步。

组件化开发：Vue.js支持组件化开发，通过将一个应用拆分成多个小组件，可以实现更好的代码复用和可维护性。每个组件都有自己的模板、逻辑和样式，组件之间可以通过Props和Events进行通信。

渐进式框架：Vue.js是一个渐进式框架，可以根据项目的需求选择逐步采用Vue.js的特性，而不是一次性全部引入。这使得在现有项目中引入Vue.js更加方便，并且可以逐步优化和加强现有功能。

虚拟DOM：Vue.js使用虚拟DOM来提高性能。通过将变化前后的DOM树进行比对，Vue.js能够准确地找出需要更新的部分，从而避免了不必要的DOM操作，提高了渲染的效率。

模板语法：Vue.js使用基于HTML的模板语法，使得开发者可以更直观地编写模板。模板语法支持插值、指令和表达式等功能，使得数据绑定和逻辑处理变得更加简单和易于理解。

独立性：Vue.js为开发者提供了独立性，可以很容易地集成到现有的项目中，而不需要对整个项目进行重构。同时，Vue.js也提供了完整的构建工具和开发环境，方便开发者进行开发、构建和调试。

生态系统：Vue.js拥有强大而丰富的生态系统，提供了一系列官方和第三方的扩展库、插件和工具，可以满足各种不同的需求。例如，Vue Router用于路由管理，Vuex用于状态管理，Vue CLI用于项目的构建和开发等。

三、MVVM的介绍

MVVM（Model-View-ViewModel）是一种软件架构模式，用于将应用程序的用户界面（View）与业务逻辑（Model）分离，并引入一个独立的视图模型（ViewModel）来连接两者

3.1 主要组件

MVVM模式的三个主要组件如下：

Model（模型）：表示应用程序的业务数据和业务逻辑。它负责处理数据的获取、存储、验证以及与底层系统的交互，例如数据库、网络请求等。

View（视图）：表示应用程序的用户界面。它负责展示数据、处理用户输入和向用户呈现可视化元素等，通常是由HTML、CSS和用户交互事件组成。

ViewModel（视图模型）：作为View和Model之间的中间层，它连接了视图和模型，负责处理视图的交互逻辑和数据绑定。ViewModel将业务数据从Model中获取，并将其转换为视图所需的格式，然后通过数据绑定机制将数据传递给View。ViewModel还能够监听View的用户交互事件，并将其处理转发给Model，从而实现与模型的交互。

3.2 特点和优势

MVVM模式的特点和优势包括：

解耦和可维护性：MVVM模式将视图和业务逻辑分离，使得它们能够独立开发和测试。这种解耦性提高了代码的可维护性，减少了代码间的依赖。

双向数据绑定：MVVM模式利用数据绑定机制实现了视图和视图模型之间的双向数据同步。当数据发生变化时，视图会自动更新，而用户的交互操作也会反映在视图模型和数据模型中。

可复用的视图和视图模型：由于视图和视图模型的分离，可以更方便地复用它们。同一个视图模型可以被不同的视图使用，而一个视图模板也可以绑定到不同的视图模型上。

提高开发效率：通过数据绑定和命令绑定等机制，MVVM模式降低了开发者编写大量手动DOM操作和事件处理的工作，提高了开发效率。

MVVM模式被广泛应用于各种前端框架和库中，例如Vue.js、Angular和Knockout等。它能够提供清晰的架构和良好的可维护性，使得开发和维护复杂的应用程序变得更加简单和可靠。

四、Vue入门

4.1 HelloWorld实现

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue入门</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  </head>
  <body>
    <!-- 2.定义Vue所管理的边界,有且只有一个根节点 -->
    <div id="app">
      {{msg}}
    </div>
    <script type="text/javascript"">
      new Vue({
        el:"#app",
        data(){
          return {msg:'刘三金每日早上日常臭美,哎哟我他n真帅!'}
          }
        })
    </script>
  </body>
</html>

结果如下：

4.2 数据弹屏发送

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue入门</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  </head>
  <body>
    <!-- 2.定义Vue所管理的边界,有且只有一个根节点 -->
    <div id="app">
      {{msg}}
      <span id="show">
      </span>
      <input id="content"/>
      <button type="button" onclick="tan()">发送弹屏</button>
    </div>
    <script type="text/javascript"">
      new Vue({
        el:"#app",
        data(){
          return {msg:'刘三金每日早上日常臭美,哎哟我他n真帅!'}
          }
        })
        function tan(){
          var content = $("#content").val();
          $("#show").text(content);
        }
    </script>
  </body>
</html>

效果如下：

4.3 v-model的使用(双向绑定)

在Vue中，v-model是一个指令，用于实现双向绑定。

v-model常用于表单元素（如input、select、textarea）中，将表单元素的值与Vue实例中的数据进行双向绑定，这样当表单元素的值改变时，Vue实例中的数据也会随之改变，反之亦然。

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue入门</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  </head>
  <body>
    <!-- 2.定义Vue所管理的边界,有且只有一个根节点 -->
    <div id="app">
      {{msg}}
      <input v-model="msg"/>
      <!-- <button type="button" onclick="tan()">发送弹屏</button> -->
    </div>
    <script type="text/javascript"">
      new Vue({
        el:"#app",
        data(){
          return {msg:'刘三金每日早上日常臭美,哎哟我他n真帅!'}
          }
        })
    </script>
  </body>
</html>

结果展示如下：

需要注意的是，v-model只能在支持value属性的表单元素中使用。对于自定义组件，如果想要实现类似的双向绑定，需要手动实现一个value属性，并在组件中使用该属性来监听变化。

4.4 弹窗数据绑定

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue入门</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  </head>
  <body>
    <!-- 2.定义Vue所管理的边界,有且只有一个根节点 -->
    <div id="app">
      <!-- {{msg}} -->
      <input v-model="msg"/>
      <button type="button" @click="tan()">发送弹屏</button>
    </div>
    <script type="text/javascript"">
      new Vue({
        el:"#app",
        data(){
          return {msg:null}
          },
          methods:{
            tan(){
              alert(this.msg)
            }
          }
        })
    </script>
  </body>
</html>

结果展示如下：

4.5 :value的使用(单向绑定)

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue入门</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  </head>
  <body>
    <!-- 2.定义Vue所管理的边界,有且只有一个根节点 -->
    <div id="app">
      <!-- {{msg}} -->
      <input :value="msg"/>
      <button type="button" @click="tan()">发送弹屏</button>
    </div>
    <script type="text/javascript"">
      new Vue({
        el:"#app",
        data(){
          return {msg:3}
          },
          methods:{
            tan(){
              alert(this.msg)
            }
          }
        })
    </script>
  </body>
</html>

结果如下：

五、Vue的生命周期

Vue组件的生命周期分为以下八个阶段：

1. beforeCreate：在实例被创建之初，数据观测和初始化事件还未开始。

2. created：实例创建完成，已经完成了数据观测和初始化事件。

3. beforeMount：在挂载开始之前被调用，即将开始编译模板并将其挂载到页面上。

4. mounted：挂载完成后调用，此时组件已经显示在页面上。

5. beforeUpdate：在数据更新之前调用，可以在此时对数据进行操作。

6. updated：数据更新完成后调用，组件已经重新渲染完成。

7. beforeDestroy：在实例销毁之前调用，此时实例仍然可以被操作。

8. destroyed：实例销毁后调用，此时所有的指令和事件监听器都已经被移除，组件已经从页面中删除。

需要注意的是，在组件中，生命周期钩子函数可以作为方法进行定义，也可以作为属性进行定义。定义为方法时需要在方法内部执行相应的任务，定义为属性时需要直接定义相应的任务函数。

图解如下：

Vue生命周期具体详解如下(附代码)：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  </head>
  <body>
    <div id="d1">
      <div>number:{{number}}</div>
      <div>{{detail()}}</div>
      <input type="text" v-model="number" />
    </div>
    <script>
      var data = {
        number:999,
        msg:null
      };
      var vm = new Vue({
        el:'#d1',
        data:data,
        methods:{
          detail:function(){
            return "使用方法来插值："+this.msg;
          }
        },
        beforeCreate:function(){
                console.log('beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳')           
                console.log(this.msg)//undefined
                console.log(document.getElementsByClassName("myp")[0])//undefined
            },
            created:function(){
                console.log('created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数')
                this.msg+='!!!'
                console.log('在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
                console.log('接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染')
            },
            beforeMount:function(){
                console.log('beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated')
                this.msg+='@@@'
                console.log('在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
                console.log(document.getElementsByClassName("myp")[0])//undefined
                console.log('接下来开始render，渲染出真实dom')
            },
            // render:function(createElement){
            //     console.log('render')
            //     return createElement('div','hahaha')
            // },
            mounted:function(){ 
                console.log('mounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了')
                console.log(document.getElementsByClassName("myp")[0])
                console.log('可以在这里操作真实dom等事情...')
            //    this.$options.timer = setInterval(function () {
            //        console.log('setInterval')
            //         this.msg+='!'  
            //    }.bind(this),500)
            },
            beforeUpdate:function(){
                //这里不能更改数据，否则会陷入死循环
                console.log('beforeUpdate:重新渲染之前触发')
                console.log('然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染')         
            },
            updated:function(){
                //这里不能更改数据，否则会陷入死循环
                console.log('updated:数据已经更改完成，dom也重新render完成')
            },
            beforeDestroy:function(){
                console.log('beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...')
                // clearInterval(this.$options.timer)
            },
            destroyed:function(){
                console.log('destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后')
            }
      });
    </script>
  </body>
</html>

最后Vue入门就到这里，祝大家在敲代码的路上一路通畅!

感谢大家的观看 !

Vue入门

一、Vue简介

1.1 定义

1.2 核心思想

1.3 应用领域及用法

二、Vue.js

2.1 简介

2.2 核心功能

2.3 特性

三、MVVM的介绍

3.1 主要组件

3.2 特点和优势

四、Vue入门

4.1 HelloWorld实现

4.2 数据弹屏发送

4.3 v-model的使用(双向绑定)

4.4 弹窗数据绑定

4.5 :value的使用(单向绑定)

五、Vue的生命周期

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Vue入门

一、Vue简介

1.1 定义

1.2 核心思想

1.3 应用领域及用法

二、Vue.js

2.1 简介

2.2 核心功能

2.3 特性

三、MVVM的介绍

3.1 主要组件

3.2 特点和优势

四、Vue入门

4.1 HelloWorld实现

4.2 数据弹屏发送

4.3 v-model的使用(双向绑定)

4.4 弹窗数据绑定

4.5 :value的使用(单向绑定)

五、Vue的生命周期

热门文章

最新文章

相关课程

相关电子书