Vuejs入门实践

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<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>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
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。但是这里的属性，仅当前绑定的对象有效，对超出作用域的其他绑定无效。