1天搞定SpringBoot+Vue全栈开发 (6)组件化开发

news2024/10/7 16:23:01

1.NPM使用

2.Vue CLI使用

3.组件化开发

修改App.vue：

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <Hello></Hello>
</template>

<script>
import Hello from "./components/Hello.vue";

export default {
  name: "App",
  components: {
    Hello,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Components里添加Hello.vue

<template>
    <h1>hello</h1>
</template>
<script>
</script>
<style></style>

测试：（可以复用组件Hello，输出多个“hello“）

3.1第三方组件element-ui

创建vue2项目

Vue create component-demo

App.vue:

<template>
  <div id="app">
    <Movie></Movie>
  </div>
</template>

<script>
import Movie from "./components/Movie.vue";

export default {
  name: "App",
  components: {
    Movie,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Movie.vue:

<template>
  <div>
    <h1>金刚狼</h1>
  </div>
</template>

测试：

或者Movie.vue：

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

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

或者Movie.vue：

<script>
export default {
  name: "Movie",
  props: ["title"], //App.vue传递title（金刚狼）
  data: function () {
    return {};
  },
};
</script>

App.vue:

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

多个元素：

Movie.vue:

<template>
  <div>
    <h1>{{ title }}</h1>
    <span>{{ rating }}</span>
  </div>
</template>

<script>
export default {
  name: "Movie",
  props: ["title", "rating"], //App.vue传递title（金刚狼）
  data: function () {
    return {};
  },
};
</script>

App.vue:

<template>
  <div id="app">
    <Movie title="金刚狼3" rating="9.0"></Movie>
  </div>
</template>

一个movie组件：

Movie.vue：

<template>
  <div>
    <h1>{{ title }}</h1>
    <span>{{ rating }}</span>
    <button @click="funSc">点击收藏</button>
  </div>
</template>
<script>
export default {
  name: "Movie",
  props: ["title", "rating"],
  data: function () {
    return {};
  },
  methods: {
    funSc() {
      alert("收藏成功");
    },
  },
};
</script>

App.vue:

<template>
  <div id="app">
    <Movie
      v-for="movie in movies"
      :key="movie.id"
      :title="movie.title"
      :rating="movie.rating"
    ></Movie>
  </div>
</template>

<script>
import Movie from "./components/Movie.vue";

export default {
  name: "App",
  data: function () {
    return {
      movies: [
        { id: 1, title: "金刚狼1", rating: 9.1 },
        { id: 2, title: "金刚狼2", rating: 9.2 },
        { id: 3, title: "金刚狼3", rating: 9.3 },
      ],
    };
  },
  components: {
    Movie,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

测试