Springboot04--vue前端部分+element-ui

Springboot04--vue前端部分+element-ui_第1张图片

注意点:Springboot04--vue前端部分+element-ui_第2张图片

 这边v-model和value的区别:v-model是双向绑定的,value是单向绑定

li的key的问题

Springboot04--vue前端部分+element-ui_第3张图片

 vue的组件化开发:

1. NPM(类似maven,是管理前段代码的工具)

Springboot04--vue前端部分+element-ui_第4张图片

Springboot04--vue前端部分+element-ui_第5张图片

 安装完之后可以在cmd里面使用以下指令

2. vue/cl,写vue的时候就不用html去写代码了

Springboot04--vue前端部分+element-ui_第6张图片

 安装好之后,找到你放代码的目录,cmd,然后npm install -g @vue/cli

Springboot04--vue前端部分+element-ui_第7张图片

 新手选第三个,然后取消掉下面这个

Springboot04--vue前端部分+element-ui_第8张图片

 运行项目的代码:

Springboot04--vue前端部分+element-ui_第9张图片

 3. 模块化开发

Springboot04--vue前端部分+element-ui_第10张图片

 Springboot04--vue前端部分+element-ui_第11张图片

Springboot04--vue前端部分+element-ui_第12张图片

 helloword,是自定义的标签

Springboot04--vue前端部分+element-ui_第13张图片

 关于自定义组件的添加:

Springboot04--vue前端部分+element-ui_第14张图片

 4.elementUI

4.1 组件内部传值

Springboot04--vue前端部分+element-ui_第15张图片

现在我们自己创建一个组件Movie.vue

标框的要注意一下哦

 Springboot04--vue前端部分+element-ui_第16张图片

 有个问题,有100部电影不可能创建100个组件,咋办捏?

显然,这个“哈利皮特”不应该由movie自己提供数据,而是谁使用了movie组件,谁提供数据

使用props,自定义属性,外界使用movie标签的时候就可以使用这个属性:

Springboot04--vue前端部分+element-ui_第17张图片

 Springboot04--vue前端部分+element-ui_第18张图片

4.2 element-ui

Springboot04--vue前端部分+element-ui_第19张图片

Springboot04--vue前端部分+element-ui_第20张图片

 fontawesome.com (dashgame.com)

你可能感兴趣的:(Springboot,前端)