前端开发入门：vue.js

以你之姓@ 2022-08-19 11:27 163阅读 0赞

**Vue.js**  
Vue.js @尤雨溪 老师写的一个用于创建 web 交互界面的库，是一个精简的 MVVM。从技术角度讲，Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把  View 层和  Model 层连接了起来。实际的 DOM 封装和输出格式都被抽象为了 Directives 和 Filters。Vue.js和其他库相比是一个小而美的库，作者的主要目的是通过一个尽量简单的 API 产生可反映的数据绑定和可组合的视图组件，感觉作者的思路非常清晰。  
优点：

1.  简单：官方文档很清晰，比 Angular 简单易学。
2.  快速：异步批处理方式更新 DOM。
3.  组合：用解耦的、可复用的组件组合你的应用程序。
4.  紧凑：~18kb min+gzip，且无依赖。
5.  强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。
6.  对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

缺点：

1.  新生儿：Vue.js是一个新的项目，2014年3月20日发布的0.10.0 Release Candidate版本，目前github上面最新的是0.11.4版本，没有angular那么成熟。
2.  影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
3.  不支持IE8：哈哈不过AngularJS 1.3也抛弃了对IE8的支持，但是  @司徒正美 老师的avalon是支持IE6+的，应该下了很多努力去优化。这一点对于那些需要支持IE8的项目就不好了，不过这也是web前端开发的一个趋势，像IE低版本就应该退出历史舞台了，通过改变我们的前端思维，而不是顺应那些使用老版本而不去升级的人。@玉伯老师就说过一句话，我觉得说的非常好“这年头，支持 IE6、7 早就不再是特性，而是耻辱。努力推动支付宝全面不支持 IE6、7，期待更多兄弟加盟”。

Vue.js 是用于构建交互式的 Web  界面的库。它提供了 [ **MVVM**][_MVVM] 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。从技术上讲， Vue.js 集中在 [ **MVVM**][_MVVM] 模式上的视图模型层，并通过双向数据绑定连接视图和模型。实际的 DOM 操作和输出格式被抽象出来成指令和过滤器。相比其它的 MVVM 框架，Vue.js 更容易上手。

vue.js 是用来构建web应用接口的一个库。技术上，Vue.js 重点集中在MVVM模式的ViewModel层，它连接视图和数据绑定模型通过两种方式。实际的DOM操作和输出格式被抽象的方式到指令（[Directives][]）和过滤器（[Filters][]）在哲学领域内,尽量让MVVM数据绑定API尽可能简单。模块化和可组合性也是重要的设计考虑。vue不是一个全面的框架,它被设计成简单的和灵活的。你可以用它快速原型,或混合和匹配与其他库定义前端堆栈。Vue。js的API是参考了AngularJS、KnockoutJS Ractive.js Rivets.js。尽管有相似之处,我相信Vue.js提供一个有价值能够让你在现在的一些现有框架中舍取其价值。

![55c9abacf113a.jpg][]

HTML：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;div id=</code> 
      <code>"demo"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>{ {message}}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;input v-model=</code> 
      <code>"message"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/div&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

JavaScript：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>var</code> 
      <code>demo = </code> 
      <code>new</code> 
      <code>Vue({ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>el:</code> 
      <code>'#demo'</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>data: { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>message:</code> 
      <code>'Hello Vue.js!'</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>})</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

[_MVVM]: http://www.yyyweb.com/
[Directives]: http://vuejs.org/guide/index.html#Directives
[Filters]: http://vuejs.org/guide/index.html#Filters
[55c9abacf113a.jpg]: http://img.ptcms.csdn.net/article/201508/11/55c9abacf113a.jpg