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">
      
      <songlist-col2 :results="songlists">songlist-col2>
    div>

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

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

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

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