序:目前前端框架如:vue、react、angular,构建工具 fis3、gulp、webpack 等等......
可谓是五花八门,层出不穷,眼花缭乱。。。其实吧只要你想玩还是可以玩玩的.. 下面是看了 2 天 vuejs 的官方文档实现了一个简单的 todo list. 感觉确实方便~!~
vuejs 官方:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>todolist-vue</title>
- <script src="src/vue.js"></script>
- <style>
- *{
- list-style: none;
- outline: none;
- border: none;
- }
- #app{
- font-family: 'Avenir', Helvetica, Arial, sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- text-align: center;
- color: #2c3e50;
- }
- .app{
- width: 90%;
- margin: 0 auto;
- background: #c5c5c5;
- padding: 5%;
- border: 1px solid #000;
- margin-top: 10px;
- }
- .app li.finished{
- text-decoration: line-through;
- }
- .typeInput input{
- width: 70%;
- font-size: 24px;
- border: 1px solid #000;
- padding-left:5px;
- }
- </style>
- </head>
- <body>
- <div id="app" class="app">
- <h1 v-text='title'></h1>
- <p class='typeInput'>
- <input type="text" v-model='newText' v-on:keyup.enter='addNewlist'>
- </p>
- <ul>
- <li v-for='item in items' v-bind:class='{finished:item.isFinished}' v-on:click='toggleFinish(item)'>{{item.text}}</li>
- </ul>
- </div>
- <script>
- var app=new Vue({
- el:'#app',
- data:{
- title:'My todo list',
- items:[
- {
- text:'Learn CSS',
- isFinished:true
- },
- {
- text:'Learn javascript',
- isFinished:false
- }
- ],
- newText:''
- },
- methods:{
- toggleFinish:function(item){
- // console.log(item.isFinished);
- item.isFinished=!item.isFinished;
- },
- //3、输入后按enter键盘的事件
- addNewlist:function(){
- var _self=this;
- //3.1 如果不为空就将刚刚输入的内容以对象的形式,追加到items数组对象内部,
- //默认新追加的是没完成的为false
- if(_self.newText){
- _self.items.push({
- text:_self.newText,
- isFinished:false
- });
- }
- // console.log(_self.newText);
- // console.log(this);
- //3.2 同时清空input输入框
- _self.newText='';
- }
- }
- });
- </script>
- </body>
- </html>
目前只能输入按 entry 追加一个选项
本文转载自:http://www.cnblogs.com/-walker/p/6230651.html
来源: