vue3学习笔记(1)script引入vue3实现简单应用

2023-11-19

Vue3专栏入口

一、脚本引入简单使用

script引入

<!--  vue3脚本地址为:https://unpkg.com/vue@3.2.31/dist/vue.global.js -->
<script src="https://unpkg.com/vue@3.2.31/dist/vue.global.js"></script>

简单使用实现数据渲染

<body>
    <!-- 添加html结构 -->
    <div id="test">
        <h1>counter:{{ num }}</h1>
    </div>

    <script>
        const Test = {
            data() {
                return {
                    num: 12
                }
            }
        }
        // 创建一个应用,将配置对象Test的内容渲染到 id为test的元素上
       let app = Vue.createApp(Test).mount("#test")
    </script>
</body>

打开页面查看结果
在这里插入图片描述

二、双向绑定的基本表现

按下F12,找到console输入app.num 可以查看num现在的值,输入app.num=10可以修改num的值,当修改后发现界面中展示的数字也跟着发生了改变,页面的变化会更具数据的变化而变化这就是一个标准的绑定。
在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue3学习笔记(1)script引入vue3实现简单应用 的相关文章

  • Docker本地镜像推送到私有库

    Docker Registry是官方提供的工具 可以用于构建私有镜像仓库 1 下载镜像Docker Registry docker pull registy 2 运行私有库Registry 相当于本地有个私有Docker hub docke
  • 计算机基础——Excel 2010

    天软备考交流群 365218976 1 Excel 2010的基本操作 1 1 Excel的窗口界面 1 2 工作簿与工作表 1 3 单元格区域的管理 1 4 工作表的管理 1 5 输入和编辑数据 1 6 行 列和单元格的管理 1 7 批注

随机推荐

  • java代码引用jar包中文件的方法

    jar是一个单独的文件 里面的文件称之为资源 有两种方法获取 里面的资源文件 一般将资源文件放到resources文件夹中 1 推荐 静态和非静态方法中都能用 ClassName class getClassLoader getResour
  • 刷脸支付服务商抓住机会迎头赶上

    科技改变未来并不是一句口号 就拿买东西来讲 以前人们都是一手交钱一手交货 拿到大额的纸币 还要验真假 而现在移动支付成为主要付款方式 只要一部手机 扫一扫就能付款 一开始也有很多人不习惯手机支付 因为觉得没有现金实在 整天就是一堆数字转来转
  • 前端手写(正则、字符串、函数)

    1 实现千位分隔符 保留三位小数 parseToMoney 1234 56 return 1 234 56 parseToMoney 123456789 return 123 456 789 parseToMoney 1087654 321
  • ajax 传回underfined,$.jquery ajax返回的数据(json)显示为’undefined’

    这里我有一个简单的 PHP脚本 它以json格式显示数据库中的一些值 source GET source query MysqL query SELECT FROM images WHERE big thumb source results
  • Anaconda安装教程及numpy环境配置

    一 下载Anaconda 下载地址 https www anaconda com 二 安装Anaconda 1 进入官网后 看不懂英文可以先将网页翻译成中文 然后点击产品 gt 个人版 如图进入下载页面 2 可以直接点击下载 也可以滚动到页
  • 并发编程----4.java并发包中线程池的原理研究

    并发编程 4 java并发包中线程池的原理研究 java并发包中线程池ThreadPoolExecutor的原理研究 线程池的优点 线程的复用 减少线程创建和销毁带来的消耗 提供了一种资源限制和线程管理的手段 比如限制线程的个数和动态新增线
  • 数据库常用工具

    定期对你的MYSQL数据库进行一个体检 是保证数据库安全运行的重要手段 因为 好的工具是使你的工作效率倍增 常用工具 1 mysql 该mysql不是指mysql服务 而是指mysql的客户端工具 语法 mysql options data
  • 官方系统镜像烧写(windows下使用OTG)

    目录 OTG系统烧写 为什么能通过VBS将系统烧写进去呢 OTG系统烧写 选择对应的烧写工具 USB OTG线连接好 双击即可进行烧写 注意 当然也可以烧写到SD卡里面 前面我们烧写裸机代码都是选择从SD卡启动 Mfgtool这个工具先向板
  • unity官方demo学习之Stealth(二)警报灯设定

    为light alarm directional添加脚本DoneAlarmLight AlarmLight cs using UnityEngine using System Collections public class DoneAla
  • 设计模式-2--工厂模式(Factory Pattern)

    一 什么是工厂模式 工厂模式 Factory Pattern 是一种创建型设计模式 它提供了一种创建对象的接口 但是将对象的实例化过程推迟到子类中 工厂模式允许通过调用一个共同的接口方法来创建不同类型的对象 而无需暴露对象的实例化逻辑 工厂
  • java word转pdf 后通过 PdfReader 和 PdfStamper对pdf添加水印 通过poi等组件实现

    所需jar包地址
  • javah用法

    正确做法 进入到包com所在的目录 是java文件所在的包 不是class javah classpath jni com jnitest MainActivity 如果执行这个 javah jni com example zndktest
  • Git中添加文件.gitignore作用

    添加文件 gitignore作用 作用 我们使用Git时 经常看到 gitignore文件 具体有什么作用呢 作用 该文件用来描述Git仓库中不需要管理的文件和目录 一般可以在初始化时自动生成 gitignore文件 如果初始化是忘记加入此
  • 虚拟化、虚拟机等概念理解

    虚拟化 定义 是指通过虚拟化技术将一台计算机虚拟为多台逻辑计算机 在一台计算机上同时运行多个逻辑计算机 每个逻辑计算机可运行不同的操作系统 并且应用程序都可以在相互独立的空间内运行而不受影响 从而显著提高计算机的工作效率 软件 完全虚拟 V
  • Qt表格分页,跳转,首尾页

    简介 1 使用QTableWidget实现了首页 上下页切换 尾页 以及跳转 上代码 widget h ifndef WIDGET H define WIDGET H include
  • unity 使用vrtk4的插件 打包htv vive VR客户端包,手柄不生效

    背景 目的 u3d使用vrtk开发pico应用 vrtk是为了到时候无缝衔接后续要买的htc vive pro 2 先导入了tilia importer 也就是vrtk4 0 根据教程模块化使用功能 和pico官网下的 PICO Unity
  • Dom事件

    1 onclick 点击事件 2 ondbclick 双击事件 3 onmousedown 鼠标按下事件 4 onmouseup 鼠标松开事件 5 onmouseenter 鼠标移入事件 不支持冒泡 只触发一次 6 onmouseover
  • Linux 磁盘与文件系统管理(鸟哥私房菜)

    本文来自 http vbird dic ksu edu tw linux basic 0230filesystem php 第八章 Linux 磁盘与文件系统管理 系统管理员很重要的任务之一就是管理好自己的磁盘文件系统 每个分割槽不可太大也
  • JAVA用到的环境变量,JAVA_HOME、CLASSPATH、PATH

    Windows下JAVA用到的环境变量主要有3个 JAVA HOME CLASSPATH PATH JAVA HOME指向的是JDK的安装路径 如C JDK 1 4 2 在这路径下你应该能够找到bin lib等目录 值得一提的是 JDK的安
  • vue3学习笔记(1)script引入vue3实现简单应用

    Vue3专栏入口 目录 一 脚本引入简单使用 二 双向绑定的基本表现 一 脚本引入简单使用 script引入 简单使用实现数据渲染 div h1 counter num h1 div