<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue应用</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="Application"> <button @click="click">单击</button> </div> <script> const appData = { data:{ count:0 } } const App = Vue.createApp({ data(){ return appData }, computed: { countString: { get(){ return this.count + "次" } } }, methods:{ click(){ this.data.count += 1 } }, watch:{ data:{ handler(value, oldValue) { console.log(value, oldValue) }, deep:true } } }) App.mount("#Application") </script> </body> </html>分析一下
时间: 2024-02-10 08:28:19 浏览: 74
这是一个使用Vue.js开发的简单应用。让我来为你分析一下这段代码。
首先,这是一个HTML文档,使用的是英语作为语言。在`<head>`标签中,设置了文档的字符编码和兼容性,并引入了Vue.js库。
在`<body>`标签中,有一个id为"Application"的`<div>`元素,用于容纳Vue应用。里面包含一个按钮,当按钮被点击时,会触发`click`方法。
在`<script>`标签中,首先定义了一个名为`appData`的对象,其中包含一个`data`属性,用于存储应用的数据。在这个例子中,数据对象中只有一个`count`属性,初始值为0。
接下来,使用`Vue.createApp()`方法创建了一个名为App的Vue应用。在这个Vue应用中,定义了几个选项:
- `data()`函数返回了之前定义的`appData`对象,用于将数据注入到Vue应用中。
- `computed`属性中定义了一个名为`countString`的计算属性,用于实时计算`count`属性的值加上"次"的字符串。
- `methods`中定义了一个名为`click`的方法,用于在按钮点击时将`count`属性加一。
- `watch`属性中定义了一个名为`data`的观察者,当`data`对象发生变化时,会触发其中的处理函数,并打印出新值和旧值。
最后,使用`App.mount("#Application")`将Vue应用挂载到id为"Application"的`<div>`元素中。
这段代码实现了一个简单的计数器应用,每次按钮被点击时,`count`属性的值会加一,并通过计算属性实时显示在页面上。同时,通过观察者可以监测`count`属性的变化。
阅读全文