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

Vue学习:Hello小案例

使用Vue的目的:构建用户界面(需要使用容器 摆放这个界面的内容)

favicon.ico:1     GET http://127.0.0.1:5500/favicon.ico 404 (Not Found) 没有页签图标

在者服务器中 http://127.0.0.1:5500没有/favicon.ico

 

强制刷新网页:shift+网页上的刷新图标


这是因为我们使用vs的open with liver server 

会打开当前所处的页面,会在你的本机5500端口号上开一个小服务器,将整个工程的文件或者文件夹作为这台服务器的根资源(去里面找页签图标 没有就出错)

 自己设置一个这个图标在根目录

 ​​​


 使用{{}}    <!--  {{插值语法}}    -->

<!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="./js引入/测试版本/vue.js"></script>
	<!-- 多了vue函数 -->
</head>

<body>
	<!-- 准备容器 -->
	<div id="root">
		<h1>hello,{{name}}</h1>  <!--  {{插值语法}}	 -->
	</div>
	<script>
		//创建vue实例
		new Vue({ //const x = new Vue是多余的 直接new就可以
			el:'#root',//找到容器 通常为css选择器 选择对象
		  //el:document.getElementById('root'),//
		  //变化的内容给实例 然后使用配置项目配置
		  data:{//用户存储数据,数据供给el所指定的容器去使用
			name:'张三',
		
		  },

		});//传递一个参数 参数是一个对象 传递配置对象

	</script>
</body>

</html>


此时vue的小图标亮 


 想让vue工作,需要new创建一个vue实例,且只要传入一个配置对象。

容器里面的内容符合html规范。

混入了特殊的vue语法。容器里面的代码被称之为vue模板


解析流程:先有的容器,然后有的实例,当实例开始工作的时候,发现了容器,

        然后知道整个容器需要全部拿下,开始解析(解析扫描有没有自己的特殊语法)。

        拿到需要的内容,将需要替换的内容全部替换了(张三)

         生成全新的容器 div id=root的容器,里面的vue特殊语法的内容不在是原先的,而是张三。

        将解析完成的容器,放入页面,替换整个容器


VUE模板:提供模板。将vue工作成果知道往哪里放

相关文章:

  • ActiveMQ 笔记(十)Linux部署:单机与集群部署流程
  • java认证与证书
  • 极简的Http请求client推荐-OkHttp
  • JVM Metaspace内存溢出问题
  • Nacos2.1.2源码修改支持高斯,postresql
  • 使用JPA和Hibernate查询分页
  • Git 如何调整 commit 的顺序
  • 【并发】J.U.C线程池
  • 序列化--Serial
  • [go学习笔记.第十八章.数据结构] 1.基本介绍,稀疏数组,队列(数组实现),链表
  • Kafka - kafka环境配置以及参数分析
  • CVTE C/C++研发实习面试(凉)
  • 项目管理逻辑:日志\周报\月报, 一直要求写, 有用吗?
  • 数据结构和算法之如何建立图
  • Docker快速入门
  • C#悬浮窗口 图像背景
  • 公众号免费查题接口
  • 基于ssm高校档案管理系统源码
  • vue2升级vue3: TSX Vue 3 Composition API Refs
  • Vue响应式系统的作用与实现(一)
  • 前端Gitee + Jenkins自动化实战(转)
  • 【Android Studio程序开发】按钮触控---按钮控件Button
  • 《棒球大联盟2nd》:热血拼搏·棒球1号位
  • 计算机、软件专业常去的学习网站
  • 5 年经验年薪百万,一位阿里 P8 分享自己的成长干货
  • 【C++笔试强训】第三天
  • brew换源
  • G银行借助光伏互联网平台发展户用光伏金融业务,加速绿色转型 | 案例研究
  • JAVA基础语法以及一些常见的练习
  • 如何在 Spring Boot 项目中使用 Thymeleaf 和 Bootstrap 实现文件上传
  • 福建2022高考志愿几月几月号填报 截止日期什么时候
  • 海南高考616分能上什么大学,高考616分左右可以上的学校有哪些
  • 2022下半年教师资格证会延期吗 能正常考试吗
  • 2022游戏艺术设计专业就业方向及前景
  • 2022年福建美术联考考试题目
  • 复旦大学分数线2020 多少分能考上
  • 西安大学现在叫什么
  • 10岁女孩学声乐好吗 要注意什么
  • 上海视觉艺术学院2022艺术类专业各省级统考子科类对照表
  • 宁夏高考591分能上什么大学,高考591分左右可以上的学校有哪些