Vue.js起步实践--不用webpack或vue全家桶情况下开始动手写一个小组件

-本来在四月份就准备来学习vue.js这个框架（听过不少同学对vue.js赞不绝口以及vue.js现在越来越火都让我很感兴趣）。然后由于最近在忙项目跟着一个创业的师兄做网站，实在抽不出时间学。

-就这样我还是零零散散地花了些时间看了看vue.js的官网

[–这里推荐大家还是到官网上进行vue.js的上手，毕竟官网的教程有利于打好基础，也比较纯粹；但是具体实践就看个人习惯了。]

-但是之前都只是看教程，也没有什么真正的实践，同时还看了网上一些关于使用vue+vuex+vue-router+vue-cli脚手架进行项目构建的例子，还真觉得有点懵逼。

-这里提一下个人看法：学东西还是一步步来，循环渐进，所以我现在没有打算直接去熟悉webpack等构建工具去构建项目，也还没有能那么快去熟悉。

-我还是用script标签直接引入的方法去进行一次小尝试，途中遇到了一些小错误，因此这里想写一篇博客记一下…[第一次写，正好以后养成习惯吧]

-唠叨这么久，进入主题…

今天写代码的时候参照了一篇文章，觉得写得很详细，先贴出来

使用Vue.js和Axios从第三方API获取数据 — SitePoint

–博主是最近在做一个作业，我选的是一个仿网易云的音乐播放器，趁此机会想学习Hybrid的开发；再者加上最近一直想学vue.js，所以就前端框架中加上了vue.js（这里我引入的是vue.min.js，对开发者比较友好）

–1.引入文件：（主要还是看自己的文件结构，相信如何引入不用博主再说明了吧）

<script src="../js/vue.min.js"></script>
<script src="../js/custom/songlist.js"></script>

–这里我其实还有一个js文件–vue-components.js，用来写全局注册组件的代码。

–好！接着开始写自己的代码。

–2.在vue-components.js文件中，写注册全局组件的js代码，关于全局组件，可查看官网或自行百度~

Vue.component('songlist-col2', {
template: ‘<div>I am built by component’
}
});

–这是一个很简单的组件，没有任何跟数据有关的操作，但是说明了一个组件该以什么形式来注册。（这种方法注册的是全局组件，也可以注册局部组件）

–3.在songlist.js文件中，我先是对vue-components,js文件进行了引入：

document.write("<script src='../js/custom/vue-components.js'></script>");

（再次说明：主要看自己的文件结构，我这里的引入的语句最后还是会渲染到html页面，所以这个地址也是根据html页面的位置来进行相对引入的[你也可以使用绝对路径，那样比较稳…]）

–然后我开始写我的代码：

//使用组件，进行页面内容渲染
const songlsitVm = new Vue({
el: '#sl-container'
});

（关于上面这个 new Vue() ，如果看不懂的，应该还是要先熟悉熟悉最基础的vue.js语法…）

—一个相当粗俗的补充说明–这里我的html页面的东西是这样的：

<div id="sl-container">
<songlist-col2></songlist-col2>
</div>

（嗯…这里的自定义标签的名字就来自上面注册控件时的第一个参数…）

–4.到这里其实就讲完了，一个vue.js的组件就是这么容易处理。但是现实中我们不会遇到这么容易处理的组件，总会需要有数据。

下面我进一步进行一些数据的扩展：

–2.1.我实际注册的组件是这样的：

Vue.component('songlist-col2', {
props: ['results'],
template: '<div>\
<div class="row sl-songlist" v-for="songlists in processedSonglists">\
<div class="col-xs-6" v-for="songlist in songlists">\
<div class="sl-songlist-img">\
<!--播放量-->\
<span class="sl-songlist-count">\
<span class="glyphicon glyphicon-headphones" aria-hidden="true"></span>\
{{songlist.count}}\
</span>\
<!--歌单照片-->\
<img :src="songlist.img">\
<!--创建者-->\
<span class="sl-songlist-creater">\
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>\
{{songlist.creater}}\
</span>\
</div>\
<p class="sl-songlist-title">\
{{songlist.title}}\
</p>\
</div>\
</div>\
</div>'
,
computed: {
processedSonglists() {
// console.log(Object.prototype(this.results));
let lists = this.results;
//将数组切割成多个块，对应多个行
let i, j, chunkedArray = [], chunk = 2/*这里的2表示最后分成2列*/;
for (i = 0, j = 0; i < lists.length; i += chunk, j++) {
chunkedArray[j] = lists.slice(i, i + chunk);
}
console.log('lists length=', lists.length);

return chunkedArray;
}
}
});

—props：用来与父容器进行通信，获取父容器传进来的数据[mark-1]，下面进一步补充说明;

—template：你的组件的具体内容（样式具体由css负责，即博主上面的代码里面的class）；这里提醒一下，注意那个单引号 ’ 和反斜杠 \ 的使用…

—computed：计算属性，是用来对数据进行一定的操作，关于computed的好处，也还是直接查看官网~

（一个组件还是有其他的属性/对象的，但是我这里实现的过程中没有使用到加上自身也没有很深入了解，就不再说明了）

–3-1.我实际写的vue实例是这样的：

//使用组件，进行页面内容渲染
const songlsitVm = new Vue({
el: '#sl-container',
data: {
//这里的results要跟html文件中使用组件的数据绑定的名称对应
songlists: [],
},
mounted () {
this.getSonglists();
},
methods: {
getSonglists() {
var lists = /**/;
this.songlists = lists;
}
}
});

—这里是封装了一个方法getSonglists()给methods对象，并在mounted对象中调用，mounted是会在页面加载完html内容后进行数据的加载和挂载

—这里的lists我是用一个JSON格式的数组去模拟数据[关于JSON可直接百度]，具体实际情况是需要进行联网操作的（vue官方推荐的是使用axios进行异步操作，具体可自行百度教程[嗯因为我也还没有很熟悉不能误人子弟…]）

—4-1.最后我实际的界面的这样的：

<div id="sl-container">
<!--这里的 :results 的results保持跟注册组件时的 props:['results'] 里的results一致-->
<songlist-col2 :results="songlists"></songlist-col2>
</div>

（嗯其实就是多了一个数据绑定…）

–5.好了到这里这篇博客就结束了，最后是页面的效果



（嗯…具体样式那些就不在这篇博客讨论范围了…）

[第一次写博客，水平也有限，主要是自己记录。如有不对，请指出；但我看情况改改…]