组件
1、概念：组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
2、定义方式
// 全局定义 所有vue实例都可以调用该组件
Vue.component('one',{
template:`<div>
<h1>我是one的题目</h1>
<p>我是one的内容</p>
</div>`
})
new Vue({
el:'#app',
// 局部定义 只有当前vue实例才可以调用该组件
components:{
hello:{
template:'<h3>哈哈哈，我是一个局部组件</h3>'
}
}
})
3、组件命名
1、不能以已经存在的标签命名。eg：div span a b em
2、也不能以已经存在的标签大写命名。eg：DIV SPAN A B EM
3、如果组件名称中有大写字母，调用的时候要改成-小写。 烤串写法
4、当首字母就是大写的时候，那么就直接改成小写
5、推荐组件名称中至少包含一个大写字母。eg：webNav webBanner
template
1、如果定义了template选项，那么就不会加#app里面的内容，而是将template中的内容直接渲染到页面中
2、在template中最外层只能有一个根标签
3、我们可以借助template标签来定义，template标签仅仅是一个模板占位符，并不会展示在页面中
4、在写template的时候，不要考虑其他的，就考虑正常在页面中怎么写，那么在template中就怎么写
data
data是一个返回对象的函数，这样设计的目的是因为，组件是为了重复调用，但数据又要互相隔离。如果定义成一个对象的话，就会一变全变，所以得定义一个函数，封闭空间。实现了展示的效果一样，但数据又互相不影响。
脚手架安装
// 全局安装webpack
npm i webpack -g
// 全局安装vue脚手架
npm i vue-cli -g
// 创建项目
vue init webpack demo
// 进入项目
cd demo
// 启动项目
npm run dev
脚手架文件夹
-demo 项目文件夹
-build 打包配置
-config 启动项目的配置项
-dist 打包以后的文件
-node_modules 依赖包
_static 静态资源 img rem.js reset.css
.babelrc es6->es5
.editorconfig 编辑器配置
.gigignore 不用上传到github的代码
.postcssrc.js 处理css兼容
index.html 页面
package.json 启动命令 打包命令 依赖包
README.md 说明
_src
启动命令npm run dev
打包命令npm run build
脚手架中组件定义
//全局组件(在main.js中)
import vNews from "路径"
Vue.component("组件名",vNews)
//局部组件(在各自的组件中)
import vChild from "路径"
export default{
components:{
vChild
}
}
面试题
1、组件中的data为什么必须是函数？
2、vue-cli中怎样定义和使用组件？
3、列举vue-cli项目目录中文件夹和文件的用法？
