vue简单使用
2016-06-05 22:34
495 查看
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="robots" content="noindex, nofollow"> <meta name="googlebot" content="noindex, nofollow"> <style type="text/css"> </style> <title></title> <script type='text/javascript'>//<![CDATA[ window.onload=function(){ new Vue({ el: '#app', data: { newTodo: '', todos: [ { text: 'Add some todos' } ] }, methods: { addTodo: function () { var text = this.newTodo.trim() if (text) { this.todos.push({ text: text }) this.newTodo = '' } }, removeTodo: function (index) { this.todos.splice(index, 1) } } }) }//]]> </script> </head> <body> <script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script> <div id="app"> <input v-model="newTodo" v-on:keyup.enter="addTodo"> <ul> <li v-for="todo in todos"> <span>{{ todo.text }}</span> <button v-on:click="removeTodo($index)">X</button> </li> </ul> </div> </body> </html>
参考:
http://www.runoob.com/w3cnote/vue-js-quickstart.html
vue+webpack:
https://segmentfault.com/a/1190000004690338 http://guowenfh.github.io/2016/03/24/vue-webpack-02-deploy/ https://segmentfault.com/a/1190000005363030
相关文章推荐
- 1152 - 4 Values whose Sum is 0
- HDU 4746 Mophues(有趣的前缀和/莫比乌斯反演)
- 《面向对象程序设计》六 GUI
- [GitHub]第七讲:GitHub issues
- xcode 不值钱的动画UIButton
- EasyUI中tree的使用
- HDU 5057 Argestes and Sequence (离线树状数组 || 分块)
- UISegmentedControl的使用
- Android错误之--Warning:Gradle version 2.10 is required. Current version is 2.8.
- ios学习笔记——UIImagePickerController
- Picasso入门教程(十一)Influencing Image Cache(影响图片缓存)
- 队列同步器AbstractQueueSynchronizer
- 【Android】UI设计之界面布局
- 1605 - Building for UN
- xcode 不值钱的动画UIImageView
- ubuntu禁用guest账户
- Infinite Sequence
- UIPageControl点击小圆点跳转到对应位置的方法
- 304. Range Sum Query 2D - Immutable
- java操作parquet文件,添加字段