Vue笔记一：简单入门

转载自：http://www.jianshu.com/p/184c0e8fe596

引言

vue.js是由尤大神Evan YOU主持的MVVM项目，相对angular更轻量，相对react更好用，结合了很多前段框架的优点。

入门

其实，在官网的教程也十分清晰。我讲讲双向绑定的优势吧。以前我们用Jquery进行dom的操作，虽然熟悉后开发效率很高，但是如果多个控件的相互操作多的情况下，还是会乱。相比之下，Vue的使用更加清晰，通过虚拟dom将数据绑定，而且组件化和路由的帮助下，让整个网页符合SPA（Single Page Application）的潮流趋势。如果你懂的Angular.js，那么Vue.js就是囊中之物。

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

{{}}是一个标识符，将message将Javascript中Vue中数据的message绑定，它的初始值为Hello Vue.js!。当然，所有的操作要在id为app的作用域之中。

数据输入方面则是将input的数据模型通过v-model进行绑定。这样，当你在文本框输入文字时，对应的<p>的内容也会随之改变，效果参考。这些功能如果用Jquery实现则是非常繁琐。我必定会对很多id进行设置。

除此以外，还可以像angular那样进行循环渲染。通过v-for把数组数据进行循环显示，效果参考。

<div id="app">
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue.js' },
      { text: 'Build Something Awesome' }
    ]
  }
})

当然method也可以进行绑定，通过v-on:click把Vue中的method绑定。

参考

• vue文档
• vue-loader

转载，请表明出处。总目录前段收集器

学习前端的过程中，我整理了很多资料，也希望能共享出来帮助到更多刚接触或者接触前端不久的同学。不过也为了把控微信群的质量，入群的一定要是前端的小伙伴才可以。入群我就会把资料发给每个人，每天也会挑选前沿的前端高质量文章发到群里给大家学习。想加入的同学可以加 笑笑微信：iamaixiaoxiao，拉你入群。再次强调，保证群高质量，群非前端不加，请谅解哦。扫描微信二维码也可以。