VUE 起步

最新推荐文章于 2022-05-18 19:18:50 发布

敏姐儿

最新推荐文章于 2022-05-18 19:18:50 发布

阅读量87

点赞数

分类专栏： VUE 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_46128463/article/details/120557823

版权

VUE 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

VUE 起步

Vue3 中的应用是通过使用 createApp 函数来创建的，语法格式如下：

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

在这里插入图片描述

data 选项

data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数,
并以$DATA的形式存在组件实例中
在这里我倒是希望大家看看就行没有必要去过分纠结放图供看官老爷观看
在这里插入图片描述

方法

我们可以在组件中添加方法，使用 methods 选项，该选项包含了所需方法的对象,如下列:

在这里插入图片描述
话不多说直接上源码大家可以直接测试有什么问题共同探讨一步一步来!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="hello-vue" class="demo">
  {{ message }}
</div>

<div id="app" class="demo"></div>

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}
Vue.createApp(HelloVueApp).mount('#hello-vue')

const app = Vue.createApp({
  data() {
    return { count: 6 }
  },
  methods: {
    increment() {
      // `this` 指向该组件实例
      this.count++
    }
  }
})

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

document.write(vm.$data.count) // => 6
document.write("<br>")
document.write(vm.count)       // => 6
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

// 
vm.increment()
document.write(vm.count) // => 7
</script>
</body>
</html>

敏姐儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
VUE 起步

VUE 起步Vue3 中的应用是通过使用 createApp 函数来创建的，语法格式如下：data 选项data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数,并以$DATA的形式存在组件实例中在这里我倒是希望大家看看就行没有必要去过分纠结放图供看官老爷观看方法我们可以在组件中添加方法，使用 methods 选项，该选项包含了所需方法的对象,如下列:话不多说直接上源码大家可以直接测试有什么问题共同探讨一步一步来!<!DOCTYPE html>
复制链接

扫一扫