Vue.js：起步

2019-03-09 本文已影响0人 yu_liu

什么是Vue.js

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

MVVM 模式

MVVM即：Model-View-View-Model模式。它由经典的软件架构MVC衍生而来。当View（视图层）变化时，会自动更新到ViewModel（视图模型），反之亦然。View和ViewModel之间通过双向绑定(data-binding)建立联系。

现代的前端开发模式

前端开发绝不是写几个HTML和CSS那么简单的事。新的概念层出不穷：ES6、Node.js、npm、前端工程化、SPA、组件化开发等，新的东西在不断优化我们的开发模式，改变我们的编程思想。

前端三驾马车：Angular、React、Vue

Vue.js 起步

官网中介绍使用 Vue.js有两种方式：一种是通过引入CDN后直接使用或者下载后使用，另一种就是使用命令行工具CLI搭建脚手架去编写对应的内容。目前学习最简单的引入CDN方式，只需要在创建的html文件中引入下图中的script代码，这样就成功地将Vue.js引入到我们的项目中并可以使用了。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

第一个起步页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Vue.js快速起步</title>
        <!-- 通过CDN引入Vue -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <body>
        <!-- vue-app根容器 -->
        <div id="app">
            <!-- 渲染显示HTML代码 -->
            <h2>{{message}}</h2>
        </div>
        <script>
            // 实例化Vue对象
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue!'
                }
            })
        </script>
    </body>
</html>

el代表element，指需要获取的元素，一定是html中的根容器元素。
data用于数据的存储，可以设置对应的数据，data的值也是一个对象，类型可以是字符串、number、对象、数组。
花括号是模板语法。如果data类型是字符串，花括号可以直接获取到相关数据的值，而且这个花括号是不会写入DOM结构的。因为Vue是将拥有的内容放在虚拟DOM中，通过DOM操作再把需要的值插入到真实DOM中。