首页 > 其他分享 >Vue第二例data 选项

Vue第二例data 选项

时间:2023-07-26 19:12:43浏览次数:29  
标签:count write Vue 选项 vm 第二例 document data

讲的主要还是附值方式,以及值的变化,总之是操作里面的数据选项

还是如上节讲的建html

上代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="../scripts/vue.global.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<div id="app">
<p>{{ count }}</p>
</div>

<div id="app2">
<p>{{ count }}</p>
</div>

</body>
</html>
<script>

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

const vm = app.mount('#app') //仅在实例首次创建时被添加,所以你需要确保它们都在 data 函数返回的对象中

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


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

const vm2 = app2.mount('#app2') //,使用 methods 选项,该选项包含了所需方法的对象。以下实例我们添加了 methods 选项,选项中包含了 increment() 方法:

document.write(vm2.count) // => 4
document.write("<br>")
vm2.increment()

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


</script>

 

标签:count,write,Vue,选项,vm,第二例,document,data
From: https://www.cnblogs.com/dugubingxun/p/17583334.html

相关文章

  • 用CSS样式 @keyframes、animation写一个旋转立体模型、动画模型,vue2
    需求:画一个正方体,让物体一直旋转环境:vue2、css效果:代码:模型1<template>2<div>3<!--旋转立体图-->4<divclass="cube">5<divclass="facefront"></div>6<divclass="faceba......
  • Vue第一个程序,经典Hello
    弄明白了简单模式的vue应用,开始应用,首先下载vue.js文件,也可以访问使用CDN方法,我是直接下载了vue.global.js,方法是NPM方法(这个在上面的官网与菜鸟都有),然后用VisualStudio建了一个空网站,新建文件夹scripts把vue.global.js放文件夹下,新建文件夹pages在这个文件夹下新建一个......
  • vue 2 接入three.js
    1、安装[email protected]、在vue中引用(可以测试一下,是否ok,下面测试)1)、新建index.jsimport*asTHREEfrom'three';//引入Three.js扩展库import{OrbitControls}from'three/examples/jsm/controls/OrbitControls.js';//创建场景varscene=n......
  • openGauss笔记 - 实现docker安装openGauss,使用Data Studio连接
    openGauss笔记Docker安装openGauss拉取openGauss镜像openGauss5.0.0有企业版和轻量版。轻量版定位是在软硬件资源受限场景下仍可使用openGauss,但是保留了企业版大部分的特性,轻量版通过参数默认关闭的特性:Ustore、Asp、增量检查点、双写、列存、段页式存储等,还有些不支持的特......
  • 手机上vue页面返回时如何保持原来的位置
    1,问题的提出采用vue做手机评分页面的前端,页面显示多个评分项的分数和总分。每个评分项有个修改按钮,按下后弹出新的页面,用户填写分数后按提交按钮,则保存数据、关闭页面、回到前一页。此时,页面上显示的分数和总分会刷新,但是显示的页面位置未保留修改前的位置,而是回到了顶部显示。......
  • 电池供电低功耗 远程综合数采仪Remote comprehensive data acquisition instrument
     一、数采物联网远传监测系统1.采用数采物联-智汇远程地温监测系统2.可以自建数据中心,保存野外监测数据。访问数据中心可以查询和导出指定时间段或所有的监测数据。每个数据中心均建设有安全的用户隔离措施,保证监测数据仅能被授权的用户访问。3.系统遵循物联网的三层架构,分......
  • QDataStream 读取与写入QByteArray
    问题:QDataStream中写入的数据比QByteArray多了4个byte。仔细看了下,这个4个byte表示的是QByteArray的数据长度。转载官方文档:https://doc.qt.io/qt-6/qdatastream.htmlQDataStream &QDataStream::readBytes(char *&s, uint &l)Readsthebuffer s fromthestreamandr......
  • 如何快速在本地运行你vue打包的的dist文件
    要在本机启动运行前端提供的dist包,需要先安装一个HTTP服务器,例如Apache,Nginx,phpstudy。这里以使用Node.js的http-server为例进行说明首先,确保已经安装了Node.js。如果没有安装,可以从官网下载并安装。打开终端或命令行窗口,使用以下命令安装http-servernpminstall-g......
  • A Brief History of Big Data Technology Development
    ForewordBeforewritingthisarticle,Iwroteaboutthehistoryofsomebigdatacomponentsandsomeofitsevaluationsintermittently,butIfeltunsatisfactory.Historyshouldbecontinuousandhaveitsinherentlaws,soIwantedtowriteanarticleto......
  • 视频直播系统源码,vue自定义模拟滚动条
    视频直播系统源码,vue自定义模拟滚动条vscroll自定义滚动条模板 <template> <divclass="vui__scrollbar"ref="ref__box"@mouseenter="handleMouseEnter"@mouseleave="handleMouseLeave"v-resize="handleResize">  <div:......