IMWeb训练营作业【Vue 完成一个TodoList小玩意儿】

最新推荐文章于 2024-04-08 15:45:39 发布

铛铛铛铛Huan

最新推荐文章于 2024-04-08 15:45:39 发布

阅读量820

点赞数

分类专栏： Vue JavaScript 文章标签： Vue javascript

本文链接：https://blog.csdn.net/u010046318/article/details/70245064

版权

JavaScript 同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

Vue

8 篇文章 0 订阅

订阅专栏

这是参加Vue课程的第四天，上了四节课之后对Vue的原理以及用法有了基本的了解，并跟着老师做了一个ToDoList的东西。在学习过程中，感触最深的是：与原生js 或者jQuery 不同，Vue完全是数据驱动的一个JS框架，即所有页面的改动，都要考虑如何与数据绑定并且如何去操作数据，从而改变页面的视图。

首先，说一下这个ToDoList的功能：

界面如下图所示：

没有添加任务时：

添加了任务之后：

在图中的输入框可以输入任务，回车之后就会添加到下方的任务列表中；

在任务列表中，可以勾选表示任务已完成，勾选之后任务被划掉；

也可以点删除按钮，删除之后任务列表中就不存在该任务了;

双击任务之后还可以编辑，可通过编辑动态改变任务名称。

思路：

Vue是数据驱动的框架，因此考虑到页面有动态变化的地方都要思考如何去绑定数据？

比如，输入框input的输入数据，可以用v-model来进行数据的双向绑定;

列表的数据可以将其存在一个数组中，然后用v-for指令来渲染到<ul><li></li></ul>中；

当添加了任务之后，“XX个任务已添加”也需要动态改变。

Show you the Code:

<body>
    	<div id="title">
    		任务计划列表
    	</div>
    	<div id="demo">
    		<p id="insert">添加列表</p>
    		<input id="content" type="text" v-on:focus = "clc()" @keyup.13 = "handle($event)"  v-model = "message" />
    		<div id="tip" v-show = "list.length">
    			<span id="Num">{{itemNum}}个任务已添加</span>
    			<span v-bind:class="{tips: true}">所有任务</span>
    			<span v-bind:class="{tips: true}">已完成任务</span>
    			<span v-bind:class="{tips: true}">未完成任务</span>
    		</div>
    		<div id="lis" v-show = "!list.length">还没有添加任何任务</div>
    		<!-- <span >还没有添加任何任务</span> -->
    		<ul>
    			<li v-for = "item in list">
    			<input type="checkbox" v-model = "item.isChecked" />
    			<span v-show = '!item.ifEdit' id="item" :class="{completed: item.isChecked}" v-on:keyup.13 = "change(item, $event)" v-on:dblclick = "test(item)">{{item.title}}</span>
    			<input 
    			v-focus = "item.ifEdit" 
    			type="text" 
    			v-show = "item.ifEdit" 
    			v-model = "item.title"
    			@blur = "recover(item)" />
    			<input id="btn" type="button" v-model="btnval" v-on:click = "del(item)" />
    			</li>
    		</ul>

    	</div>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>        <!-- 引入vue.js -->
        <script>
        	//数据
        	
        	var list = [

        	];
        	
        	var data = {
        		message: "例如：吃饭睡觉打豆豆   提示 + 回车即可添加任务",
        		itemNum: 0,
        		list : list,
        		btnval: "删除",
        		Ifcheck : false,        //可以利用它来实现全选
        		ifShow: true,
        		todoes : ""        //编辑的数据
        	}
        	//实例
        	var vm = new Vue({
        		el: '#demo',
        		data: data,
        		methods: {
        			test : function(){
        				alert("Yes");
        			},
        			clc : function(){
        				this.message = "";
        			},
        			handle : function(e){
        				//按下回车，将input里面的数据push到list里面，然后一一渲染list里面的数据
        				if(this.message)
        				{
        					this.list.push({title: this.message, isChecked : false, isShow: true, ifEdit: false});
        					this.itemNum++;
        				}
        				this.message = "";
        				

        			},
        			del : function(e){  //找到item是在list 中的第几项，然后删除该项就可以
        				/*console.log(e);
        				e.isShow = false;*/
        				var index = this.list.indexOf(e);
        				this.list.splice(index, 1);           //splice不是原生的js，这个会触发视图更新的
        			},
        			test : function(e)
        			{
        				e.ifEdit = true;
        				this.todoes = e.title;
        			},
        			change : function(data, e){
        				/*console.log(e.type);
        				console.log(data.ifEdit);*/
        				e.ifEdit = false;
        			},
        			recover : function(e)
        			{
        				e.ifEdit = false;
        			}
        		},
        		//要使得新增加的input文本框获取焦点，需要自定义指令
        		directives: {
        			'focus' : {
        				update(el, binding){
        					console.log(el);
        					console.log(binding);
        					if(binding.value)
        					{
        						el.focus();
        					}
        				}              //钩子函数update函数，表示在input 框中的内容发生变化更新时，执行
        			}
        		}
        	});

        </script>

    </head>
    </body>

存在的问题：

利用自定义指令来实现当双击任务时，使得显示的Input框获取焦点。

首先在选项对象中添加directives属性，定义focus:{ update : function(el , binding){ if(binding.value) { el.focus(); } } }

然后在 input 中设置 v-focus属性为true ，但并不会在input上获取焦点，不知道是什么情况？