【Vue】前端开发串讲与Vue入门演示——带你搞懂Vue框架究竟是用来做什么的

最新推荐文章于 2024-05-28 11:44:38 发布

samarua

最新推荐文章于 2024-05-28 11:44:38 发布

阅读量665

点赞数 1

分类专栏： # Vue.js 文章标签： vue js javascript

本文链接：https://blog.csdn.net/m0_46202073/article/details/115578347

版权

Vue.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前端开发模式的演进

纯静态页面

最初的网页以HTML为主，是纯静态的网页。这意味着只存在信息由服务端到客户端的单向流通。
这也是前端开发者最轻松的时代。

JavaScript

JavaScript横空出世，我们可以使用js操作页面的DOM元素了，页面终于动了起来。
Ajax盛行，局部刷新、异步通信、按需取数据，这些优秀的特性让用户的体验提升了一个档次。
jQury等框架的出现，是必然的结果，因为前端开发者们既要忙着写前端样式，又要操作DOM进行与后端的交互，实在是忙不过来。

生态的建立

Chrome席卷全球浏览器市场，并带来了一颗无比变态的执行引擎：V8。
基于V8引擎，Node.js被开发出来。单线程的红利、基于Loop环的异步I/O、即开即用的web服务器…Node.js的最伟大之处不是将JavaScript带进了后端编程，而是构建了一个庞大的JavaScript生态系统。
NPM包管理系统的发布、Common.js规范的制定，又是一个个JS生态发展的里程碑。

MVVM模式

这是新时代的开发模式。M即模型，V即视图，VM即一个无须开发人员干涉的视图-模型双向操作。
MVVM之前，DOM像一个搬运工。我们从后端取出数据模型，通过DOM将Model渲染到View当中；用户在操作了视图后，我们通过DOM获取到View中的数据，然后同步到Model中。
MVVM之后，DOM被VM彻底封装了起来而透明化了。我们甚至不去理会Model和View之间是怎样相互影响的：只要Model发生了改变，View上就会跟着表现出来；用户修改了View，Model中的数据也随之改变。
今天要学习的，就是一款MVVN模式的框架：Vue

认识Vue

直接看看官网对自己的定位：用于构建用户界面的渐进式JavaScript框架。

在这里插入图片描述

问题来了，什么是渐进式？

渐进式是指可以选择性的使用该框架的部分组件，并且可以选择性的将框架应用在你的项目的一部分上。

前端框架三巨头是Vue.js、React.js、AugularJS，那么Vue的优势是什么呢？

1）Vue 只关注视图层，采用自底向上增量开发的设计。

2）便于与第三方库或者现有项目整合。

3）MVVM模式，视图与模型的双向绑定大大简化了前端代码的编写。

4）非常轻量，~~学起来非常简单~~ 。

Vue入门演示

我甚至可以听到一名前端开发者第一次看见VueDemo的欢呼，这简单得令人生怕。下面对其进行3个演示。

准备

① 首先检查你的 Node.js 和 NPM 是否正常

node -v
npm -v

② 初始化

npm init -y

③ Vue.js本质上还是个js文件。你可以在线引用它、离线下载它，但我推荐你使用npm本地下载

npm install vue

插值渲染

<!-- javascript中的数据，直接渲染到了前端视图！！！ -->
<!-- el即element，选出页面中的元素；data是一个数据对象，该对象的属性都能渲染到视图中 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>{{name}}</h2>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                name: "Alice"
            }
        });
    </script>
</body>
</html>

在这里插入图片描述

双向绑定

<!-- 我们新加了一个输入框，输入框中输入的内容，可以无比丝滑的立即渲染到页面上！！！ -->
<!-- 输入框(View)的变化，立即影响到了代码中的数据(Model)；而数据(Model)的变化，又立即体现在了页面(View)上。这就是双向绑定的魅力 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="age">
        <h2>{{name}} 今年 {{age}} 岁了～</h2>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                name: "Alice",
                age: "?"
            }
        });
    </script>
</body>
</html>

在这里插入图片描述

事件处理

<!-- 我们新加了一个按钮，这个按钮绑定了一个事件，即每点一次数字+1，同时这个变化展现在页面上！！！ -->
<!-- 我们可以绑定上比原先更加强大的事件，这个事件的处理没有涉及到任何代码操作的DOM -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="age">
    <button v-on:click="age++">点我</button>
    <h2>{{name}} 今年 {{age}} 岁了～</h2>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            name: "Alice",
            age: "?"
        }
    });
</script>
</body>
</html>

在这里插入图片描述

写在最后

JavaScript生态圈显然想要向浏览器之外扩展，但其社区目前为止仍旧稍显凌乱。

我想说的是，Vue这类MVVM框架无比强大易用，甚至抛弃了任何的DOM操作。但万不可迷信于此。

❤️

samarua

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【Vue】前端开发串讲与Vue入门演示——带你搞懂Vue框架究竟是用来做什么的

前端开发模式的演进纯静态页面最初的网页以HTML为主，是纯静态的网页。这意味着只存在信息由服务端到客户端的单向流通。这也是前端开发者最轻松的时代。JavaScriptJavaScript横空出世，我们可以使用js操作页面的DOM元素了，页面终于动了起来。Ajax盛行，局部刷新、异步通信、按需取数据，这些优秀的特性让用户的体验提升了一个档次。jQury等框架的出现，是必然的结果，因为前端开发者们既要忙着写前端样式，又要操作DOM进行与后端的交互，实在是忙不过来。生态的建立Chrom
复制链接

扫一扫