Vue笔记一:简单入门
来源:互联网 发布:送人钢笔推荐 知乎 编辑:程序博客网 时间:2024/06/10 03:38
转载自: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,拉你入群。再次强调,保证群高质量,群非前端不加,请谅解哦。扫描微信二维码也可以。
0 0
- Vue笔记一:简单入门
- hibernate 笔记一 简单入门
- vue2+vuex+vue-router 快速入门(一) 简单介绍
- vue入门(一)
- vue入门学习笔记
- Vue入门笔记
- vue入门学习笔记
- vue.js入门笔记
- Vue入门笔记
- Vue学习笔记(一)
- Vue笔记(一)
- Vue笔记(一)
- Vue学习笔记一
- 笔记:Linux shell(一): 简单入门
- JavaScript 简单入门学习笔记(一)
- quartz学习笔记(一)简单入门
- Vue.js笔记-vue-router入门
- Vue学习笔记-Vue基础入门
- OpenCV:OpenCV图像旋转的代码
- Android实现二维码的生成和扫描
- SSH终端模拟软件下载
- C#流(stream)
- 简单12步理解Python装饰器
- Vue笔记一:简单入门
- 自定义控件三部曲之动画篇(一)——alpha、scale、translate、rotate、set的xml属性及用法
- POJ 3176 Cow Bowling 动态规划
- MBatis# $的区别
- vue2.0 过滤器用法
- LeetCode No.461 Hamming Distance
- 【Leetcode】53. Maximum Subarray
- 使用Eclipse+maven3插件开发一个Servlet3.0的简单例子
- 在2017年,如何将你的小米4刷上Windows 10 mobile?(后附大量图赏)