完成选项试的组件API

1 year ago · d6823c8996
parent 1d0ed3e3cd
commit d6823c8996
7 changed files with 121 additions and 23 deletions
--- a/demo/component-1.html
+++ b/demo/component-1.html
@ -1,3 +1,5 @@
+<!--全局注册组件-->
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
--- a/demo/component-2/src/App.vue
+++ b/demo/component-2/src/App.vue
@ -0,0 +1,44 @@
+<template>
+  <div>{{ name }}: {{ counter }} {{ obj.title }}</div>
+  <div>{{ twiceTheCounter }}</div>
+  <button @click="action">触发action方法</button>
+</template>
+
+<script>
+export default {
+  // name: "App"
+  props: {
+    name: String,
+  },
+  data() {
+    return {
+      counter: 0,
+      obj: {title: "标题"}
+    }
+  },
+  computed: {
+    twiceTheCounter() {
+      return this.counter * 2
+    }
+  },
+  watch: {
+    counter(newValue, oldValue) {
+      console.log(newValue, oldValue);
+      this.obj.title = "标题变了"
+    }
+  },
+  methods: {
+    action() {
+      this.counter = this.counter + 3;
+    }
+  },
+  mounted() {
+    console.log('mounted')
+  }
+}
+</script>
+
+
+<style scoped>
+
+</style>
--- a/demo/component-2/src/main.js
+++ b/demo/component-2/src/main.js
@ -0,0 +1,4 @@
+import {createApp} from "vue";
+import App from "./App.vue"
+
+createApp(App).mount('#app')
--- a/src/App-org.vue
+++ b/src/App-org.vue
@ -0,0 +1,26 @@
+<template>
+  <img alt="Vue logo" src="./assets/logo.png">
+  <HelloWorld msg="Welcome to Your Vue.js App"/>
+</template>
+
+<script>
+import HelloWorld from './components/HelloWorld.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HelloWorld
+  }
+}
+</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>
--- a/src/App.vue
+++ b/src/App.vue
@ -1,26 +1,44 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div>{{ name }}: {{ counter }} {{ obj.title }}</div>
+  <div>{{ twiceTheCounter }}</div>
+  <button @click="action">触发action方法</button>
 </template>

 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
 export default {
-  name: 'App',
-  components: {
-    HelloWorld
+  // name: "App",
+  props: {
+    name: String,
+  },
+  data() {
+    return {
+      counter: 0,
+      obj: {title: "标题"}
+    }
+  },
+  computed: {
+    twiceTheCounter() {
+      return this.counter * 2
+    }
+  },
+  watch: {
+    counter(newValue, oldValue) {
+      console.log(newValue, oldValue);
+      this.obj.title = "标题变了"
+    }
+  },
+  methods: {
+    action() {
+      this.counter = this.counter + 3;
+    }
+  },
+  mounted() {
+    console.log('mounted')
  }
 }
 </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 scoped>
+
 </style>
--- a/src/main-org.js
+++ b/src/main-org.js
@ -0,0 +1,8 @@
+import {createApp} from 'vue'
+import ElementPlus from 'element-plus'  // 完整引入Element-Plus
+import 'element-plus/dist/index.css'  // 引入样式文件
+import App from './App-org.vue'
+
+const app = createApp(App)
+app.use(ElementPlus, {size: 'small', zIndex: 3000})
+app.mount('#app')
--- a/src/main.js
+++ b/src/main.js
@ -1,8 +1,4 @@
-import {createApp} from 'vue'
-import ElementPlus from 'element-plus'  // 完整引入Element-Plus
-import 'element-plus/dist/index.css'  // 引入样式文件
-import App from './App.vue'
+import {createApp} from "vue";
+import App from "./App.vue"

-const app = createApp(App)
-app.use(ElementPlus, {size: 'small', zIndex: 3000})
-app.mount('#app')
+createApp(App).mount('#app')