【一周连击之Vue】第一天-渐进式框架初印象

最新推荐文章于 2022-09-15 21:15:05 发布

snakorse

最新推荐文章于 2022-09-15 21:15:05 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/snakorse/article/details/103914235

版权

Vue是什么

引用官方的一段话

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

什么是渐进式

引用一个知乎的回答

在我看来，渐进式代表的含义是：主张最少。
每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。

比如说，Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西：

必须使用它的模块机制
必须使用它的依赖注入
必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）

所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。
比如React，它也有一定程度的主张，它的主张主要是函数式编程的理念，比如说，你需要知道什么是副作用，什么是纯函数，如何隔离副作用。它的侵入性看似没有Angular那么强，主要因为它是软性侵入。
你当然可以只用React的视图层，但几乎没有人这么用，为什么呢，因为你用了它，就会觉得其他东西都很别扭，于是你要引入Flux，Redux，Mobx之中的一个，于是你除了Redux，还要看saga，于是你要纠结业务开发过程中每个东西有没有副作用，纯不纯，甚至你连这个都可能不能忍：

const getData = () => {
// 如果不存在，就在缓存中创建一个并返回
// 如果存在，就从缓存中拿
}

因为你要纠结它有外部依赖，同样是不加参数调用，连续两次的结果是不一样的，于是不纯。

现在我要说说为什么我这么支持Vue了，没什么，可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。渐进式的含义，我的理解是：没有多做职责之外的事。

另外，还有一篇较早期的InfoQ文章写的也非常不错：《Vue 2.0——渐进式前端解决方案》

最简单的使用方式

想使用vue很简单，写一个index.html，然后引入vue.js便可以使用了，真的是零门槛起步，最简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <div id="app1">
        {{ message }}
    </div>
    <script>
        var app1 = new Vue({
            el: '#app1',
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</body>
</html>

这里vue用起来感觉跟模板引擎差不多，实际上，据说vue在插值处理上就是使用了Mustache模板引擎。当然这是最简单的起步示例，工程化的项目是不建议这样直接在页面上写的，而是要组件化模块化，而这也正体现了vue的渐进式，随手便可以用起来，不需要过多的操作和配置（跟之前接触angular的时候比真是太容易了）。

这段代码有一点需要注意的便是顺序，body内的script脚本必须在div的下方

通过Demo接触到的一些功能

{{ }}方式插值
通过v-bind、v-if、v-for、v-on等指令的使用，来控制dom的属性、结构和交互
通过使用v-model来实现双向绑定
这里遇到个问题，按照官方的例子，v-model似乎是绑定到了dom元素的value属性上，那对于select和checkbox这样的元素呢？一番探索后还是在官网找到了解释：
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
- text 和 textarea 元素使用 value 属性和 input 事件；
- checkbox 和 radio 使用 checked 属性和 change 事件；
- select 字段将 value 作为 prop 并将 change 作为事件。
vue组件，组件也是一个vue实例，有两个属性可定义：template和props，vue组件是支持嵌套的

总结

OK，简单的上手，大概的熟悉了一些基础的概念，初印象还不错，一直听说很轻很容易上手，今日看来，确实所言非虚（虽然是刻意没有使用vue-cli来操作），下次深入去了解Vue实例的概念。

snakorse

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【一周连击之Vue】第一天-渐进式框架初印象

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

扫一扫