Vue简介

最新推荐文章于 2022-08-02 22:07:08 发布

chengqiuming

最新推荐文章于 2022-08-02 22:07:08 发布

阅读量520

点赞数

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

本文链接：https://blog.csdn.net/chengqiuming/article/details/102760447

版权

Vue 专栏收录该内容

161 篇文章 16 订阅

订阅专栏

一点睛

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。

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

Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

Vue的核心可只关注于视图层，不仅容易上手，还便于与第三方库（vue-router,vue-resource,vuex）或既有项目整合。

二 MVVM模式的实现者

Model：模型层，在这里表示JavaScript对象。
View：视图层，在这里表示DOM（HTML操作的元素）。
ViewModel：连接视图和数据的中间件，Vue.js就是MVVM中ViewModel层的实现者.

在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者。

ViewModel能够观察到数据的变化，并对视图对应的内容进行更新。

ViewModel能够监听到视图的变化，并能够通知数据发生改变。

到此，我们明白，Vue.js就是一个MVVM的实现者，它的核心就是实现了DOM监听与数据绑定。

三为什么要使用Vue.js

轻量。压缩后只有20多k。
移动优先。
容易上手，学习曲线平稳，文档齐全。
吸取了Angular（模块化）和React（虚拟DOM）的长处，并拥有自己独特的功能，如计算属性。虚拟DOM与DIFF算法描述如下：它是Vue的核心。Vue之所以高效，就是虚拟的dom和diff算法，vue不通过修改dom树来达到修改的效果，而是直接在页面上改那个元素，此时这个元素就是一个虚拟的dom。那么vue怎样改呢？通过diff算法，计算出虚拟的dom修改后和修改前的区别，然后在虚拟dom的原基础上进行修改，这样效率就大大提升了。

开源，社区活跃度高。

四入门实例

1 代码

<!DOCTYPE html>
<html>


<head>
    <meta charset="utf-8">
    <title>入门实例</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>


<body>
    <div id="app">
        <p>{{ message }}</p>
    </div>


    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js!'
            }
        })
    </script>
</body>


</html>

2 效果

五集成场景

1 单页面、多页面引入Vue.js

2 复杂单页面应用Vue cli工具。

六开发工作流

1 需求调研（确定需求）

2 交互设计、逻辑设计、接口设计

3 代码实现、测试运行、线上部署

七参考资料

Webpack 入门教程：http://www.runoob.com/w3cnote/webpack-tutorial.html

官方文档：http://vuejs.org/v2/guide/syntax.html

中文文档: https://cn.vuejs.org/v2/guide/syntax.html

chengqiuming

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue简介

一点睛Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。Vue只关注视图层，采用自底向上增量开发的设计。Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。二入门实例1代码<!DOCTYPE html><html><head> <meta charse...
复制链接

扫一扫