vue基础学习

打开命令行：

npm run dev

 

el是目的地

render是渲染内容

 

人物信息的增删：

main.js:

index.html:

app.vue:

运行结果：

 

 

 

app.vue本身就是一个组件，在组件内使用组件

app.vue是父组件

子组件：

app.vue:

子组件：

body.vue:

header.vue:

footer.vue:

运行结果：

 

 

全局组件：

只需要在main.js中引入一次并声明，使用'vue.component('组件名'，'组件对象')；'

所有的组件都可以直接通过组件名使用全局组件

main.js:

 

 

 

父组件传递值给子组件

1：传递常量

在父组件app.vue中：

在子组件header.vue中：

textone名字要一致

 

2：传动态的值：

父组件app.vue中

子组件body.vue中接收  需要在props中声明

 

 

 

vueBus的通信使用实现子组件通信父组件：

connector.js：

app.vue:

sub.vue:

运行结果：