Vue3怎么起步入门？

Vue.js 是一个渐进式 JavaScript 框架主要用于构建用户界面。刚开始学习 Vue我们不推荐使用 vue-cli 命令行工具来创建项目更简单的方式是直接在页面引入 vue.global.js 文件来测试学习。Vue3 中的应用是通过使用 createApp 函数来创建的语法格式如下const app Vue.createApp({ /* 根组件选项 */ })传递给 createApp 的选项用于配置根组件。应用实例必须在调用了 .mount() 方法后才会渲染出来.mount()方法接收一个容器参数可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串div idapp/divapp.mount(#app)一个简单的实例Vue.createApp(HelloVueApp).mount(#hello-vue)createApp 的参数是根组件HelloVueApp在挂载应用时该组件是渲染的起点。一个应用需要被挂载到一个 DOM 元素中以上代码使用 mount(#hello-vue) 将 Vue 应用 HelloVueApp 挂载到 div idhello-vue/div 中。接下来我们从Hello Vue!!的代码开始学起。Vue 3.0 实例div idhello-vue classdemo {{ message }} /div​script const HelloVueApp { data() { return { message: Hello Vue!! } } }​Vue.createApp(HelloVueApp).mount(#hello-vue) /script尝试一下 »点击 尝试一下 按钮查看在线实例以上实例中我们先在 HTML 页面中引入 Vue 的 JS 文件script srchttps://cdn.staticfile.net/vue/3.2.36/vue.global.min.js/scriptHTML 页面中有一个 div 元素:div idhello-vue classdemo {{ message }} /divmount(#hello-vue) 将 Vue 应用 HelloVueApp 挂载到 div idhello-vue/div 中。{{ }} 用于输出对象属性和函数返回值。{{ message }} 对应应用中message的值。根组件模板根组件的模板通常嵌入在组件定义中不过也可以通过直接在挂载点的容器内定义模板来单独指定。实例div idappbutton clickcount{{ count }}/button/divscriptconst { createApp, ref } Vue;const app createApp({setup() {const count ref(0);function increment() {count.value;};return { count, increment };}});app.mount(#app)/script尝试一下 »当根组件没有设置 template 选项时Vue 将自动使用容器的 innerHTML 作为模板。代码说明使用setup函数在Vue 3中组件的逻辑通常在setup函数中定义。这里我们使用setup函数来定义响应式数据count和方法increment。使用ref在setup函数中我们使用ref来创建响应式数据count。定义increment方法定义一个increment方法来增加count的值。返回响应式数据和方法在setup函数中返回count和increment这样它们就可以在模板中被访问和使用。data 选项data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象然后 Vue 会通过响应性系统将其包裹起来并以 $data 的形式存储在组件实例中。实例const app Vue.createApp({data() {return { count: 4 }}})const vm app.mount(#app)document.write(vm.$data.count) // 4document.write(br)document.write(vm.count) // 4document.write(br)// 修改 vm.count 的值也会更新 $data.countvm.count 5document.write(vm.$data.count) // 5document.write(br)// 反之亦然vm.$data.count 6document.write(vm.count) // 6尝试一下 »以上实例属性仅在实例首次创建时被添加所以你需要确保它们都在 data 函数返回的对象中。方法我们可以在组件中添加方法使用 methods 选项该选项包含了所需方法的对象。以下实例我们添加了 methods 选项选项中包含了 increment() 方法实例const app Vue.createApp({data() {return { count: 4 }},methods: {increment() {// this 指向该组件实例this.count}}})const vm app.mount(#app)document.write(vm.count) // 4document.write(br)vm.increment()document.write(vm.count) // 5