Vue笔记一：简单入门

男娘i 2022-07-10 04:56 210阅读 0赞

转载自：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>`的内容也会随之改变，[效果参考][Link 1]。这些功能如果用Jquery实现则是非常繁琐。我必定会对很多id进行设置。

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

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]
 *  [vue-loader][]

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

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

![Center][]

[vue.js]: http://cn.vuejs.org/
[Evan YOU]: http://evanyou.me/
[Link 1]: http://cn.vuejs.org/guide/#%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A
[Link 2]: http://cn.vuejs.org/guide/#%E6%B8%B2%E6%9F%93%E5%88%97%E8%A1%A8
[vue]: http://cn.vuejs.org/guide/
[vue-loader]: http://vuejs.github.io/vue-loader/start/tutorial.html
[Link 3]: http://www.jianshu.com/p/c1e3b96c1293
[Center]: /images/20220709/056a55f970ba4f4581e0ceb49505c762.png