Vue03-HelloWord

news2024/10/6 22:08:21

一、Hello World

1-1、示例1

1、现有html容器;

2、再有vue实例。

new Vue({});中的{}是配置对象。配置对象是:key:value的格式。

el:element元素。id对应#,class对应.

 

把容器中变化的数据,交给Vue实例去保管:

const x多余,去掉即可。

1-2、示例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--VUEde 引入 cdn方式-->
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>

    <!-- view层 模板 视图层 -->
    <div class="app">
        {{message}}
    </div>

    <script>
        // 创建一个Vue的实例
        var vm = new Vue({
            el: ".app",
            // model层:数据模型
            data:{
                message: "hello world!"
            }
        });
    </script>

</body>
</html>

浏览器展示:

双向绑定:ViewModel层

 不用刷新页面,就能展示页面信息的变化。vue不改变DOM对象,是虚拟DOM

 

1-3、小结

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

二、Hello 案例分析

2-1、一个Vue实例,不能同时接管两个实例

页面展示:

只接管第一个实例。

2-2、多个实例不能对应一个容器

2-3、一个Vue实例对应一个容器

容器和Vue实例的关系是:一一对应! 

三、注意

3-1、Vue的组件简介

以后开发的时候,一个.Vue文件中,只有一个容器,和一个Vue实例。当容器中需要维护的数据很多时,可以如下分配:

用多个组件管理。

3-2、JS表达式 VS JS代码

HTML容器中,并不是Vue实例有什么,容器才能放什么。

页面展示:

 

 

页面展示:

3-3、小结

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1792354.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

嵌入式软件跳槽求指导?

嵌入式软件行业的跳槽确实需要一些特定的策略和技巧。我这里有一套嵌入式入门教程&#xff0c;不仅包含了详细的视频讲解&#xff0c;项目实战。如果你渴望学习嵌入式&#xff0c;不妨点个关注&#xff0c;给个评论222&#xff0c;私信22&#xff0c;我在后台发给你。 因为这个…

[Algorithm][动态规划][两个数组的DP][最长公共子序列][不相交的线][不同的子序列][通配符匹配]详细讲解

目录 1.最长公共子序列1.题目链接2.算法原理详解3.代码实现 2.不相交的线1.题目链接2.算法原理详解3.代码实现 3.不同的子序列1.题目链接2.算法原理详解3.代码实现 4.通配符匹配1.题目链接2.算法原理详解3.代码实现 1.最长公共子序列 1.题目链接 最长公共子序列 2.算法原理详…

Linux网络编程:数据链路层协议

目录 前言&#xff1a; 1.以太网 1.1.以太网帧格式 1.2.MTU&#xff08;最大传输单元&#xff09; 1.2.1.IP协议和MTU 1.2.2.UDP协议和MTU 1.2.3.TCP协议和MTU 2.ARP协议&#xff08;地址解析协议&#xff09; 2.1.ARP在局域网通信的角色 2.2.ARP报文格式 2.3.ARP报文…

SpringBoot高手之路02-全局异常处理器

RestControllerAdvice 可以将响应数据返回json格式然后响应 那么开始做全局异常处理器 首先先定义一个类 package com.healer.exception;import com.healer.common.Result; import org.springframework.web.bind.annotation.ExceptionHandler; import org.springframework.we…

AIGC专栏11——EasyAnimateV2结构详解与Lora训练 最大支持768x768 144帧视频生成

AIGC专栏11——EasyAnimateV2结构详解与Lora训练 最大支持768x768 144帧视频生成 学习前言源码下载地址EasyAnimate V2简介技术储备Diffusion Transformer (DiT)Motion ModuleU-VITLora 算法细节算法组成视频VAE视频DIT 数据处理视频分割视频筛选视频描述 模型训练视频VAE视频D…

Leetcode3168. 候诊室中的最少椅子数

Every day a Leetcode 题目来源&#xff1a;3168. 候诊室中的最少椅子数 解法1&#xff1a;模拟 代码&#xff1a; /** lc appleetcode.cn id3168 langcpp** [3168] 候诊室中的最少椅子数*/// lc codestart class Solution { public:int minimumChairs(string s){int chair…

前缀树的实现

前缀树的实现 何谓前缀树&#xff1f;实现前缀树节点的选择插入查找查找前缀完整代码 何谓前缀树&#xff1f; 前缀树&#xff08;字典树&#xff09;&#xff0c;使用树状的数据结构存储一个字典的所有单词。前缀树是一个多叉树&#xff0c;一个节点可能有多个子节点&#xf…

SpringMVC:转发和重定向

1. 请求转发和重定向简介 参考该链接第9点 2. forward 返回下一个资源路径&#xff0c;请求转发固定格式&#xff1a;return "forward:资源路径"如 return "forward:/b" 此时为一次请求返回逻辑视图名称 返回逻辑视图不指定方式时都会默认使用请求转发in…

优化你的WordPress网站:内链建设与Link Whisper Pro插件的利用

文章目录 内链的重要性WordPress SEO插件&#xff1a;Link Whisper Pro主要功能使用指南下载与安装 结语 在数字营销和网站管理领域&#xff0c;SEO内部优化是提升网站排名、增加流量和提高用户参与度的核心策略。在众多SEO技巧中&#xff0c;内链建设是构建良好网站结构和提升…

使用Django JWT实现身份验证

文章目录 安装依赖配置Django设置创建API生成和验证Token总结与展望 在现代Web应用程序中&#xff0c;安全性和身份验证是至关重要的。JSON Web Token&#xff08;JWT&#xff09;是一种流行的身份验证方法&#xff0c;它允许在客户端和服务器之间安全地传输信息。Django是一个…

docker实战流程:

Docker-compose是docker官方的开源项目&#xff0c;负责实现对docker容器的集群的快速编排&#xff08;通过yaml文件docker-compose.yml管理写好容器之间的调用关系只需一个命令就能实现容器的通识开启或关闭&#xff09;。 类比spring容器&#xff0c;spring管理的是bean而do…

【乐吾乐3D可视化组态编辑器】3D场景与大屏通信

乐吾乐大屏可视化可以实现大屏页面与内嵌2d/3d场景相互通信&#xff0c;底层原理是利用了iframe通过postMessage发送消息。 3D组态编辑器地址&#xff1a;3D可视化组态 - 乐吾乐Le5le 大屏组态编辑器地址&#xff1a;大屏可视化设计器 - 乐吾乐Le5le 下面以3d场景为例&#…

C# 判断字符串不等于空的示例

在C#中&#xff0c;要判断一个字符串是否不等于空&#xff08;即它既不是null也不是空字符串""&#xff09;&#xff0c;方法有如下几种&#xff0c;如下。 方法1 使用逻辑运算符和string.IsNullOrEmpty方法 string myString "123"; // 假设要检查的字…

Python第二语言(三、Python函数def)

目录 1. Python函数&#xff08;def 函数名():&#xff09; 1.1 sorted对容器进行排序&#xff1a;无法指定排序规则 1.2 sort对容器自定义排序&#xff1a;可以指定排序规则 1.3 获取变量长度函数&#xff08;len&#xff09; 1.4 函数的定义 1.5 函数-传参定义 1.6 函…

JFinal学习06 控制器——getPara()接收数据

JFinal学习06 控制器——getPara()接收数据 视频来源https://www.bilibili.com/video/BV1Bt411H7J9/?spm_id_from333.337.search-card.all.click 文章目录 JFinal学习06 控制器——getPara()接收数据零、JFinal数据提交的三种方式一、get提交二、post提交三、url参数化提交四、…

基于spring boot+vue的校园新闻管理系统

随着网络不断的普及发展&#xff0c;校园新闻网站依靠网络技术的支持得到了快速的发展&#xff0c; 首先要从用户的实际需求出发&#xff0c; 通过了解用户的需求开发出具有针对性的首页、校园 新闻、 论坛交流、 留言反馈、 个人中心、 后台管理功能&#xff0c; 利用目前网络…

MotionEditor_ 通过内容感知扩散编辑视频运动

图1. MotionEditor&#xff1a;一种基于扩散的视频编辑方法&#xff0c;旨在将参考视频的运动转移到源视频中。 摘要 现有的基于扩散的视频编辑模型在随时间编辑源视频的属性方面取得了显著进展&#xff0c;但在修改运动信息的同时保持原始主角的外观和背景方面存在困难。为…

计算机网络 期末复习(谢希仁版本)第2章

物理层考虑的是怎样才能在连接各种计算机的传输媒体上传输数据比特流&#xff0c;而不是指具体的传输媒体。4 个特性&#xff1a; 机械特性&#xff1a;指明接口所用接线器的形状和尺寸、引线数目和排列、固定和锁定装置等。 电气特性&#xff1a;指明在接口电缆的各条线上出现…

gitlabcicd-k8s部署gitlab

一.安装准备环境 存储使用nfs挂载持久化 k8s环境 helm安装 建议helm 3 二.部署gitlab-deploy.yaml nfs的ip是192.168.110.190 挂载目录是/data/data 注意所需要的目录需要创建&#xff1a;/data/data/gitlab/config &#xff0c;/data/data/gitlab/logs &#xff0c;/dat…

HarmonyOS(二十三)——HTTP请求实战一个新闻列表

在前一篇文章&#xff0c;我们已经知道如何实现一个http请求的完整流程&#xff0c;今天就用官方列子实战一个简单的新闻列表。进一步掌握ArkTS的声明式开发范式&#xff0c;数据请求&#xff0c;常用系统组件以及touch事件的使用。 主要包含以下功能&#xff1a; 数据请求。…