vue学习笔记001-基础语法

最新推荐文章于 2024-11-12 11:19:19 发布

雾町

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量89

点赞数

分类专栏： vue 文章标签：前端 vue javascript

本文链接：https://blog.csdn.net/weixin_43819595/article/details/118933738

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在html中定义变量：{{变量名}}
在js中需要实例化一个vue对象

new Vue({
　　el:"#box",
　　data:{ }，
　　methods:{}
});

<!DOCTYPE html>
<html>
<head>
	<title>vue入门</title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="box">
		<div>姓名：{{name}}</div>
		<div>性别：{{sex}}</div>
		<button onclick="change()">修改信息</button>
		<button onclick="Info()">弹出信息</button>
	</div>
</body>

<script type="text/javascript">
	let vm = new Vue({
		el:"#box",
		data:{
			name:"张三",
			sex:"男"
		},
		methods:{
			test(){
				alert("姓名："+this.name+"\n性别："+this.sex);
			}
		}
	});

	function change(){
		vm.name = "李四";
		vm.sex = "女"
	}

	function Info(){
		vm.test();
	}
</script>
</html>