目录

    1. 遇到了什么问题

    如果实现的功能简单,开发和维护容易,是不会有设计模式、框架等相关问题研究的。正是因为,Web系统复杂、需求变更快、复用多,开发人员多、人员交接频繁。我们需要一定的约定规则去规避,这些环节产生的风险。 其中大量的研究工作在,系统层面:UI层、逻辑层、数据层的分离,开发人员层面:前端、后端分离。

    2. 几种解决模型

    2.1 MVC

    • M,封装系统的状态、功能、算法逻辑。对外响应状态查询、通知视图改变。
    • V,与用户之间交互。对外获取用户输入,发送给Controller,解释模型并发送模型更新请求。
    • C,封装行为,解释行为。对外将用户的动作映射成模型的更新。

    前端中的MVC,View更新DOM,Controller产生各种的事件,Model请求数据。问题在于,Controller的绝大部分功能浏览器自带,View维护大量的DOM元素非常的臃肿。

    2.2 MVP

    • M,封装系统的状态、功能、算法逻辑。对外接受P的变更请求,返回数据。
    • V,与用户之间交互。对外获取用户输入,发送给P,不需要维护任何数据。
    • P,封装行为,解释行为。P是M和V的协调者,P负责主动从V捕获请求,从M拉取数据,再推送给V,可以说P是MVP模式的中心。

    前端中的MVP,按照这样的分工P承载的内容会非常的多,既要更新V、又要更新M。有些程序员因此又把部分逻辑写入V。

    2.3 MVVM

    • M,封装系统的状态、功能、算法逻辑。
    • V,与用户之间交互。对外获取用户输入。
    • VM,绑定M和V。

    前端中的MVVM,MVVM是MVP的一种改进。MVP中,P需要手动去同步V和M,而在MVVM中自动完成了这个过程。

    3. Vue是什么

    Vue是MVVM的一种实现。

    Vue.js 是一个用来开发 web 界面的前端库。它也有配套的周边工具。如果把这些东西都算在一起,那么你也可以叫它一个『前端框架』。但我个人更倾向于把它看做是一套可以灵活选择的工具组合。如果你到现在都还没听说过 Vue.js,你心里可能在想:前端的幺蛾子就是多,怎么又来一个框架?其实 Vue.js 已经开发了两年多了。第一次公开发布则是在 2014 年 2 月。这两年间它一直在不断进化,今天也已经有许多人在生产环境中使用它。 – 尤雨溪

    按照其描述,Vuejs提供响应式编程、组件化、模块化、动画、路由等特性。

    Vue中的几个概念:

    • 指令:告诉Vue需要更新的属性。默认前缀v-,例如, v-text=”message”,告诉Vue,当message属性值改变时,更新div的textContent内容。
    • 过滤器:过滤器紧跟在指令的路径或表达式之后,在更新 DOM 之前对值进行进一步处理。
    • 列表渲染:使用v-repeat或v-for指令,循环渲染数据内容。前端处理模板。
    • 事件监听:使用v-on命令来注册监听事件,比如v-on:click:onClick,注册了一个元素点击处理函数。
    • 计算属性:通过定义计算属性,来覆盖复杂逻辑的处理场景。
    • 组件系统:实现标签的自定义。意思就是只需要注册了组件XXX,在html中就能够使用<xxx></xxx>,而标签的内容可以使用template自定义。

    4. 如何写一个基于Vue的应用

    对于一个复杂的项目,通常需要借助一定的管理工具,比如Webpack去管理Vue构建的前端项目。而对于入门实践,这里就不新增Webpack的内容,仅仅熟悉Vue的处理机制和使用方法。

    推荐一个不错的在线js编程环境,JSBIN

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
    <body>
    <div>
     <div id="show-input">
       <input v-model = "name"></input>
       <p>Your input: {{name}}</p>
       <p>double input: {{double}}</p>
      <child :cname='name'></child>
     </div>  
    </div>
    
    var vm = new Vue({
      el: '#show-input',
      data: {
        name:"chen"
      },
      components:{
        child:Vue.extend({
          template:'<div>child:{{cname}}</div>',
          props:{
          cname: String
         }         
        }),
      },
      computed:{
        double:function(){
          return this.name+this.name
        }
      }
    });
    

    这里的new Vue,实际上就是在绑定一个DOM元素,其中的el就相当于Jquery中的$()选择器,data属性中定义变量,在html中使用引用,components定义新标签,computed是运算属性,还可以自定义filter。但是这里的属性,仅当前绑定的对象有效,对超出作用域的其他绑定无效。