vue之cli脚手架项目中组件的使用

在webpack-simple模板中，包括webpck模板。一个.vue文件就是一个组件。

 为何会这样呢？由于webpack干活了！webpack的将咱们全部的资源文件进行打包。同时webpack还能将咱们的html（template）、css、js文件经过模板编译的方式将这些文件打包成一个.vue的文件。

为何在vue-cli项目中能使用.vue的文件？

好比有这以前的一个自定义的组件：

    Vue.component('app-header', {
        template: '<div>A custom component!</div>'
    })

咱们能够把template提取出来，例如：

<script type="text/x-template" id="head-template">
  <div class="head">
    <h1>{{ title }}</h1>
  </div>
</script>

Vue.component('app-header', {
    template: '#head-template',
    data: {
        title: '我是头部'
    }
})

若是是这样的去写咱们的组件的话，太复杂了，后期还很差去维护。可能你们如今还感受不出来，若是写更多功能或者用到组件时会相互嵌套，那就更加的麻烦了。还好官方推出的vue-cli工具，基本不用任何的额外的代码，很快的就能够构建出一套完整的环境。

<template>
  <div class="header">
    <h1> {{ title }} </h1>
  </div>
</template>

<script>
  export defualt {
    data: function() {
      return {
        title: '我是頭部'
      }
    }
  }
</script>

<style>
  .header {
    color: red;
  }
</style>

上面代码 有三部分，template标签中就是咱们要写的组件结构，script标签中就是咱们要写的业务逻辑，style标签中就是咱们要写的该组件的样式。这三部分，咱们经过vue-loader这个插件，将这三部分共同组合成了一个.vue文件。咱们称这种.vue的文件就是一个组件。

另外上面的代码，咱们发现有个export default语法，其实呢，这个东西，跟咱们的python模块化有点相似。在es6 Module中，webpack这个工具经过babel-loader这个loader将咱们的es6 Module语法进行解析，从而让咱们的export default语法和import 'xxx'语法在浏览器中识别。

咱们总结一句话：export default xxx 就是抛出一个模块（一个js文件就是一个模块)， import 'xxx' from 'aaa'就是从刚刚抛出的文件路径中，导入此模块。有import就必定有export default.

 

接下来咱们我编辑器中打开咱们的项目目录，查看一下结构：

打开src文件夹，咱们先从项目的入口文件main.js文件：

那么接下来咱们就关心去书写App.vue组件中定义的内容就能够了。

你们一开始学习呢，先将App.vue文件中的内容所有删掉，跟着我一块儿书写里面的主要内容。

在该组件中，咱们能够书写三部分，就是以前我们学习的HTML、CSS、JS.

<template>
  <!-- 该组件的模板结构（HTML） -->
</template>
<script>
  // 该组件的DOM操做
</script>
<style>
/*该组件的样式属性*/
  
</style>

由于在main.js中有：

import App from './App.vue'

因此，咱们必须在当前组件中写入export default,那么后面的书写就是用到了我们以前的学习的语法。

在script

 export default {
    name:'App',
    data(){
      return {
        //必须是一个函数，要有返回值，返回空对象也是有返回值
      }
    }
  }

在template中

<!--必定是闭合标签-->
<div class="app"> 
      <h3>{{ msg }}</h3>
</div>

若是此时你的命令行工具仍是保持开启的装备的，那么你会发现以下页面：

若是没有重启项目，请再次执行以下命令启动项目：

npm run dev

 

那么接下来咱们就能够在App.vue组件中将咱们以前学习到的知识运用进来。

好比咱们的指令系统：

1. v-if  条件渲染
2. v-show  显示隐藏
3. v-for  遍历多条数据
4. v-bind   绑定属性
5. v-model   表单控件的数据双向绑定
6. v-on  绑定事件
7. v-html  渲染html标签元素

咱们还可使用实例对象的方法：

1. 计算属性的computed方法来监听属性
2. methods方法中声明事件的方法
3. .......