1. 通过js引入实现vue3应用

104 阅读 0 评论 69 点赞

我是靠谱客的博主冷艳钢铁侠，最近开发中收集的这篇文章主要介绍1. 通过js引入实现vue3应用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

官方文档：

https://v3.cn.vuejs.org/guide/introduction.html
路由：https://router.vuejs.org/zh/
CDN: https://unpkg.com/vue@next

模板

<div id="hello-vue" class="demo">
  {{ message }}
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>

引入 Vue 的 JS 文件
保存到本地也行

创建应用
传递给 createApp 的选项用于配置根组件。

const app = Vue.createApp({ /* 选项 */ })

挂载渲染
在使用 mount() 挂载应用时，该组件被用作渲染的起点。
一个应用需要被挂载到一个 DOM 元素中，以上代码使用 mount(’#hello-vue’) 将 Vue 应用 HelloVueApp 挂载到 <div id="hello-vue"></div> 中。

Vue.createApp(HelloVueApp).mount('#hello-vue')

应用
HTML 页面中有一个 div 元素:

<div id="hello-vue" class="demo">
  {{ message }}
</div>

mount(’#hello-vue’) 将 Vue 应用 HelloVueApp 挂载到 <div id="hello-vue"></div> 中。

{{ }} 用于输出对象属性和函数返回值。

{{ message }} 对应应用中 message 的值。

data 选项

data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。

实例

const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})

const vm = app.mount('#app')

document.write(vm.$data.count) // => 4
document.write("<br>")
document.write(vm.count)       // => 4
document.write("<br>")
// 修改 vm.count 的值也会更新 $data.count
vm.count = 5
document.write(vm.$data.count) // => 5
document.write("<br>")
// 反之亦然
vm.$data.count = 6
document.write(vm.count) // => 6

以上实例属性仅在实例首次创建时被添加，所以你需要确保它们都在 data 函数返回的对象中。

methods方法

在组件中添加方法，使用 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) // => 4
document.write("<br>")
vm.increment()

document.write(vm.count) // => 5

示例

<!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>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
 <!--注释-->
</head>
<body>
    <div id="counter">
        <!-- 固定写法，告诉框架num是个变量-->
        <h1>counter:{{ num }}</h1>  
    </div>

    <script>
        const Counter = {
            // 这样写法data()
            data:function(){
                return {
                    num:100
                }
            }
        }
        //创建应用，将配置的对象counter 的内容渲染到选择器是#counter的元素上

        let app = Vue.createApp(Counter).mount("#counter")
       // app.num=10 在开发者模式可以测试改成10，则会自动修改掉。
        console.log(app)
    </script>
</body>