Vue组件

父 传子

App.vue文件中<CounterCom :num="10>

CounterCom.vue组件中

01 接收参数定义默认值

props:{"num":{type:Number,default:1}}

02 使用参数num

data(){return{counter:this.num}}

字传父：使用事件$emit

CounterCom.vue

<button @click="counter++;$emit('counterchange',counter)">

App.vue

<CounterCom @counterchange="n=$event">

$emit(时间名，事件值) 发送一次事件，事件名（counterchange）和事件值（counter）是自定义的

$event 固定写法，事件的值（counterchange事件的值，也是子组件$emit的第二个参数）

Vue脚手架的创建

1 首先安装nodejs .

2 window+r 或者左下角运行 输入cmd命令进入指令

3 npm i -g @vue/cli  如果没有淘宝镜像先安装淘宝镜像

4 下载完毕后 在需要创建项目的地方使用命令 vue create 项目名

5 选择Vue2 的版本 然后配置下载即可

npm cmd 今日总结！

1 全局安装vue脚手架方法：npm i @vue/cli -g

2 cmd中查看当前目录与文件命令：dir

3 cmd切换目录命令？ cd

4 cmd查看本机ip ipconfig

5 npm 初始化项目的命令 npm init

6 更新命令：npm updata

7 卸载命令 ： remove/uninstall

8 npm 安装开发环境插件后续： -D

9 npm安装环境插件需要加：-S

10 全局安装命令加 -g

11 v-if 是直接一处节点隐藏