|
|
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>vue</title>
- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
- </head>
- <body>
- <div id="Application">
- <my-alert></my-alert>
- </div>
- <script>
- const App = Vue.createApp({}); //使用Vue.createApp()创建Vue应用实例
- const alertComponent = {
- //data提供应用所需的全局数据
- data() {
- return {
- msg: "警告框提示",
- count: 0
- }
- },
- //methods配置组件中需要用到的方法
- methods: {
- click() {
- alert(this.msg + this.count++)
- },
- countChange(value, oldValue) {
- console.log(value, oldValue)
- }
- },
- //computed配置组件的计算属性
- computed: {
- get() {
- return this.count + "次"
- }
- },
- //watch配置组件的监听函数
- watch: {
- count: "countChange"
- },
- //tamplate配置组件的模板
- template: `<div><button @click="click">按钮</button></div>`
- }
- //注册组件,应用实例可以用component()方法来定义组件，定义好组件后，组件就可以在模板中使用
- App.component("my-alert", alertComponent);
- //挂载应用,挂载到id为Application的元素上,创建好Vue应用实例后，使用mount()方法绑定到指定的HTML元素上
- App.mount("#Application");
- </script>
- </body>
- </html>
- Vue.createApp(APP).mount("#Application") //是一个汇总的简写
|
|
发表于 2024-12-26 10:48:18