Javascript的进阶版--VUE，使用vue载入基本使用结构，封装过的js更好用 刘金玉编程
Javascript的进阶版--VUE，使用vue载入基本使用结构，封装过的js更好用 刘金玉编程
刘金玉编程
发布于 2020-04-21 15:57:12
发布于 2020-04-21 15:57:12
开发工具：hbuilderx
内部项目新建后的界面：
html代码的head节点中载入
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
body节点中写一个div
<div id="app">
{{a}}
</div>
在body节点最后载入一个script节点，并开始js控制dom标签，这里使用vue模式来实时更新数据。
<script type="text/javascript">
var tda={a:111,b:222} //初始化数据对象
var vm=new Vue({ //这是vue的基本格式，需要载入一个节点和一个数据对象
el:"#app",
data:tda
});
//在vue中使用$符号相关的函数和变量来区分js中定义的变量和函数
vm.$watch("a",function(nv,ov){ //这个watch函数可以用来监控某个变量的数据变化情况，应为vue的数据是实时更新的，因此可以通过这个函数来观察数据更新前后的值，有利于开发调试
console.log(nv,ov)
});
tda.a="text" //这里重新对对象中的变量a进行赋值后，watch函数会观测到
</script>
项目文件结构：
全部源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{a}}
</div>
<script type="text/javascript">
var tda={a:111,b:222}
var vm=new Vue({
el:"#app",
data:tda
});
vm.$watch("a",function(nv,ov){
console.log(nv,ov)
});
tda.a="text"
</script>
</body>
</html>在西瓜视频中，找到作者【刘金玉】的更多视频教程吧！
长按关注公众号
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-04-12，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读