1月13-vue_html 结合vue.js拿不到数值-CSDN博客

本文链接：https://blog.csdn.net/caozhisanguo/article/details/122453067

本文介绍了Vue.js，一个用于构建用户界面的渐进式框架，强调其核心库专注于视图层，易于上手且便于与其他库或现有项目整合。Vue的特点包括好学、好用，可以通过在HTML中引入vue.js开始使用。文章详细讲解了Vue的基本概念，如数据绑定、指令系统（如v-if、v-show、v-for、v-model）、事件处理以及如何创建Vue实例。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!--
          1. my.js文件：  document.write("outer js");
          2. html网页： script标签的src属性引入外部定义的js文件
        -->
		<script type="text/javascript" src="js/my.js" ></script>
		<script>
			/*
			 * 在html网页里面引入javascript
			 *  方式一:
			 *        html网页里面,书写script标签,里面定义js代码
			 *        缺点:
			 *           1.js代码不能重复使用(不能在其它网页里面使用)
			 *           2.html标签和js代码耦合了,后期不便于修改和维护
			 *        优点:
			 *            html网页和js代码写在一起,便于阅读和调试.
			 *        小结: 在开发环境下(代码处于编码阶段),使用方式一.
			 *  方式二:
			 *        1.在外部定义一个js文件
			 *        2.在html网页里面,通过script标签的src属性引入外部的js文件
			 *        缺点:
			 *            js代码是单独的一个文件,所以在html阅读起来麻烦.
			 *        优点:
			 *           1.js代码可以重复使用
			 *           2. js代码和html网页解耦合,便于修改和维护
			 *        小结: 在生产环境下(代码全部发完毕,上线),使用方式二
			 */
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--引入外部的js文件: 定义的前端框架,提高开发效率-->
		<script src="js/b.js" type="text/javascript" ></script>
		<script>
			/*
			 *  需求:抽奖系统,随机抽取获奖的幸运用户.
     			分析思路:
     			1. 数组: 保存多个用户的姓名
     			2. 随机索引就可以了: 通过随机索引获取数组中的人名
			 */
			//1.定义一个数组:保存多个用户的姓名
			// 9个人名: 0-8
			var arr = ["小闹","小平","小黑","小明"];
			//2. 使用外部框架定义好的方法
			var index = getRandom(arr);
			//3.根据index从数组中获取人名: 人名也是随机的
			var name =arr[index];
			document.write(name);
		</script>
	</body>
</html>

框架(framework)
== 前端框架: 为开发前端代码服务的
比如: vue.js, node.js,reactive.js 等等
== 后端框架: 为开发后端代码服务的
比如: spring, mybatis, springboot,springcloud
== 自定义框架
比如: 刚才定义的前端框架 a.js
小结:
框架是一个"半成品"的应用, 我们实际开发中,基于框架开发,提高开发效率
需求:
抽奖系统,随机抽取获奖的幸运用户.
=============================================================
2.Vue

Vue (读音 /vjuː/，