Vue学习笔记-快速入门

整体代码如下：

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input v-model="username">
<!--插值表达式-->
{{username}}
</div>
<script src="js/vue.js"></script>
<script>
//1. 创建Vue核心对象
new Vue({
el:"#app",
data(){ // data() 是 ECMAScript 6 版本的新的写法
return {
username:""
}
}
/*data: function () {
return {
username:""
}
}*/
});
</script>
</body>
</html>

posted @ 2023-05-17 17:26 锅巴编程阅读(20) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue学习笔记-介绍&双向绑定

· 若依项目学习

· Vue&Element学习笔记

· Vue 安装 vue的基本使用 vue的初步使用步骤

· vue基础用法-初步使用vue

阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通

阅读目录(Content)

此页目录为空

锅巴编程

念两句诗

Vue学习笔记-快速入门

整体代码如下：

公告

个人信息

日历

搜索

常用链接

最新随笔

积分与排名

随笔分类

随笔档案

文章分类

文章档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	</head>
	<body>
	<div id="app">
	<input v-model="username">
	<!--插值表达式-->
	{{username}}
	</div>
	<script src="js/vue.js"></script>
	<script>
	//1. 创建Vue核心对象
	new Vue({
	el:"#app",
	data(){ // data() 是 ECMAScript 6 版本的新的写法
	return {
	username:""
	}
	}
	/*data: function () {
	return {
	username:""
	}
	}*/
	});
	</script>
	</body>
	</html>