Vue.js入门 (一):

Vue.js核心:
是一个允许采用简介的模板语法来声明式地将数据渲染进DOM的系统

两个重要组成部分:
1、视图
2、脚本

实例

<!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">  /*div标签*/
   {{ message }} {{name}} /*文本式插入*/
 </div>
 
 <script type="text/javascript"> /*脚本*/
 var app = new Vue({   /*获得一个Vue的对象*/
 el: '#app',  /*代表元素,用id选择的方式选中上面定义的div*/
  data: {   /*  为在视图中所声明的变量,进行注册以及赋值*/
   message: 'Hello Vue!',
   name : "Vue"
  }
 });
 </script>
 </body>
</html>

vm(View Model):代表vue实例

实例

在这里插入代码片
2461
<!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 };		//在外层声明变量
var vm = new Vue({               //vue对象
 el   : "#app",
 data : data			//第一个data代表对象的属性,第二个data代表通过var定义的一个对象
});		//改变data.a与改变vm.a都会改变a
		//若想某个变量可响应式,则需要在var vm = new Vue以前进行声明,若想某对象不在响应式则用freeze()
vm.$watch('a', function(newVal, oldVal){
 console.log(newVal, oldVal);
})
vm.$data.a = "test...."
</script>
</body>
</html>

$data.a与data.a,vm.a的效果也是一样的

watch:获取变化前后的结果

格式
wm.$watch(‘要观察的变量’,回调函数(newVal,olVal){
console.log(newVal,olVal);
})

实例

vm.$watch('a',function(newVal,olVal){
	console.log(newVal,olVal);
})
//观察a变量的前后变化
发布了15 篇原创文章 · 获赞 0 · 访问量 286

猜你喜欢

转载自blog.csdn.net/weixin_46439490/article/details/104891871