Vuejs组件化开发todo应用
打赏作者

braveone

课程视频前面的图片都好绚啊!

braveone

把程序放到tomcat的webapps目录下,启动tomcat来发布,和直接在浏览器中访问html文件效果一样啊,不是必须要发布吧?

524360073

如果使用多个task-app,点击的时候三个组件中的task都设置completed了,如何实现点击一个设置一个task为completed?

JellyBool 回复 524360073

怎么会呢?三个 task-app 对应三个 task,每个 task 都有自己的 completed 状态。你 点击一个设置 的时间修改点击的那个就好了

524360073 回复 JellyBool

嗯,原来是直接复制,然后三个task一样,所以一起修改了。

zhuanglong

怎样设置每个app-task的完成状态都是独立的?

dairenqiang

用v2.2.0的包跟着您的视频后面练习 怎么好多都走不通报错呢 换1.0的又好了

JellyBool 回复 dairenqiang

这个教程就是 1.0 的教程啊

dairenqiang 回复 JellyBool

好的谢谢 vue.js v2.2.0是不是用法有很大差别?

JellyBool 回复 dairenqiang

还是挺大的啊。

dairenqiang 回复 JellyBool

非常感谢你的回复解答

lpf260

·

        </task-app>

·
老师您好,将数据绑定在这里面,之后再点击文字,为什么加不上line-through属性呢

zhouxiaomin 回复 lpf260

因为你的vue版本太高, 你试下

<script src="https://cdn.bootcss.com/vue/1.0.4/vue.js"></script>
奇妙能力者

最后的地方复制task-app的时候如果直接把数据写在模板里面,那个点击事件绑定不上,后来测试了几次发现只有再在data里面建一组数据才可以,请问下这个原因是什么?

Alex-Sgy

为什么像老师那样直接传递一个数组时,点击执行函数后无法修改task.completed的值,而像tasks那样写在data里再传入的时候就可以?

wongvio

请问我这个,不报错,也不显示,是哪的问题,vue版本1.0.28

<div class="container" id="app">
			<task-app></task-app>			
		</div>
		<template id="task-template">
			<ul>
				<li 
					@click="toggleTasks(task)" 
					:class="{'completed':task.completed}" 
					v-for="task in tasks"
				>
					{task.body}
				</li>
			</ul>
		</template>
		<script>			
			Vue.component('task-app',{
				template:'#task-template'
			});
			new Vue({
				el:'#app',
				data:{
					tasks:[
						{body:'1211111',completed:false},
						{body:'2222222',completed:true},
						{body:'3333333',completed:false}
					]
				},
				methods : {
					toggleTasks : function(task) {
						task.completed = ! task.completed;
					}
				}
			})
		</script>
JellyBool 回复 wongvio
Vue.component('task-app',{
				template:'#task-template',
                               data:{
					return {
                                           tasks:[
						{body:'1211111',completed:false},
						{body:'2222222',completed:true},
						{body:'3333333',completed:false}
					]
                                    }
				},
				methods : {
					toggleTasks : function(task) {
						task.completed = ! task.completed;
					}
				}
	});
new Vue({
   el:'#app'
})

浅月梦漪

老师您好,我在另外一个文件中想用这个组件该怎么调用?前面几节好像说可以,但是没有说该怎么调用,想了解一下

JellyBool 回复 浅月梦漪

import 进来就好了吧

flowerxuegao

哪里有vue2.0的相关学习视频啊

JellyBool 回复 flowerxuegao

codecasts 这里就有,不过需要收费的而已

flowerxuegao 回复 JellyBool

哦哦,怎么收费啊

JellyBool 回复 flowerxuegao

因为视频都是我录的,需要花时间和精力

baowenlong

你说的那个服务器打开,哪个服务器怎么打开