开始使用Vue框架 —— Vue框架练习

最新推荐文章于 2024-01-22 11:17:28 发布

原创最新推荐文章于 2024-01-22 11:17:28 发布 · 327 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在HBuilderX中使用Vue框架进行数据绑定，包括配置元素、数据展示、自动执行函数、表格遍历、按钮交互及动态添加元素。通过实例演示了如何创建配置对象、设置事件监听和操作DOM来实现实时更新。

软件HbuilderX

1、Vue框架的数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app"></div>
	</body>
	<script>
		// vue框架
		function Vue(config){
			//1.从配置对象中找到元素的id
			var id = config.element;
			//2.根据id找到js对象
			var jsObject = document.getElementById(id);
			//3.从配置对象中找到数据
			var itemName = config.data;
			//4.让js对象显示数据 
			jsObject.innerHTML = itemName;
		}
		// 创建配置对象
		var config = {
			"element": "#app",
			"data": "mate10"
		}
		// 启动框架
		var vue = new Vue(config);
	</script>
</html>

在这里插入图片描述

小结

框架会从配置对象中找元素，找数据，把数据显示在元素上；
创建配置对象用element保存元素id，用data保存数据，启动框架；

2、自动执行方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app"></div>
	</body>
	<script>
		// vue框架
		function Vue(config){
			window.onload = config.mothed();
		}
		// 配置对象
		var config = {
			// mothed:存放自动执行的函数
			"mothed": function(){
				// 屏幕上弹出信息
				window.alert("run");
			}
		}
		// 启动框架
		var vue = new Vue(config);
	</script>
</html>

在这里插入图片描述

3、引入vue.js，使用占位符显示数据

可自行下载。
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<table border="2">
				<!-- 遍历数据 -->
				<tr v-for="item in itemList">
					<!-- 占位符 -->
					<td>
						{{item}}
					</td>
				</tr>
			</table>
		</div>
	</body>
	<script src="./vue.js"></script>
	<script>
		// 引入vue框架
		// 创建配置对象
		var config = {
			"el": "#app",
			"data": {
				itemList: ["mate10","mate20"]
			}
		}
		// 启动框架
		var vue = new Vue(config);
	</script>
</html>

在这里插入图片描述

4、多条数据的显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<table border="2">
				<!-- 遍历数据 -->
				<tr v-for="item in itemList">
					<!-- 占位符 -->
					<td>
						名称:{{item.name}}
					</td>
					<td>
						价格:{{item.price}}
					</td>
				</tr>
			</table>
		</div>
	</body>
	<script src="./vue.js"></script>
	<script>
		// 引入vue框架
		// 创建配置对象
		var config = {
			"el": "#app",
			"data": {
				itemList: [
					{"name": "mate10", "price": 1000},
					{"name": "mate20", "price": 3000},
				]
			}
		}
		// 启动框架
		var vue = new Vue(config);
	</script>
</html>

在这里插入图片描述

5、按钮设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<button v-on:click="insert">添加</button>
			<br>
			<button v-on:click="remove">删除</button>
		</div>
	</body>
	<script src="./vue.js"></script>
	<script>
		// 创建配置对象
		var config = {
			"el": "#app",
			"methods": {
				"insert": function(){
					window.alert("insert");
				},
				"remove": function(){
					window.alert("remove");
				}
			}
		}
		// 启动框架
		var vue = new Vue(config);
	</script>
</html>

在这里插入图片描述

6、实现元素添加并显示

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input id="itemName">
			<button v-on:click="insert">添加</button>
			<br>
			<table border="2">
				<tr v-for="item in itemList">
					<td>{{item.name}}</td>
					<td>{{item.price}}</td>
				</tr>
			</table>

		</div>
	</body>
	<script src="./vue.js"></script>
	<script>
		// 创建配置对象
		var config = {
			"el": "#app",
			"data": {
				"itemList": [{
					"name": "mate10",
					"price": 1000
				}]
			},
			"methods": {
				"insert": function() {
					// 找到输入框
					var input = document.getElementById("itemName");
					// 取到输入框的值
					var itemName = input.value;
					// 创建对象
					var item = {
						"name": itemName,
						"price": 3000
					}
					// 把对象放到集合中，放进去之后，界面会自动更新
					this.itemList.push(item);
				}
			}
		}
		// 启动vue框架
		var vue = new Vue(config);
	</script>
</html>