Vue-01

Vue框架

Vue官网: Vue.js   框架

 数据模型和view的通信就是依靠viewmodel的关键。 目前主流版本仍然是vue2版本。

Vue快速入门

1.新建一个HTML文件,引入Vue.js文件。Vue.js文件是官方引入的一个文件,我们如果要使用Vue就必须引入这个文件。

<!-- 1.引入Vue.js --><script src="js/vue.js"></script>

2.在JS代码区域,创建Vue核心对象,定义数据模型。我们需要new一个Vue然后传递一个对象,el代表就是Vue控制的区域,data代表的就是数据模型,有一个key就是message。

// 2.定义Vue对象 new Vue({el:"#app",//Vue接管的区域data:{message:"Hello Vue!!!"}})

3.编写视图。定义input输入框,绑定数据模型,定义的数据模型就会在输入框中展示出来。使用插值表达式 {{message}}展示数据。

<!-- 3.定义视图 --><div id="app"><input type="text" v-model="message">{{message}}</div>

 

 说明:

1. 在使用Vue之前需要引入Vue.js,这是必须的操作,引入位置在html文件的head部分;

2. 引入文件以后就需要在body之后使用script标签书写js代码,new Vue对象,然后传入对象,主要包括el代表的就是Vue接管的区域,这个区域使用id来对接,还有就是数据模型data-message,这个就是要展示的数据;

3.在body部分创建一个视图,就是要展示的界面,在标签中设置id为el的值,这样Vue就接管了该标签区域,然后设置完展示形式后加上插值表示{{message}}就可以了;

4.v-model是一个数据绑定的操作,而且是双向绑定,视图中数据的变化就会影响数据模型,二者互相影响。

总结

后面主要学习Vue的常用指令以及Vue的生命周期。

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

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

相关文章

【微服务】Nacos

一、安装 1、官网地址&#xff1a;https://nacos.io/download/nacos-server/ 2、启动&#xff1a;找到bin目录下的startup.cmd双击启动&#xff0c;或者打开一个命令窗口输入&#xff1a; startup.cmd -m standalone双击启动后如下&#xff1a;可以访问控制台地址 访问后的…

【Docker项目实战】使用Docker部署Paint Board在线创意画板工具

【Docker项目实战】使用Docker部署Paint Board在线创意画板工具 一、 Paint Board介绍1.1 Paint Board简介1.2 主要功能1.3 主要使用场景二、本次实践规划2.1 本地环境规划2.2 本次实践介绍三、本地环境检查3.1 检查Docker服务状态3.2 检查Docker版本3.3 检查docker compose 版…

在oracle下载jdk显示400 Bad Request Request Header Or Cookie Too Large

下载JDK17&#xff0c;官网地址&#xff1a;【https://www.oracle.com/cn/java/technologies/downloads/#jdk17-windows】 问题&#xff1a; 出现 400 Bad Request: Request Header Or Cookie Too Large 错误&#xff0c;通常是由于浏览器存储的 Cookies 或请求头过大所导致的…

实现一个Vue自定义指令

在 Vue 中&#xff0c;自定义指令允许你为 DOM 元素添加特定的行为或功能。下面是一个实现 Vue 自定义指令的简单示例&#xff0c;展示了如何创建一个指令&#xff0c;使得元素在鼠标悬停时改变背景色。 1. 创建自定义指令 在 Vue 2.x 中&#xff0c;你可以在 Vue.directive …

开发需求总结19-vue 根据后端返回一年的数据,过滤出符合条件数据

需求描述&#xff1a; 定义时间分界点&#xff1a;每月26号8点&#xff0c;过了26号8点则过滤出data数组中符合条件数据下个月的数据&#xff0c;否则过滤出当月数据 1.假如现在是2024年11月14日&#xff0c;那么过滤出data数组中日期都是2024-11月的数据&#xff1b; 2.假如…

2025 - AIDD - python的autodock vina 批量分子对接改进版本2.0-全自动对接,完全全自动对接

2025 - AIDD - python的autodock vina 批量分子对接改进版本2.0-全自动对接&#xff0c;完全全自动对接 import warnings from pathlib import Path import subprocess from itertools import product import numpy as np import pandas as pd from MDAnalysis import Univers…

【uniapp】轮播图

前言 Uniapp的swiper组件是一个滑块视图容器组件&#xff0c;可以在其中放置多个轮播图或滑动卡片。它是基于微信小程序的swiper组件进行封装&#xff0c;可以在不同的平台上使用&#xff0c;如微信小程序、H5、App等。 效果图 前端代码 swiper组件 <template><vi…

由于导包而引发的错误

今天在调试时发现删除功能无论如何都无法实现&#xff0c;于是调试找到了mapper层的错误但不知道为什么报错。以下是报错信息。 Caused by: org.apache.ibatis.binding.BindingException: Parameter userIds not found. Available parameters are [arg0, collection, list]at o…

网络安全-加密

1.概念 明文&#xff1a;需要被加密的消息&#xff0c;一般是人直接可以阅读理解的内容。(plaintext)密文: 被加密后的消息&#xff0c;一般是人不可直接阅读并理解的。(ciphertext)加密:将明文转换成密文的过程。(encryption)解密:将密文恢复成明文的过程。(decryption)加密…

音视频入门基础:MPEG2-TS专题(9)——FFmpeg源码中,解码TS Header的实现

一、引言 FFmpeg源码对MPEG2-TS传输流/TS文件解复用时&#xff0c;在通过read_packet函数读取出一个transport packet后&#xff0c;会调用handle_packet函数来处理该transport packet&#xff1a; static int handle_packets(MpegTSContext *ts, int64_t nb_packets) { //..…

Pytorch使用手册-使用 TensorBoard 可视化模型、数据和训练过程(专题十)

在 60 分钟速成课程中,我们展示了如何加载数据,将其传递通过我们定义的作为 nn.Module 子类的模型,训练该模型并在测试数据上进行测试。为了查看发生了什么,我们在模型训练过程中打印一些统计信息,以便了解训练是否进展顺利。然而,我们可以做得更好:PyTorch 与 TensorBo…

STM32 ADC --- 知识点总结

STM32 ADC — 知识点总结 文章目录 STM32 ADC --- 知识点总结cubeMX中配置注解单次转换模式、连续转换模式、扫描模式单通道采样的情况单次转换模式&#xff1a;连续转换模式&#xff1a; 多通道采样的情况禁止扫描模式&#xff08;单次转换模式或连续转换模式&#xff09;单次…

Android 引入 proto 项目及使用方法

Proto&#xff08;Protocol Buffers&#xff09;是Google开发的一种语言无关、平台无关的序列化结构数据的方法&#xff0c;它类似于JSON和XML&#xff0c;但相对于XML而言更小&#xff0c;相对于JSON而言解析更快&#xff0c;支持多语言。以下是将Proto引入Android项目的方法及…

Web day02 Js Vue Ajax

目录 1.javascript: 1.js的引入方式&#xff1a; 2.js变量 & 数据类型 & 输出语句&#xff1a; 模板字符串&#xff1a; 3.函数 & 自定义对象&#xff1a; 4. json 字符串 & DOM操作&#xff1a; 5. js事件监听&#xff1a; 6.js的模块化导入或者导出&a…

Kylin Server V10 下 RocketMQ 主备自动切换模式部署

一、NameServer简介 NameServer 是一个注册中心,提供服务注册和服务发现的功能。NameServer 可以集群部署,集群中每个节点都是对等的关系,节点之间互不通信。 服务注册 Broker 启动的时候会向所有的 NameServer 节点进行注册,注意这里是向集群中所有的 NameServer 节点注册…

Spacy小笔记:zh_core_web_trf、zh_core_web_lg、zh_core_web_md 和 zh_core_web_sm区别

Spacy小笔记 最近频繁用到spacy&#xff0c;就小记一下。 2024.11.29 zh_core_web_trf、zh_core_web_lg、zh_core_web_md 和 zh_core_web_sm区别 首先&#xff0c;它们都是预训练的中文模型&#xff1a; zh_core_web_trf:395M 架构: 基于 Transformer 架构&#xff08;bert…

芯片测试-RF中的S参数,return loss, VSWR,反射系数,插入损耗,隔离度等

RF中的S参数&#xff0c;return loss, VSWR&#xff0c;反射系数&#xff0c;插入损耗&#xff0c;隔离度 &#x1f4a2;S参数&#x1f4a2;&#x1f4a2;S11与return loss&#xff0c;VSWR&#xff0c;反射系数&#x1f4a2;&#x1f4a2;S21&#xff0c;插入损耗和增益&#…

Rust个人认为将抢占C和C++市场,逐渐成为主流的开发语言

本人使用C开发8年、C#开发15年、中间使用JAVA开发过项目、后期在学习过程中发现了Rust语言说它是最安全的语言&#xff0c;能够解决C、C的痛点、于是抽出一部分时间网上买书&#xff0c;看网上资料进行学习&#xff0c;这一学习起来发现和其它语言比较起来&#xff0c;在编码的…

解析类的泛型参数 Spring之GenericTypeResolver.resolveTypeArgument

GenericTypeResolver 是 Spring 的一个实用类&#xff0c;提供了在运行时解析泛型类型信息的能力。它包含了若干静态方法&#xff0c;可以用于解析类的泛型参数。GenericTypeResolver.resolveTypeArgument 方法可以用于解析一个具体类实现指定的泛型接口时&#xff0c;实际的泛…

tensorflow.python.framework.errors_impl.FailedPreconditionError

以下是我的报错 Traceback (most recent call last):File "e:\tool\anaconda\envs\openmmlab\lib\runpy.py", line 194, in _run_module_as_mainreturn _run_code(code, main_globals, None,File "e:\tool\anaconda\envs\openmmlab\lib\runpy.py", line 8…