带你进入 Vue.js 的世界

96
deniro
2018.09.23 14:08 字数 343

Vue.js 拥有简单小巧的核心,渐进式技术栈,足以应付任何规模的应用 。这里的渐进式指的是可以一步一步地,有阶段地来使用 Vue.js。

它提供了现代 Web 开发中常见的高级功能,比如:

  • 解耦视图与数据
  • 可复用的组件
  • 前端路由
  • 状态管理
  • 虚拟 DOM

1 MVVM 模式

MVVM(Model-View-ViewModel)模式。 MVVM 模式是从经典的 MVC 模式衍生而来 。 当 View (视图层)发生变化时,会自动更新到 ViewModel (视图模型),反之亦然, View 和 ViewModel 之间同过数据双向绑定( data-building )建立联系 。

因此,开发者只需关心数据即可, DOM 维护的事情交由 Vue 处理。

2 第一行 Vue 代码

我们可以通过使用 CDN 方法来加载 Vue.js,来实现快速体验。目前有以下这些 CDN 地址可用:

这里推荐使用 WebStorm,来开发 Vue 项目。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的好友列表</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="friend in friends">{{friend.name}}</li>
        </ul>
    </div>

    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                friends:[
                    {name:'Jack'},
                    {name:'Lucy'}

                ]
            }
        })
    </script>

</body>
</html>

在 WebStorm 中使用 ctrl+shift+F10,即可在浏览器中运行。

效果:

Vue.js 技术
Gupao