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变量的前后变化