Vue的学习之数据与方法

前段期间,由于入职原因没有学习,现在已经正式入职啦,接下来继续加油学习。

一、数据与方法

文字备注已经在代码中,方便自己学习和理解

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 视图 -->
		<div id="app">
			{{a}}
		</div>
		<!-- 脚本 -->
		<script type="text/javascript">
			// 声明一个字典对象
			var data = {
				a: 1
			};
			// 用new声明一个Vue的示例对象
			var vm = new Vue({
				el: "#app",
				data: data
			});
			// $是表示VUE中的属性和方法,
			// 为了与自己定义的属性和方法区分开来
			// $watch是表示监听,第一个值表示监听的对象
			// 第二个时表示监听的回调函数
			vm.$watch('a', function(newVal, oldVal) {
				console.log(newVal, oldVal);
			})
			// 将vm中的data属性中的a的值进行了更改
			vm.$data.a = "Ryan"
		</script>

	</body>
</html>

本节学习完毕,接下来进入下一节学习!!!

相关推荐
传人once8 小时前
页面中心圆圈放大效果如何写
开发语言·javascript·ecmascript
web3d5209 小时前
Vue3 地图白屏排查清单:容器、弹窗与 ol-viewport 重复创建
vue.js·gis
光影少年10 小时前
为什么 JavaScript 中 0.1 + 0.2 !== 0.3,如何让其相等?
前端·javascript·算法
小雪崩10 小时前
嵌入式学习 day61-62:IMX6ULL驱动——系统移植
学习
一隅论数智11 小时前
OWL(Web Ontology Language)介绍与使用举例(二)
大数据·经验分享·笔记·学习·自然语言处理·学习方法·政务
我命由我1234511 小时前
Photoshop - Photoshop 使用内容识别填充移除对象
学习·职场和发展·产品运营·求职招聘·职场发展·学习方法·photoshop
梓雨枔12 小时前
JavaScript+快速学习,简单好用~
javascript·学习
木易 士心12 小时前
JavaScript 闭包原理和实践深度解析
开发语言·javascript·ecmascript
老王爱玩车12 小时前
自定义类型:结构体
c语言·开发语言·学习
ITOM运维行者12 小时前
PHP性能监控怎么做?从响应时间到慢函数的6个关键指标
前端·javascript·后端