初学编写 HelloWorld 和 Counter · vue笔记

[TOC] >[success] # 初学编写 HelloWorld 和 Counter 本章讲述了通过 **cdn** 的方式是如何使用 **vue3.0**。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>hollo world</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 创建vue实例 Vue.createApp({ data(){ return{ content:1 // 定义变量 } }, mounted(){ setInterval(() => { // 简写 this.content += 1 // 等同于 // this.$data.content +=1 }, 1000) }, template: '<div>{{content}}</div>' // 在标签中使用变量 }).mount('#root') // 将template中的内容挂载到id为root的元素中 </script> </html> ~~~