Vue实战学习(2)(Vue快速入门(快速构建一个局部Vue项目))

news2024/11/26 12:36:53

目录

一、Vue快速入门。

(1)快速入门的案例需求。

(2)原生js解决。

(3)使用Vue解决。

1、准备一个html页面。且该页面需要引入Vue模块。

2、创建Vue程序的应用实例。

3、准备html元素(如div)。

4、基于数据构建用户界面。(核心)

<1>准备数据。

<2>通过插值表达式渲染页面。     

<3>插值表达式。

二、实操(vscode)

(1)项目的创建与起步。

(2)<body>标签中引入Vue模块 。

1、进入Vue官网,找到安装,点击并进入。

2、首先看到"通过CDN使用Vue"。

3、找到"ES"模块构建版本。

4、这样如下,就完成了第一步。

5、创建Vue的应用实例。

(3)准备元素div。

(4)构建用户界面。

1、准备数据。

2、通过插值表达式渲染页面。

三、总结。

(1)Vue的使用步骤。

1、准备工作。

2、构建用户界面。


一、Vue快速入门。

目前刚开始学习的是局部使用Vue。后面才学习如何以工程化的形式使用Vue。

(1)快速入门的案例需求。
  • 使用Vue。将字符串"Hello Vue3"渲染到页面进行展示。

(2)原生js解决。
  • 使用原生的JS代码完成。
  • 使用Document.getElementById()获取指定id的元素。再调用innerHTML设置标签体即可。


  • 举例如下。
  • 首先通过 document.getElementById('myElement')获取到具有 id 为 myElement 的 <div> 元素,然后将其 innerHTML 设置为新的内容字符串,从而改变了这个元素在页面上显示的内容。
  • 使用 document.getElementById() 和 innerHTML 可以方便地动态修改页面内容。
<!DOCTYPE html>
<html>

<body>

  <div id="myElement">Hello Vue</div>

  <script>
    const element = document.getElementById('myElement');
    element.innerHTML = 'Hello Vue3';
  </script>

</body>

</html>
(3)使用Vue解决。
1、准备一个html页面。且该页面需要引入Vue模块。
  • 导入Vue时,通过import导入(按需导入)。并且导入一个在线的js文件。(在线地址是Vue官方提供的)
  • 在这里只需要简单导入一个Vue提供的createApp这个函数即可。

2、创建Vue程序的应用实例。
  • 也就是调用导入的createApp函数即可。
  • 同时调用这个函数传参通过"{}"(大括号)。

3、准备html元素(如div)。
  • 该元素(div)需要被Vue来控制。
  • 如何控制?通过调用完createApp这个方法之后,再链式的调用一个mount()方法在mount()方法这一块再传递一下页面中这个元素的id即可

  • 注意。一旦元素(div)被控制了之后,那么其下所有的子标签都会被Vue控制。
4、基于数据构建用户界面。(核心)
<1>准备数据。
  • 也就是Vue使用的数据都需要在调用createApp这个函数。通过在"{}"(大括号)里面声明。
  • 这里使用data函数。在它的内部:通过return来返回需要的数据。

  • 如这个案例需要msg : "Hello Vue3"这个数据。只需要在return后面返回这个数据就好了。

<2>通过插值表达式渲染页面。     
  • 可以在div的内部声明一个<h1>标签。 并且在<h1>标内部通过插值表达式来把数据渲染到页面上。  

  • 这里的"插值表达式"就是两个"{}"(花括号)。在内部就写上Vue实例中准备好的键名(msg)即可。

<3>插值表达式。
<div>
  {{ message }}
</div>
  • 在上面的代码中,message是在 Vue 实例中定义的数据属性,插值表达式会将这个数据属性的值显示在页面上。
  • 插值表达式使得页面能够根据数据的变化实时更新显示内容。当数据发生改变时,插值表达式所在的位置会自动更新为新的数据值。

二、实操(vscode)

(1)项目的创建与起步。
  • 快速生成html标签、head标签以及body标签。

(2)<body>标签中引入Vue模块 。
  • 首先需要定义一个标签<script>。然后还需要指定其type属性为:"module"。
  • 在该标签内部使用关键字"import"。跟上"{}",然后再写from '在线地址'。(单引号内:写的是一个在线的地址)
  • 在线地址可以去Vue官网里面查看。
1、进入Vue官网,找到安装,点击并进入。

2、首先看到"通过CDN使用Vue"。
  • 传统导入方式,不常用!
  • 它会把JS文件中的所有内容导入进来。

3、找到"ES"模块构建版本。
  • 它这里就提供了需要的地址。
  • ctrl+c——>回到vscode再ctrl+v即可。

4、这样如下,就完成了第一步。
  • "{}"里面写导入的内容——>createApp函数即可。

5、创建Vue的应用实例。
  • 在<script>标签里调用createApp函数。小括号里面通过一个大括号进行传参。到这里Vue的实例就有了。
  • 具体的传参后面说。
<script type="module">
        import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
        createApp({
            
        })
    </script>
(3)准备元素div。
  • 在body标签内。
  • 因为将来这个div还需要被Vue控制。所以还要给其一个id="app"即可。
<div id="app">

</div>
  • 被Vue控制——>在createApp({...})函数链式调用mount("#app")函数。
<body>
    <div id="app">

    </div>
    <script type="module">
        import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
        createApp({

        }).mount("#app");
    </script>
</body>
(4)构建用户界面。
1、准备数据。
  • 这时就需要在createApp({...})这对大括号里面传参了。
  • 定义一个data()函数。然后return{...},在大括号里面去定义数据。
  • 定义变量msg:'Hello Vue3'。
<!-- 引入Vue模块 -->
    <script type="module">
        import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
        //创建Vue实例
        createApp({
            data(){
                return{
                    //定义数据
                    msg:'Hello Vue3'
                }
            }
        }).mount("#app");
    </script>
2、通过插值表达式渲染页面。
  • 在div内部定义一个新的子标签——><h1>
  • 在<h1>内部通过插值表达式渲染页面。"{}"(两个花括号)里面写上对应定义的变量的键名即可。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>
    </div>
    <!-- 引入Vue模块 -->
    <script type="module">
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
        //创建Vue实例
        createApp({
            data() {
                return {
                    //定义数据
                    msg: 'Hello Vue3'
                }
            }
        }).mount("#app");
    </script>
</body>

</html>

  • 运行结果。


  • 如果再写一个div。不写对应的id值。
  • 插值表达式不能被Vue正常解析并渲染。
  • 因为这个div没有被Vue接管。Vue不会去解析这个插值表达式
<div id="app">
        <h1>{{msg}}</h1>
    </div>
    <div>
        <h1>{{msg}}</h1>
    </div>

三、总结。

(1)Vue的使用步骤。
1、准备工作。
  • 引入Vue模块。import {...} from 'Vue官方给的地址'。且这里引入的时候是按需引入了一个createApp函数。
  • 创建Vue的应用实例。调用createApp函数。
  • 定义元素(div)。并且交给Vue控制。通过链式调用mount()方法,并且在参赛指定需要控制的元素id即可。
2、构建用户界面。
  • 准备数据。在createApp函数的"{}"内部使用data()函数,内部通过return{...}定义变量,返回一个JS对象。在JS对象内部写上Vue需要的数据。
  • 最后使用插值表达式把Vue的数据——>渲染到视图展示。
  • 插值表达式是两对"{}"。在内部写上对应的键名即可。
  • 注意:插值表达式一定要写到Vue控制的元素范围内,写到外部无任何效果

 

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

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

相关文章

SpringMVC学习记录(三)之响应数据

SpringMVC学习记录&#xff08;三&#xff09;之响应数据 一、页面跳转控制1、快速返回模板视图2、转发和重定向 二、返回JSON数据1、前置准备2、ResponseBody 三、返回静态资源1、静态资源概念2、访问静态资源 /*** TODO: 一个controller的方法是控制层的一个处理器,我们称为h…

Spring WebFlux 核心原理(2-3)

1、Project Reactor 高级 1.1、响应式流的生命周期 要理解多线程的工作原理以及 Reactor 中实现的各种内部优化&#xff0c;首先必须了解 Reactor 中响应式类型的生命周期。 1.1.1、组装时 流生命周期的第一部分是组装时&#xff08;assembly-time&#xff09;。 Reactor 提供…

Python爬虫与Web渗透测试入门指南——初学者防踩雷

目录 Python爬虫与Web渗透测试入门指南一、学习方向和基础知识Python爬虫学习方向Web渗透学习方向 二、具体知识点总结三、学习流程和典型案例案例1&#xff1a;Python爬虫 - 简单网页数据爬取案例2&#xff1a;Web渗透 - SQL注入漏洞检测与利用案例3&#xff1a;Python爬虫 - …

apache-seata-2.1.0 AT模式使用篇(配置简单)

最近在研究seata的AT模式&#xff0c;先在本地搭建了一个演示demo&#xff0c;看看seata是如何使用的。在网上搜的demo&#xff0c;配置相对来说都比较多。我最终搭建的版本&#xff0c;配置较少&#xff0c;所以写篇文章分享下&#xff0c;希望能帮到对seata感兴趣的小伙伴。先…

Java代码与数据库纽带——JDBC

ok&#xff0c;看了题目&#xff0c;就可以知道今天要分享的是JDBC 讲这个这之前&#xff0c;想讲讲之前的。 之前我们操作数据库基本都是通过MySQL客户端&#xff0c;进行编写sql语句来操作的。 但是我们在开发中一般都是通过代码来操控数据库的。 而且在我们日常开发中&a…

navicat pg库安装mysql fdw 外表扩展

在Windows上手动安装mysql_fdw&#xff08;MySQL Foreign Data Wrapper&#xff09;通常涉及一系列步骤&#xff0c;包括下载源码、编译、配置和测试。以下是一个详细的指南&#xff1a; 一、下载mysql_fdw源码 访问mysql_fdw的GitHub发布页面&#xff0c;选择最新版本的源码…

智能提醒助理系列-jdk8升级到21,springboot2.3升级到3.3

本系列文章记录“智能提醒助理”产品建设历程&#xff0c;记录实践经验、巩固知识点、锻炼总结能力。 本篇介绍技术栈升级的过程&#xff0c;遇到的问题和解决方案。 一、需求出发点 智能提醒小程序 当前使用的是jdk8&#xff0c;springboot2.3,升级到jdk21和springboot3.3 学…

雷军-2022.8小米创业思考-11-新零售:用电商思维做新零售,极致的效率+极致的体验。也有弯路,重回极致效率的轨道上。

第十一章 新零售 当我们说到小米模式的时候&#xff0c;其实我们说的是两件东西&#xff1a; 一是小米模式的本质&#xff0c;即高效率的商业模式&#xff1b; 另一件是小米这家公司具象的商业模式&#xff0c;这是小米在实践中摸索、建立的一整套业务模型。 从2015年到202…

人工智能——小白学习指南

知孤云出岫 目录 1. **智能评测系统**2. **个性化学习路径推荐**3. **虚拟学习助手**4. **学习行为分析**5. **数据驱动的教学决策**6. **自动化课程推荐**7. **数据隐私与安全保护** 人工智能知识点的总结和学习路线&#xff0c;以数据表格形式呈现&#xff0c;并附带在教育行…

【深度学习基础】常用图像卷积核类型

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;深度学习_十二月的猫的博客-CSDN博客 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 1. 前言 2. 常…

SpringCloud框架学习(第一部分:初始项目搭建)

目录 一、SpringBoot和SpringCloud版本选型 1.Springcloud版本选择 2.Springcloud版本选择 3.Springcloud Alibaba版本选择 4.SpringCloud VS SpringBoot VS SpringCloud Alibaba版本三者制约对应关系 二、SpringCloud介绍 1.单体架构 2.微服务架构 3.springcloud 4.S…

【动手学运动规划】 4.1 图搜的基础

&#x1f3f0;代码及环境配置&#xff1a;请参考 环境配置和代码运行! 4.1.1 基础概念 4.1.1.1 Configuration Space(配置空间) configuration: 机器人上每一点位置的完整说明degrees of freedom: 机器人能够独立移动或旋转的关节数量&#xff08;下图所示有4个自由度&#x…

如何用彩屏显示精美的动画

1什么样的动画是精美的&#xff1f; 1&#xff09;视觉暂留 视频播放的原理基于人眼的视觉暂留现象。‌视频是由一系列静态图像&#xff08;帧&#xff09;组成的&#xff0c;这些图像以特定的频率&#xff08;帧率&#xff09;连续播放&#xff0c;使得人眼无法区分单帧图像&…

信息安全工程师(81)网络安全测评质量管理与标准

一、网络安全测评质量管理 遵循标准和流程 网络安全测评应严格遵循国家相关标准和流程&#xff0c;确保测评工作的规范性和一致性。这些标准和流程通常包括测评方法、测评步骤、测评指标等&#xff0c;为测评工作提供明确的指导和依据。 选择合格的测评团队 测评团队应具备相关…

【CTFN】基于耦合翻译融合网络的多模态情感分析的层次学习

同样用了翻译模块的论文->MTMSA 代码地址->github地址 abstract 多模态情感分析是一个具有挑战性的研究领域&#xff0c;涉及多个异构模态的融合。主要的挑战是在多模式融合过程中出现一些缺失的模式。然而&#xff0c;现有的技术需要所有的模态作为输入&#xff0c;因…

1.每日SQL----2024/11/7

题目&#xff1a; 计算用户次日留存率,即用户第二天继续登录的概率 表&#xff1a; iddevice_iddate121382024-05-03232142024-05-09332142024-06-15465432024-08-13523152024-08-13623152024-08-14723152024-08-15832142024-05-09932142024-08-151065432024-08-131123152024-…

安利一款开源企业级的报表系统SpringReport

SpringReport是一款企业级的报表系统&#xff0c;支持在线设计报表&#xff0c;并绑定动态数据源&#xff0c;无需写代码即可快速生成想要的报表&#xff0c;可以支持excel报表和word报表两种格式&#xff0c;同时还可以支持excel多人协同编辑&#xff0c;后续考虑实现大屏设计…

使用ookii-dialogs-wpf在WPF选择文件夹时能输入路径

在进行WPF开发时&#xff0c;System.Windows.Forms.FolderBrowserDialog的选择文件夹功能不支持输入路径&#xff1a; 希望能够获得下图所示的选择文件夹功能&#xff1a; 于是&#xff0c;通过NuGet中安装Ookii.Dialogs.Wpf包&#xff0c;并创建一个简单的工具类&#xff1a; …

RHCE---搭建lnmp云存储

一、恢复快照后&#xff0c;检查安全性&#xff08;查看selinux 以及防火墙&#xff09; 二、搭建LNMP环境 [rootserver ~]# yum -y install nginx mariadb-server php*三、上传软件 1、将nextcloud-25.0.1.zip压缩包传递到根目录下 2、解压缩nextcloud-25.0.1.zip &#xf…

Day95 Docker

Docker的使用 1、Docker是什么 docker是一个用来管理镜像的容器 容器(container)&#xff1a;可以装东西 镜像( image )&#xff1a;所谓的镜像&#xff0c;你可以认为就是一个虚拟机 虚拟机&#xff1a;用软件代理硬件来模拟整个计算机的这样一套软件就成为 虚拟机 镜像说白了…