今天分享的内容主要是:
1、如何修改值,
2、阻止值发生变化freeze(),
3、打印输出新旧的值,watch()
4、以及$符号简单区分用户定义的变量
一切都在代码中~收藏学起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实例化</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{
{a}}
</div>
<!-- object.freeze()阻止修改现有的属性 -->
<div id="app-2">
<p>
{
{foo}}
</p>
<button v-on:click='foo="new"'>改变它</button>
</div>
<!-- 使用$前缀区分 用户定义的prop属性 -->
<div id="app-3">
{
{message3}}
</div>
<script>
var data = { a: 1 };
var vm = new Vue({//vm就是英文缩写的实例vuemodel
el: '#app',
data: data//属性:变量对象
});
//data.a='hi'
vm.$watch('a', function (newVal, oldVal) {
console.log(newVal, oldVal);//控制台查看修改之前的值,以及输出新的值
})
vm.$data.a = 'test...'//修改a的值
/***************************/
var obj={
foo:'原始值'
}
Object.freeze(obj)//阻止改变原有的属性值
new Vue({
el:'#app-2',
data:obj
})
/***************************/
var data = {message3:3}//给变量赋初值
var vm=new Vue({
el:'#app-3',
data:data//啥意思来着。。。
})
console.log(vm.$data===data)//true
console.log(vm.$el===document.getElementById('app-3'))//true
vm.$watch('message3',function(newVal,oldVal){
console.log(newVal,oldVal)
})//结果:新的值 3
vm.$data.message3='新的值'//新的值写在这里
</script>
</body>
</html>
结果: