vue — 初识vue

时间 2019-12-08

标签 vue 繁體版

原文原文链接

vue是什么

vue做为目前比较火热的前端框架，让前端开发效率更高。其实Vue.js不是一个框架，由于它只聚焦视图层，是一个构建数据驱动的Web界面的库。html

轻量级
vue压缩后只有17kb
渐进式框架
vue包含的内容不少，如vue-router，vue-resource，virtual DOM等等，可是在学习的过程当中，能够一步一步的学习，不须要短期内了解所有的东西，就可使用vue进行开发。
数据驱动
当数据发生变化的时候，用户界面发生相应的变化，开发者不须要手动的去修改dom。
MVVM框架
继MVC（Model-View-Controller）和MVP（Model-View-Presenter）模式以后，为了更加方便开发过程，MVVM（Model-View-ViewModel）框架应运而生。
MVVM中View和Model之间没有联系，经过ViewModel进行交互，并且Model和ViewModel之间的交互是双向的，所以视图的数据的变化会同时修改数据源，而数据源数据的变化也会当即反应到View上，实现了数据的双向绑定。这就是MVVM的设计思想：关注Model的变化，让MVVM框架去自动更新DOM的状态，从而把开发者从操做DOM的繁琐步骤中解脱出来！

前端框架的好处

框架（Framework）是整个或部分系统的可重用设计，表现为一组抽象构件及构件实例间交互的方法;另外一种定义认为，框架是可被应用开发者定制的应用骨架。前者是从应用方面然后者是从目的方面给出的定义。
能够说，一个框架是一个可复用的设计构件，它规定了应用的体系结构，阐明了整个设计、协做构件之间的依赖关系、责任分配和控制流程，表现为一组抽象类以及其实例之间协做的方法，它为构件复用提供了上下文(Context)关系。所以构件库的大规模重用也须要框架。

而MV前端框架封装了一套方法和模式，将数据和模型分离开，内部实现数据计算和模板渲染，使用者只须要关注数据的操做便可。使用MV框架能有效实现先后端的解耦，简化开发流程，便于维护管理，能够把精力更多放到业务逻辑，提高开发效率。前端

vue之Hello World

经过new Vue({})建立一个实例，经过el绑定一个元素，经过data定义数据。这是vue最基本的开发模式。vue

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">{{ message }}</div>
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        message:"Hello Vue!"
      }
    })
  </script>
</body>
</html>

el: "#app"中的el是固定的，由于写的是e1死活绑定布料数据。。。。vue-router