RogerWorkPC
/
vue3_element_demo1
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成选项试的组件API

Browse Source
main
roger_home_pc 1 year ago
parent 1d0ed3e3cd
commit d6823c8996
7 changed files with 121 additions and 23 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      demo/component-1.html
  2. 44
      demo/component-2/src/App.vue
  3. 4
      demo/component-2/src/main.js
  4. 26
      src/App-org.vue
  5. 50
      src/App.vue
  6. 8
      src/main-org.js
  7. 10
      src/main.js

2
demo/component-1.html
Unescape View File

@ -1,3 +1,5 @@
<!--全局注册组件-->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>

44
demo/component-2/src/App.vue
Unescape View File

@ -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>

4
demo/component-2/src/main.js
Unescape View File

@ -0,0 +1,4 @@
import {createApp} from "vue";
import App from "./App.vue"
createApp(App).mount('#app')

26
src/App-org.vue
Unescape View File

@ -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>

50
src/App.vue
Unescape View File

@ -1,26 +1,44 @@
<template> <template>
<img alt="Vue logo" src="./assets/logo.png"> <div>{{ name }}: {{ counter }} {{ obj.title }}</div>
<HelloWorld msg="Welcome to Your Vue.js App"/> <div>{{ twiceTheCounter }}</div>
<button @click="action">触发action方法</button>
</template> </template>
<script> <script>
import HelloWorld from './components/HelloWorld.vue'
export default { export default {
name: 'App', // name: "App",
components: { props: {
HelloWorld 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> </script>
<style>
#app { <style scoped>
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> </style>

8
src/main-org.js
Unescape View File

@ -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')

10
src/main.js
Unescape View File

@ -1,8 +1,4 @@
import {createApp} from 'vue' import {createApp} from "vue";
import ElementPlus from 'element-plus' // 完整引入Element-Plus import App from "./App.vue"
import 'element-plus/dist/index.css' // 引入样式文件
import App from './App.vue'
const app = createApp(App) createApp(App).mount('#app')
app.use(ElementPlus, {size: 'small', zIndex: 3000})
app.mount('#app')

Write Preview
Loading…
Cancel
Save