Vue框架学习日记之vue概述

最新推荐文章于 2022-08-31 21:21:42 发布

啊祝arzhu

最新推荐文章于 2022-08-31 21:21:42 发布

阅读量193

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_41889956/article/details/87551573

版权

vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1、vue是什么？

首先我们来看一下官网的介绍，https://cn.vuejs.org/v2/guide/index.html#

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

看到这你一定觉得云里雾里，不明所以，尤其是上面的粗体提到的概念，渐进式框架，自底向上组逐层应用以及视图层。

在晴天Smile的博文https://blog.csdn.net/liang377122210/article/details/71545459，对于以上概念有一个大概的介绍。

这里我就简单的说一下自己的理解，现在随着移动端的火热，基本上，人们都是在一个网页上进行操作，这中网页可以叫单页应用程序，搭配Ajax能够让网页在没有刷新的时候进行动态响应，这实在是太棒了，比如像网页版知乎一样，然而如果你使用传统的JQuery去编写这种网页，因为JQuery是针对DOM进行操作的，有时候我们会遇到又臭又长的DOM代码，这无疑增加了开发的难度和网页的响应速度。

然而使用VUE，通过VUE的特性，能够很好的实现并解决上述的问题。

2、vue的特点

vue这么实用，离不开它的几个特点和所采用的技术

2.1、响应式的数据绑定

什么是响应式的数据绑定呢？就是vue会针对网页中的某些数据变化做出响应，比如你在网页上输入一段数据，惊奇的你会发现这个页面上呈现的内容跟着你输入的数据进行变化！！！！就比如下面这样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js测试 - 代码之美专栏</title>
    <!-- author:昌维 代码之美 https://zhuanlan.zhihu.com/codes -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" name="" value="" placeholder="在这里输入文字，下面会跟着变化" v-model="message">
    <hr>
    <p>{{ message }}</p>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
</body>
</html>

结果：

我们尝试修改表单中的内容

天哪，发生了什么！！！HTML内容竟然随着表单内容进行修改！这就是为什么vue有时候会被称为声明式的渲染引擎模板的原因了

2.2、组件化开发

让我们来想想，在平时的项目构建中，后端，都是怎么工作的呢？通常是将一个项目后端分成若干个业务（模块），这些业务或者说是模块又可以分成更为细致的函数等等，每一个函数都由不同的人开发，如此一来，减少了开发的难度，也减轻了开发的负担，然而！！！在我们前端程序员自己开发项目的时候，通常做的式单页面程序，那么在产品不断的改需求，提需求的时候，我们就需要进行大量的代码编写，天哪，那么我们前端工作者是否可以像后端一样，进行模块封装呢？？？

聪明的vue制作者早已想到了这一点，vue通过组件，把一个单页应用中的各个模块拆分到一个一个单独的组件中，我们只需要在父级应用中写好各个组件的标签，并且在组件标签中写好要传入的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各个组件的实现，这样一个应用就完了！！

2.3、Virtual DOM

关于这一点，在社区和论坛中存在着很大的争议，Virtual DOM的中文名称是虚拟DOM，它的作用是在载入页面前，首先利用JavaScript对DOM操作进行计算和优化，采用性能最好的DOM操作，再渲染到DOM树上，最后载入页面，从而减少载入页面的时间，然而有些人觉得vue是一种轻量型的框架，采用这种虚拟的DOM操作无疑会增加vue本身的代码，还会消耗更多的CPU，但是更多的人认为vue的应用场景就是用于处理单页程序的，单页应用程序有一个特点就是会操作很多的DOM，那么采用Virtual DOM操作就会减少载入页面的时间。

简而言之，Virtual DOM技术决定了vue是编写单页面程序最好的框架

3、学习vue的步骤

在这里结合网上的资料和个人的技术栈，先规划一下自己学习vue的基本步骤。

前期：vue的官方文档，要学习一个语言最好的地方就是去看这门语言的官方发文档，

中期：ES6+前端打包工具webpack+包管理器npm+后端node.js

后期：亲自参与设计到完成一个到多个项目

啊祝arzhu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue框架学习日记之vue概述

1、vue是什么？首先我们来看一下官网的介绍，https://cn.vuejs.org/v2/guide/index.html#Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以...
复制链接

扫一扫