springboot和vue：十、vue2和vue3的差异+组件间的传值

首先用vue-cli创建一个vue2的项目。

vue2和vue3的差异

main.js的语法有所差别。

vue2是

import Vue from 'vue'
import App from './App.vue'new Vue({render: h => h(App),
}).$mount('#app')

vue3是

import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

自定义组件的template有所差别

vue2自定义组件的template中所有标签必须在同一个父标签下，即只有一个根标签。所以一般写的时候都写一个div标签包裹着。
vue3没有该限制。

组件间的传值

内部data提供数据

譬如现在自定义了一个Movie组件，上面的template从下面的script中导出的data中拿值。

<template><div><h1>{{ title }}</h1></div>
</template><script>
export default {name: "Movie",data: function () {return {title: "金刚狼"}}
}
</script>

父组件通过prop的方式传值。

自定义Movie组件中是这样的代码

<template><div><h1>{{ title }}</h1></div>
</template><script>
export default {name: "Movie",props: ["title"],data: function () {return {}}
}
</script>

使用Movie的父组件（一般都是App.vue）即可在使用Movie标签的同时直接传值

<template><div id="app"><Movie :title="金刚狼" ></Movie></div>
</template>

兄弟组件通过Vuex等统一数据源共享数据

在后面的博客会详细介绍。

element ui

Element是国内饿了么公司提供的一套开源前端框架，简洁优雅，提供了Vue、React、Angular等多个版本。

• 文档地址：https://element.eleme.cn/#/zh-CN/
• 安装：npm i element-ui
• 引入 Element：
  

第三方图标库

Font Awesome提供了675个可缩放的矢量图标，可以使用CSS所提供的所有特性对它们进行更改。

• 文档地址：http://fontawesome.dashgame.com/
• 安装：npm install font-awesome
• 使用：import ‘font-awesome/css/font-awesome.min.css’