打赏作者

初探Vuejs组件化开发

Vuejs 系列教程 >> 初探Vuejs组件化开发视频发布于 2016-01-14

Vuejs组件化开发给我们的代码重用带来了诸多的便利性，理解Vuejs的组件化可以类比如oop编程的思想，举一反三

登录并参与讨论

8年前

good job

8年前

nice！！

8年前

well done

8年前

讲的很好，不错的入门教程

8年前

really good

8年前

so cool,so amazing!

JellyBool 回复 yanlee26

8年前

感谢支持。哈哈

8年前

有源码分享吗，课堂源码；有就更好了。到1393273899@qq.com

JellyBool 回复 yanlee26

8年前

没有，这里的视频都不提供源码。偷懒，在这一行学不好。

yanlee26 回复 JellyBool

8年前

好，哈，写来也快哈哈

8年前

why are you so diao? (～￣▽￣)～

8年前

喜欢老师的声音，和风格！努力学！

JellyBool 回复仔仔_郎

8年前

感谢支持，哈哈

8年前

感谢分享。不过，能不能稍微注意一下代码格式.

8年前

很实用，谢谢分享。

8年前

** 老师讲的好啊 **

8年前

#厉害了我的哥

8年前

使用Vue2.0的童鞋注意了:

在创建<template>模版时，需要把所有的内容归在一个节点下，如<div>(每个组件有且仅有一个根节点。不再支持片段实例)
由于Vue2.0不支持属性内部计算插值，故style="backgroud:{color}"无效，应当用v-bind:style="'background:'+color"

最后感谢老师给我们带来这么好的教程^^

JellyBool 回复 Rubicker

8年前

厉害了 word 哥。这个评论非常赞啊！

xiaoli123 回复 Rubicker

8年前

赞，认真回复是个好习惯

ShareQiu1994 回复 Rubicker

8年前

我还以为怎么不起作用了。原来是这样谢谢解答！

bloodangel 回复 Rubicker

8年前

6666666,刚好遇上,谢谢啦

iyunge 回复 Rubicker

8年前

厉害了我的哥 ,我还找了半天原因原来这里就有解释~

daoyi 回复 Rubicker

7年前

啊我纠结了好久-.-

lpf260 回复 Rubicker

7年前

谢谢大兄弟，一直以为自己写错代码了

zhoujingang 回复 Rubicker

7年前

大兄弟，我爱你

__RAX__ 回复 Rubicker

7年前

哈哈哈哈，原来如此，感谢！

723tree 回复 Rubicker

7年前

怪不得我的按钮老是出不来，郁闷了半天，感谢提醒~~

liupengpo 回复 Rubicker

6年前

这么说吧，当我写到style="backgroud:{color}"无效的时候，我就知道，Vue2.0又动了手脚，认真看完视频，过来看评论就知道为毛了，果然！谢谢！

8年前

good job too!

8年前

it’s cool!!

溜着哈士奇去看雪

8年前

~
<button @click=“count+=1” class="{}" >点赞{ count }
本来想设class为属性变量，配合bootstrap使用的，可是class=‘’{xxx}‘’不行的

liupengpo 回复溜着哈士奇去看雪

6年前

做了个测试：

//counter组件加sclass属性

//button按钮加v-bind:class=“sclass”
<button @click=“count += 1” v-bind:style="'background: '+color" v-bind:class=“sclass”>{ count }
//注册组件时，加上sclass就可以实现props: [‘heading’,‘color’,‘sclass’],

溜着哈士奇去看雪

8年前

Word哥什么时候出2.0的教程

8年前

nice!!

8年前

首先很感谢您的视频，其次我想问一下现在的vue.js2.0版本可以看你这个视频吗？或者说变化大吗？

JellyBool 回复 kseven

8年前

变化还是有点，2.0 的视频我下午就上传。

kseven 回复 JellyBool

8年前

好的，谢谢。在线等哟0.0

8年前

清晰，不拖泥带水，支持老师

8年前

这种方法只能用于vue1.0版本的，vue2.0版本会显示不出来

8年前

讲得非常好呢，喜欢

8年前

你的main.css文件哪里下载？？能给我一份吗？ 282821010@qq.com

JellyBool 回复 yaoye6262

8年前

这个好像还真没有，之前的一些项目代码都不知道丢哪里去了。后来才知道备份。

你这个直接自己写 css 就好

yaoye6262 回复 JellyBool

8年前

好的谢谢！！！

8年前

<div id="app">
	<counter></counter>
	<counter></counter>
</div>
<template id="counter-template">
	<h1>hello</h1>
	<button>Submit</button>
</template>

爱恋冬天的夏天回复 linjixue

8年前

我的也是你解决了吗？

young2 回复 linjixue

7年前

vue模板只能有一个根对象，在模板的2个元素外边套个div就行了

Dreamsky_xiaojia 回复 young2

6年前

我也遇到过这个问题，最后查了一下，vue只能是单根，然后套了div就好了

8年前

good job 。

8年前

老师你太逗了。。。666

JellyBool 回复 Alice0929

8年前

还好吧。。。风格不一样而已

7年前

特别傻 b 的人的反对…哈哈哈哈

7年前

瞬间感觉jquery有点辣鸡啊 : ）

7年前

这个视频播放不了

7年前

这集提示无法播放视频，请换一个支持HTML5视频功能的浏览器，在mac上的，麻烦处理一下～

JellyBool 回复 wjlight

7年前

我已经刷新资源了，再看看

7年前

支持支持！大拇指

JellyBool 回复 noikiy

7年前

感谢支持啊！

7年前

感谢您的视频教程

JellyBool 回复 yuanchang

7年前

啊哈哈哈！感谢支持啊！

7年前

awesome video

JellyBool 回复 javajump

7年前

Aha, Thanks bro!

7年前

版本不一样~唉

JellyBool 回复 lygkkk

7年前

直接使用 2.0 吧，，，

7年前

在script中，template后面跟class的名称为什么不显示，也不报错，是版本问题吗？我是小白谢谢啦

JellyBool 回复 lr1049386573

7年前

直接看 vue 2.0 的视频吧

7年前

老师讲的好好哦，哈哈，声音好好玩。

JellyBool 回复 723tree

7年前

hhh。。。感谢支持

7年前

谢谢老师的视频，很是受益；
在看视频的同时也跟着码了一下代码；
Vue 2.5.13的版本中
可以在

 template:'<button v-on:click="counter += 1 ">{ counter }</button>',

中设置 v-on:click
但是不知道怎么设置button的颜色，用 style="'background:'+color"没有实现功能
希望老师可以帮忙解答一下，谢谢！

liupengpo 回复 vuue

6年前

<button @click=“count += 1” v-bind:style="'background: '+color">{ count } 另外{ count }是两队大括号

6年前

确实讲的很好，很棒

JellyBool 回复 baowenlong

6年前

哈哈哈，感谢支持！

6年前

这里报错了，当template里面有两个块级元素时，会报错，并且只显示一个。错误提示：Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

Dreamsky_xiaojia

6年前

我按照您教的做，为啥效果不一样，还有就是我这个button颜色样式渲染不了，是不是兼容有问题？