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>

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

相关推荐
打不着的大喇叭32 分钟前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
百锦再1 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
快起来别睡了1 小时前
Vue 3 中的组件通信与组件思想详解
vue.js
优雅永不过时_v1 小时前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
WildBlue1 小时前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html
不讲道理的柯里昂1 小时前
Vue MathJax Beautiful,基于Mathjax的数学公式编辑插件
vue.js·开源
啷咯哩咯啷1 小时前
Vue3构建低代码表单设计器
前端·javascript·vue.js
用户26124583401611 小时前
vue学习路线(10.监视属性-watch)
前端·vue.js