当前位置： 首页 > news >正文

Vue：初识Vue

news 2026/5/19 8:38:40

1、首先要导入vue.js

 <!-- 当你使用script标签安装vue之后，上下文就注册了一个全局变量vue --><script src="../1.Vue/js/vue.js"></script>

不能直接调用vue()，需要new vue(),否则会报错。 

2、关于vue构造函数的参数options。。。

①Vue框架要求这个options参数必须是一个纯粹的js对象：{}

②在{}对象中可以编写大量的key:value对(键值对)，一个键值对就是一个配置项。

③主要是通过options这个参数来给Vue实例指定多个配置项。

<body><!-- <div id="app"></div> --><div class="as"></div><script>const myVue = new Vue({// template: '<h1>hello vue！！！</h1>',template: '<h3>你好，vue</h3>'})// myVue.$mount("#app")myVue.$mount(".as")</script>
</body>

3、关于template配置项：

①用来指定模板语句，模板语句是一个字符串形式的。

②模板语句可以是一个纯粹的HTML，可以是Vue中的特殊规则、可以是HTML代码+vue特殊字符。

③template后面的模板语句会被Vue框架的编译器编译，转换成浏览器能识别的HTML代码。

④template后面指定的是模板语句，但是模板语句中只能有一个根节点。

⑤只要data中的数据发生变化，模板语句一定会重新编译。(只要data变，template就会重新编译和渲染)

⑥如果使用template配置项的话，指定挂载位置的元素会被替换。

⑦可以将模板字符串写到HTML标签中，指定的挂在位置就不会被替换了。

4、模板语句的数据来源：

使用data选项给模板语句提供数据支持，data选项类型是 Object || Function  即(对象或函数)；

如果data是对象的话，对象必须是纯粹的对象，(含有零个或多个的key/value 对)；

{{}} 这是vue框架自己的一套语法，浏览器不能识别，即：模板语法中的插值语法。

5、$mount()方法

Vue实例都有一个$mount()方法，这个方法讲Vue实例挂载到指定位置。 

6、配置项：el

el配置项和$mount()方法可以有同样的效果。

作用：告诉vue实例去接管哪个容器，el是element的缩写，即元素

//el: '.divs'
el: document.querySelector(".divs")

7、浏览器提示信息

①提示信息：将productionTip属性改成false(即设置是否生成生产提示信息)

Vue.config是Vue的全局配置对象，默认值为true。如果是false则阻止生成提示信息。

Vue.config.productionTip = false

或者修改vue.js里面的productionTip = false

在chrome上面安装Vue.js devtools插件，去掉控制台前面的信息

 8、第一个vue实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../1.Vue/js/vue.js"></script>
</head>
<body><div class="divs"><div><h1>{{name}}</h1><h1>{{mood}}</h1></div></div><script>new Vue({// template: `<h1>今天刚开启{{name}}，真的非常{{mood}},//     其他演员是{{actors[0].name}}:{{actors[0].age}}岁,//     {{actors[1].name}}:{{actors[1].age}}岁</h1>`,// template: `<div>//     <h1>{{name}}</h1>//     <h1>{{mood}}</h1>//     </div>`,data: {name: 'vue',mood: '开心',actors: [{name: '小兰子',age: 20},{name: '安欣',age: 40}]},// el: '.divs'el: document.querySelector(".divs")})// }).$mount(".divs")</script>
</body></html>

相关文章：

Vue：初识Vue

1、首先要导入vue.js <!-- 当你使用script标签安装vue之后&#xff0c;上下文就注册了一个全局变量vue --><script src"../1.Vue/js/vue.js"></script> 不能直接调用vue()&#xff0c;需要new vue(),否则会报错。 2、关于vue构造函数的参数opti…...

编程日记 2023/5/17 1:01:53

linux语言学习记录

文章目录前言一、linux文件结构二、指令三、Gvim编辑器1、命令模式2、底行命令四、正则表达式1、表达式匹配举例2、对文件里面内容进行操作3、使用 \( 和 )\ 符号括起正规表达式&#xff0c;即可在后面使用\1和\2等变量来访问和中的内容前言 记录自己学习linux的笔记&#xff…...

编程日记 2023/5/23 16:24:59

面向对象编程（进阶）7：面向对象特征三：多态性

一千个读者眼中有一千个哈姆雷特。 目录 7.1 多态的形式和体现 7.1.1 对象的多态性 举例&#xff1a; 7.1.2 多态的理解 7.1.3 举例 1、方法内局部变量的赋值体现多态 2、方法的形参声明体现多态 3、方法返回值类型体现多态 7.2 为什么需要多态性(polymorphism)&#x…...

编程日记 2023/5/24 1:33:05

vue尚品汇商城项目-day04【29.加入购物车操作（难点）】

文章目录29.加入购物车操作&#xff08;难点&#xff09;29.1加入购物车按钮29.2addCartSuce29.3购物车29.3.1 向服务器发送ajax请求&#xff0c;获取购物车数据29.3.2UUID临时游客身份29.3.3动态展示购物车29.4修改购物车产品的数量&#xff08;需要发请求&#xff1a;参数理解…...

编程日记 2023/5/30 0:35:53

KubeSphere 社区双周报 | 4.8 深圳站 Meetup 火热报名中 | 2023.3.17-3.30

KubeSphere 社区双周报主要整理展示新增的贡献者名单和证书、新增的讲师证书以及两周内提交过 commit 的贡献者&#xff0c;并对近期重要的 PR 进行解析&#xff0c;同时还包含了线上/线下活动和布道推广等一系列社区动态。 本次双周报涵盖时间为&#xff1a;2023.03.17-2023.…...

编程日记 2023/5/16 15:27:10

ChatGPT热炒之前 搜索引擎SEO算法已经悄然改变

2022年4月起&#xff0c;某度算法有了新的调整&#xff0c;这对于靠SEO获得流量的公司简直可以说是灭顶之灾。原本SEO从业者还指望跟之前一样&#xff0c;等算法调整稳定后&#xff0c;网站的自然排名还会再回来&#xff0c;但等到了10月份&#xff0c;仍然没有回暖的迹象&…...

编程日记 2023/5/26 11:30:02

【Linux】Mysql之视图的基本操作

一、什么是视图 MySQL 视图&#xff08;View&#xff09;是一种虚拟存在的表&#xff0c;同真实表一样&#xff0c;视图也由列和行构成&#xff0c; 但视图并不实际存在于数据库中。行和列的数据来自于定义视图的查询中所使用的 表&#xff0c;并且还是在使用视图时动态生成的。…...

编程日记 2023/5/27 14:12:25

《扬帆优配》西藏地震！美史上最严排放新规将出台，美股收涨

当地时间周四&#xff0c;美股遍及收高&#xff0c;科技股领涨。因耶稣受难日&#xff0c;美股4月7日&#xff08;周五&#xff09;休市&#xff0c;周四为美股本周最终一个买卖日&#xff0c;从本周状况来看&#xff0c;纳指与标普500指数均录得跌幅&#xff0c;别离跌1.1%和0…...

编程日记 2023/5/28 18:36:02

Python 小型项目大全 66~70

六十六、简单替换密码 原文&#xff1a;http://inventwithpython.com/bigbookpython/project66.html 简单替换密码用一个字母代替另一个字母。由于字母A有 26 种可能的替换&#xff0c;B有 25 种可能的替换&#xff0c;C有 24 种可能的替换&#xff0c;等等&#xff0c;所以可能…...

编程日记 2023/5/29 5:41:15

Barra模型因子的构建及应用系列八之Earning_Yeild因子

一、摘要 在前期的Barra模型系列文章中&#xff0c;我们构建了Size因子、Beta因子、Momentum因子、Residual Volatility因子、NonLinear Size因子、Book-to-Price因子和Liquidity因子&#xff0c;并分别创建了对应的单因子策略&#xff0c;其中Size因子和NonLinear Siz因子具有…...

编程日记 2023/5/30 0:37:34

2022蓝桥杯省赛——卡片

问题描述 小蓝有 k 种卡片, 一个班有 n 位同学, 小蓝给每位同学发了两张卡片, 一位同学的两张卡片可能是同一种, 也可能是不同种, 两张卡片没有顺序。没有两位同学的卡片都是一样的。 给定 n, 请问小蓝的卡片至少有多少种? 输入格式 输入一行包含一个正整数表示 n 。 输出…...

编程日记 2023/5/9 10:04:27

数据结构-快速排序

一.概要 快速排序是一种基于分治思想的排序算法&#xff0c;其基本思路是选取一个基准值&#xff08;pivot&#xff09;&#xff0c;通过一趟排序将待排序列分成两个部分&#xff0c;其中左半部分都小于基准值&#xff0c;右半部分都大于基准值&#xff0c;然后对左右两部分分…...

编程日记 2023/5/23 16:25:43

WuThreat身份安全云-TVD每日漏洞情报-2023-04-10

漏洞名称:Apple iOS/iPadOS 越界写入 漏洞级别:高危 漏洞编号:CVE-2023-28206 相关涉及:Apple iOS <16.4.0 漏洞状态:在野 参考链接:https://tvd.wuthreat.com/#/listDetail?TVD_IDTVD-2023-08810 漏洞名称:PHPGurukul Bank Locker Management System SQL 注入 漏洞级别:高…...

编程日记 2023/5/30 0:54:12

IDEA中查看源码点击Download Sources时出现Cannot download sources的问题复现及解决

IDEA中查看源码点击Download Sources时出现Cannot download sources的问题复现及解决 注意&#xff1a;实验环境的IDEA版本&#xff1a;2021.3.1 1、问题描述 1.1、当想看源码时&#xff0c;点击Download Sources 1.2、此时出现了Cannot download sources 2、解决办法 2.1、…...

编程日记 2023/5/30 0:54:52

R+VIC模型融合实践技术应用及未来气候变化模型预测/SWAT/HSPF/HEC-HMS

在气候变化问题日益严重的今天&#xff0c;水文模型在防洪规划&#xff0c;未来预测等方面发挥着不可替代的重要作用。目前&#xff0c;无论是工程实践或是科学研究中都存在很多著名的水文模型如SWAT/HSPF/HEC-HMS等。虽然&#xff0c;这些软件有各自的优点&#xff1b;但是&am…...

编程日记 2023/5/26 19:47:50

Python 02 数据类型(04元组)

一、元组 元组和列表的唯一不同&#xff1a;不能直接对元组的元素进行修改&#xff0c;删除&#xff0c;添加。 不能修改 1.1 创建元组 1.1.1 创建一个空元组 touple1() # ‘() 里面没有元素&#xff0c;表示为空元组 1.1.2 元组可以容纳任意数据类型的数据的有序集合&…...

编程日记 2023/5/16 5:40:00

WMS：入库库作业流程状态定位

系列文章目录 例如&#xff1a;第一章 WMS&#xff1a;入库库作业流程状态定位 目录 系列文章目录 文章目录 前言 一、入库订单作业状态 二、入库任务级作业状态 1.收货作业 2.验收作业 总结 前言 WMS系统在仓储作业的管理中发挥着至关重要的作用&#xff0c;其核心优势在于强大…...

编程日记 2023/5/29 5:43:56

蓝易云：Linux系统【Centos7】如何配置完整的CC攻击防护策略

完整的CC攻击防护策略包括以下步骤&#xff1a; 1. 调整内核参数 在CentOS 7系统中&#xff0c;可以通过修改内核参数来增加系统对CC攻击的抵抗力。具体操作如下&#xff1a; &#xff08;1&#xff09;打开sysctl.conf文件&#xff1a; vim /etc/sysctl.conf &#xff08…...

编程日记 2023/5/9 10:15:01

编解码持续升级，「硬」实力铸就视频云最优解

算力时代&#xff0c;视频云需要怎样的 CPU&#xff1f; 在数据爆发式增长及算法日益精进的大背景下&#xff0c;属于「算力」的时代俨然到来。随着视频成为互联网流量的主角&#xff0c;日趋饱和的音视频场景渗透率、人类对“感官之限”的追求与突破、更多元化的场景探索及技术…...

编程日记 2023/5/24 20:47:51

贵金属技术分析的止损保护

前面说过我们这些小散户&#xff0c;最多也不过十几万或者几万美金的账户&#xff0c;没有必要想国际的一些大基金那样&#xff0c;又锁仓&#xff0c;又对冲什么的&#xff0c;我们资金小的投资者&#xff0c;足够灵活&#xff0c;自然有我们存活的方法。所以我们要注意发挥我…...

编程日记 2023/5/9 10:16:40

【独家首发】NotebookLM语义搜索底层架构图谱（基于2024 Q2最新API逆向分析，含7层向量映射逻辑）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;NotebookLM语义搜索功能全景概览 核心能力定位 NotebookLM 的语义搜索并非传统关键词匹配&#xff0c;而是基于用户上传文档&#xff08;PDF、TXT、Google Docs&#xff09;构建的私有知识图谱进行上下…...

编程新知 2026/5/19 6:55:57

基于ESP8266与TFT屏的桌面智能天气站DIY全攻略

1. 项目概述&#xff1a;打造一个桌面级的智能天气信息中心 几年前&#xff0c;当我第一次把玩ESP8266这块小芯片时&#xff0c;就被它“麻雀虽小&#xff0c;五脏俱全”的特性震撼了——一个比硬币大不了多少的模块&#xff0c;竟然内置了完整的Wi-Fi协议栈和可编程的微控制器…...

编程新知 2026/5/19 6:47:55

【NotebookLM文献综述加速器】：20年科研老兵亲测的5步高效综述法，3天完成导师认可的高质量综述？

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;NotebookLM文献综述辅助的底层逻辑与科研适配性 NotebookLM 由 Google Research 推出&#xff0c;其核心并非通用大语言模型问答&#xff0c;而是以用户上传的私有文档&#xff08;PDF、TXT 等&#xf…...

编程新知 2026/5/19 5:57:58

Qt开发避坑｜MQTT客户端频繁下线？竟是setClientId用错了！

做Qt物联网开发的小伙伴&#xff0c;大概率都遇到过这样的坑&#xff1a;本地调试时&#xff0c;MQTT客户端连接正常、消息收发流畅&#xff1b;可当另一个设备&#xff08;或另一个调试窗口&#xff09;启动后&#xff0c;前一个客户端突然被强制下线&#xff0c;日志里没明确…...

编程新知 2026/5/19 4:06:34

[通俗易懂]从“生产者-消费者”模型秒懂Java泛型PECS原则(别再死记硬背了)

1. 从超市购物理解PECS原则 想象你正在超市采购水果。水果区有各种水果篮&#xff1a;有的专放苹果&#xff0c;有的专放香蕉&#xff0c;还有个"混合水果区"放各种水果。这时候你会发现两个有趣的现象&#xff1a; 从水果区取水果&#xff1a;你可以从任何水果篮里安…...

编程新知 2026/5/19 3:13:26

别再死记硬背了！用Unity游戏开发中的真实案例，5分钟搞懂C#继承与多态

用Unity游戏案例5分钟掌握C#继承与多态的精髓 在Unity游戏开发中&#xff0c;面向对象编程&#xff08;OOP&#xff09;的概念如继承和多态不仅是理论上的抽象概念&#xff0c;更是构建灵活、可扩展游戏系统的基石。想象一下&#xff0c;当你需要设计一个包含多种敌人类型的游戏…...

编程新知 2026/5/19 3:04:48

docker-compose修改配置后实现开机自启

如图&#xff0c;我四个服务&#xff0c;都写了个简单的restart.sh的脚本。 要让这四个服务开机自动启动&#xff0c;最稳妥的方法是用 systemd 服务管理&#xff1a; 用 systemd 管理&#xff08;稳定可控&#xff09; 1. 创建统一的启动脚本 # 新建一个脚本目录 mkdir -p …...

编程新知 2026/5/19 2:00:30

NUS 提出 SkillGraph：让多模态多智能体边协作边进化

&#x1f4cc; 一句话总结&#xff1a; 本文提出 SkillGraph&#xff0c;将动态通信拓扑与自进化 Skill Bank 闭环耦合&#xff0c;让 VMAS 根据图像、问题和当前技能自动组织协作。在四个多模态基准、五种 MAS 结构和四类 VLM 上均稳定提升&#xff0c;最高平均提升约 3.0%。…...

编程新知 2026/5/19 0:13:51

猫抓：创新视角下的浏览器资源嗅探技术完全指南

猫抓&#xff1a;创新视角下的浏览器资源嗅探技术完全指南 【免费下载链接】cat-catch 猫抓 浏览器资源嗅探扩展 / cat-catch Browser Resource Sniffing Extension 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 猫抓&#xff08;cat-catch&#xff09;…...

编程新知 2026/5/19 0:03:26

listmonk容器资源监控告警：资源使用率阈值

listmonk容器资源监控告警&#xff1a;资源使用率阈值 你是否遇到过listmonk邮件列表管理器在高负载时突然卡顿&#xff1f;或者因服务器资源耗尽导致邮件发送中断&#xff1f;本文将详细介绍如何为listmonk容器配置资源监控与告警阈值&#xff0c;帮助你提前识别并解决资源瓶…...

编程新知 2026/5/18 23:22:35