Vue.js初次尝试，组件起步（四）
2017-03-14 本文已影响103人
葉糖糖
随着时间流逝，我们的耳边会听到越来越多的名词例如：响应式、优雅降级、渐进增强、模块化、组件化......不管是约定、规则、标准或者方式、方法、技巧，作为实际的开发者首先关心的应该是，这样做适合目前的项目么？目前在开发过程中存在哪些弊端，给实际开发带来了哪些麻烦？然后再去对比别人提出的解决方式，为自己解决了哪些麻烦。最后深入理解最终的本质。
一、关于组件化
1、组件化有什么好处？方便管理、可重用。
2、什么是组件？可以理解为积木或七巧板中可重用的那些部分，Vue.js中的组件也就是封装的可重用的代码。
3、为什么要组件化？节省时间，早点下班、陪家人、陪妹子。
4、一定要用组件么？你的项目你做主，想用就用，不想用就不用。
5、不用组件化，还需要往下看么？当然，不用，不代表不需要会。
......
二、改造图片展示Demo
科目：Vue.js组件学习与使用
目的：快速的了解和使用Vue.js的组件；
方法：跟随文档，编写代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js组件起步</title>
<!--引入Vue.js核心文件-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--这是一个自定义的组件（标签）-->
<my-img v-for="image in imgs" v-bind:myattr="image"/>
</div>
</body>
<!--编写业务脚本-->
<script>
//告诉Vue.js，我要声明一个组件叫my-img
Vue.component('my-img',{
//指定一个属性叫myattr，用来做数据绑定
//敲黑板，重点，貌似不支持myAttr这种写法
props:['myattr'],
//这里指定组件的内容，想添什么添什么
template:''
})
//声明变量并创建Vue实例
var app = new Vue({
//指定挂载元素
el: '#app',
//数据对象
data: {
imgs:[
{imgSrc: 'resource/001.png '},
{imgSrc: 'resource/002.jpg '},
{imgSrc: 'resource/003.jpg '}
]
}
})
</script>
</html>
PS:结束啦，没错结束了。想说的已经写在了注释里，┭┮﹏┭┮。如果你也不想写代码，就想看看，那就到https://git.oschina.net/yetangtang/Spring下载代码，跟之前的学习时候的html5的例子在一起。
