【Vue】一:Vue的基础

news2024/10/7 16:25:25

文章目录

  • 1.第一个Vue程序
    • 1.1 创建Vue实例
    • 1.2 将Vue实例挂载到某个位置
  • 2. 模板语句数据来源
  • 3. Vue实例的数据对象
  • 4. template配置项详解

1.第一个Vue程序

在这里插入图片描述

在这里插入图片描述

1.1 创建Vue实例

(1)创建Vue实例
创建一个Vue实例:new Vue()

(2)Vue的构造函数的参数是options, 要求这个options参数必须是一个纯粹的js对象 {}。

在对象{}中是配置项,一个配置项格式为:key : value

(3)template配置项
template为模板。用来指定模板语句,模板语句是一个字符串形式。

模板语句是Vue框架自己制定的一套模板语法规则,模板语句可以是HTML代码,也可以是Vue中的特殊规则。

步骤:

1.2 将Vue实例挂载到某个位置

myVue.$mount('#app')就是将一个vue实例挂载到id=app的元素位置。
#app是ID选择器,类似于CSS。

vue实例都有一个方法叫$mount(),用来指定实例挂载的地方。

2. 模板语句数据来源

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

3. Vue实例的数据对象

{{message}}是 Vue 框架自己搞的一个语法,叫做插值语法(或者叫做胡子语法),可以从 data 中根据 key 来获取 value,并且将 value 插入到对应的位置。
在这里插入图片描述
在这里插入图片描述

4. template配置项详解

(1)template后面指定模板语法,但是模板语法只能有一个根节点
下面的例子有两个根节点,所以是错误的语法。
在这里插入图片描述

(2)只有data中的数据发生变化,模板语句一定会重新编译,重新渲染
(3)如果使用template配置项的话,指定挂载位置的元素就会被替换
(4)可以不使用template配置项,这些模板语句可以直接写到html标签当中,Vue能够找到并且编译。
(5)如果直接将模板语句写到HTML标签中,指定位置就不会替换。
(6)可以使用el代替$mount()
在这里插入图片描述
el: 'app' 作用是让Vue实例去接管id='app’的容器。

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

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

相关文章

SpringCloud Sentinel集成Gateway和实时监控

目录 1 Sentinel集成Gateway1.1 Sentinel对网关支持1.2 GateWay集成Sentinel 2 Sentinel控制台2.1 Sentinel控制台安装2.2 接入控制台2.3 可视化管理2.3.1 实时监控2.3.2 流控规则2.3.3 降级规则2.3.4 热点数据 1 Sentinel集成Gateway 参看: https://github.com/al…

Linux网络编程——Day12 两种高效的并发模式

今天继续学习高性能服务器框架,上一篇关于高性能服务器的基础知识连接如下: Linux网络编程—Day11 高性能服务器程序框架_Jane_Librastar的博客-CSDN博客https://blog.csdn.net/qq_43797135/article/details/130834354建议先看上一篇哦~ 两种高效的并发…

就业内推 | 京东云专场,IP/NP以上证书,15薪,员工旅游

01 京东云 招聘岗位:网络工程师 职责描述: 1. 整体网络的部署和运维,包括网络新建、扩容、及变更等; 2. 保障网络及相关业务的稳定运行,对问题和故障进行跟踪并最终解决; 3. 与业务部门或客户密切配合&…

网络编程先导知识

目录 1.什么是网络协议 2.什么是Socket Socket主要类型 3.C/S和B/S架构 4.网络字节序和主机字节序 5.局域网和广域网 6.IP地址和端口的概念 1.什么是网络协议 为了在计算机网络中做到有条不紊地交换数据,就必须遵守一些事先约定好的规则。这些规则明确规定了所…

【P30】JMeter 事务控制器(Transaction Controller)

文章目录 一、事务控制器(Transaction Controller)参数说明二、测试计划设计2.2.1、勾选 Generate parent sample2.2.1、勾选 Include duration of timer and pre-post processors in generated sample 一、事务控制器(Transaction Controlle…

Ubuntu22.04安装MySQL8

在 Ubuntu 22.04 上安装 MySQL 8,可以按照以下步骤进行: 安装MySQL需要在root用户下 sudo su -更新软件包列表: sudo apt update安装 MySQL 8: sudo apt install mysql-server安装过程中会提示设置 MySQL root 用户的密码。 确认…

STL-函数对象

目录 一、函数对象 1、基本概念 2、使用 二、谓词 1、基本概念 2、一元谓词 3、二元谓词 三、内建函数对象 1、基本概念 2、算数仿函数 3、关系仿函数 4、逻辑仿函数 一、函数对象 1、基本概念 概念: ①重载函数调用操作符的类,其对象常称…

关于Sql 中 on和where的粗略理解

先看到题:统计复旦用户8月练题情况 牛客中的 原地址 通过这个题我们来探讨where和on 描述 题目: 现在运营想要了解复旦大学的每个用户在8月份练习的总题目数和回答正确的题目数情况,请取出相应明细数据,对于在8月份没有练习过的…

【Ansys Fluent】All cell zones in Fluent may be automatically set to Fluid.

一、问题背景 在ansys meshing中保存划分完网格之后的结果时,弹出警报——All cell zones in Fluent may be automatically set to Fluid. 如果你忽视这个警报,打开fluent时。 接着就会将你想要设置为solid的区域识别成flow,从而生成一些错…

docker4_创建容器

docker4_搭建hadoop集群 1集群规划进入容器base_centos 2创建容器创建三个docker容器,分别作为三个结点(注意端口的设置)gpb_hdp_node3 容器gpb_hdp_node2 容器删除容器查看已经创好的容器gpb_hdp_node1容器(最后创建)问题1:容器名和 hostnam…

代码随想录算法训练营第十六天 | 104.二叉树的最大深度 559.n叉树的最大深度,111.二叉树的最小深度,222.完全二叉树的节点个数

代码随想录算法训练营第十六天 | 104.二叉树的最大深度 559.n叉树的最大深度,111.二叉树的最小深度,222.完全二叉树的节点个数 1.1 104.二叉树的最大深度 思路: 采用后序遍历确定递归函数的参数和返回值,确定终止条件&#xff…

AJAX 教程---菜鸟教程

文章目录 AJAX 简介AJAX 实例XHR 创建对象XHR 请求向服务器发送请求GET 还是 POST?GET 请求POST 请求url - 服务器上的文件 XHR 响应responseText 属性responseXML 属性 XHR readyState使用回调函数 AJAX 简介 AJAX 是一种在无需重新加载整个网页的情况下&#xff0…

CTR预估之DNN系列模型:FNN/PNN/DeepCrossing

前言 在上一篇文章中 CTR预估之FMs系列模型:FM/FFM/FwFM/FEFM,介绍了FMs系列模型的发展过程,开启了CTR预估系列篇章的学习。FMs模型是由线性项和二阶交互特征组成,虽然有自动学习二阶特征组合的能力,一定程度上避免了人工组合特征…

【Springboot】集成百度地图实现定位打卡功能

目录 第一章 需求分析 第二章 概要设计 第三章 详细设计 3.1 环境搭建 3.1.1 获取百度地图ak 3.1.2 创建springboot项目 3.2 配置application.properties 3.3 配置pox.xml 3.4 创建定位接口 3.5 创建前端页面 3.6 映射静态文件 第一章 需求分析 如图,当…

BERT论文核心点记录

BERT适合分类任务(整段分类后者词分类),对生成任务不友好 使用BERT的方法:只需要在预训练好的BERT基础上新增一个输出层,然后用标记好的数据进行有监督微调 Bidirectional Encoder双向Encoder实质上就是指Transforme…

【分享】用java和pathon实现小红书(Red Booklet)客服自动回复功能、技术实现分析

技术栈:python、java、android,进程管理、socket通信 客户需求: 客户需要在Red Booklet平台做一个可以24小时自动回复用户私信、评论、回关用户等行为的客服软件。他说他们公司有50个小红书号,十几个客服,急需一款代…

正则表达式和文本三剑客题型练习

​ 1、显示/etc/passwd文件中以bash结尾的行; 解释:使用 grep 工具来搜索文件 /etc/passwd 中匹配模式 bash$ 的行。bash$ 是一个正则表达式,其中 $ 表示行结尾。因此,bash$ 匹配以 bash 结尾的行。 grep bash$ /etc/passwd 运…

四元数转换为欧拉角(多解问题)

车辆行驶状态估计(4)中车辆横摆角信息在顺时针转向时存在明显的错误,进行记录输出 2023-05-25-aft02.txt 四元数: -0.00201210.00115721 -0.0005967610.999997 欧拉角:3.14039四元数: -0.00170584 -0.00…

RabbitMQ(2)、MQ的问题、消息可靠性

一、MQ的问题 基于上篇存在的问题 1. 问题说明 MQ在分布式项目中是非常重要的, 它可以实现异步、削峰、解耦,但是在项目中引入MQ也会带来一系列的问题。 今天我们要解决以下几个常见的问题: 消息可靠性问题:如何确保消息被成功送…

MySQL — SQL 优化

文章目录 SQL 优化一、插入数据二、主键优化2.1 数据组织方式2.2 页分裂2.3 页合并2.4 主键设计原则 三、 Order by 优化3.0 排序方式讲解3.1 升序/降序联合索引结构图示3.2 总结 四、Group by优化五、limit优化六、 count优化七、update优化七、update优化 SQL 优化 一、插入…