1、vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板
2、搭建步骤
全局安装
cnpm install vue-cli -g
vue -V 检测版本
实例化一个项目
vue init webpack 项目名称
依赖包下载
cnpm install
组件 组件是根据ui界面来划分的功能单位,组件可以分为两种 基础组件和功能组件
基础组件就是页面中认为是大的分割单位或者静态的页面单位 功能组件实现某些特定功能的组件 后期可以积累和复用
组件的开发的好处
1、组件可复用
2、提高代码的可维护性
3、简单高效
组件分为三部分 结构 逻辑行为 样式
在vue实例上的选项对象都可以在组件上使用
data methods computed watch filter directives
但是在组件中data必须是一个函数还得有一个return返回的对象
在父组件中引用子组件
1、需要将文件引入到父组件中
2、需要将引入的子组件挂载到父组件上
3、需要将子组件的标签在父组件的结构中体现出来
组件通信:
父传子
1、在父组件上的子组件标签上绑定一个属性,将要传输的变量挂载到这个属性上
:属性名=“要传输的变量”
2、在子组件上通过props来接受这个数据,接受的数据可以直接使用
接受格式 props:["属性名"]
```javascript
子传父:
1、在父组件上定义一个方法,在父组件的子组件标签上绑定一个自定义事件,挂载刚才定义的方法
2、在子组件上定义一个方法,来通过this.$emit("自定义事件",要传输的数据)来调用这个方法,通过参数的形式传递数据
兄弟:
1、如果有共同的父组件,我们就可以采用先子传父,然后在父传子
2、bus总线传值(采用的是事件派发和事件监听的方式)
1、在src目录中新建一个bus.js,在这个文件中要导出一个空的vue实例
2、在传输数据的组件中引入bus.js,通过Bus.
e
m
i
t
(
"
事
件
名
"
,
要
传
输
的
数
据
)
来
派
发
事
件
3
、
在
接
受
数
据
的
组
件
中
引
入
b
u
s
.
j
s
,
通
过
b
u
s
.
emit("事件名",要传输的数据)来派发事件 3、在接受数据的组件中引入bus.js,通过bus.
emit("事件名",要传输的数据)来派发事件3、在接受数据的组件中引入bus.js,通过bus.on(“自定义事件”,(res)=>{
res就是要接受的数据
})来监听事件