跟着文档学框架——Vue2
2018-03-07 本文已影响0人
璐_bf37
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue实例</title>
<script src="vue.js"></script>
</head>
<body>
<button v-on:click="appear" id="example">就是这里，没有宝藏哦~</button>
<script>
实现双向绑定
var data1 = { a: 1 }; //设定元素属性及初值
var vm = new Vue({ //新建vue
data:data1 //绑定
});
vm.a = 2;
console.log(data1.a);
data1.a = 3;
console.log(vm.a);
预知需要改变的系列属性 提前在data中设定初值
var data2 = { a:1 };
var vm2 = new Vue({
data:data2
});
vm2.b=5;
console.log(data2);//未能读取 data2.b 属性及值，需要在data中设初值
var data2_ = { a:1,b:0 };
var vm2_ = new Vue({
data:data2_
});
vm2_.b=5;
console.log(data2_);//能购读取 data2.b 属性及值，值为5
举例data属性及初值
/*
data:{
newTodoText:'',
visitCount:0,
hideCompletedTodos:false,
todos:[],
error:null
}*/
Vue实例 设定了一些有用的实例属性以及方法 用 $作为前缀区分 内置不需要设初值
var data3 = { a: 1 };
var vm3 = new Vue({
el: '#example',
data: data3,
methods:{
appear:function(){
data3.a == 2?data3.a =1:data3.a =2;
}
}
});
console.log(vm3.$data === data3); // => true
console.log(vm3.$el === document.getElementById('example'));// => true
// $watch 是一个实例方法
vm3.$watch('a', function (newValue, oldValue) {
// 这个回调将在 `vm.a` 改变后调用
alert('噔 噔 噔 噔~ ');
alert('啥都没有*(^-^)* ')
});
生命周期钩子 在vue中补充添加属性及值，指向原来的参数
// created 钩子可以用来在一个实例被创建之后执行代码：
new Vue({
data:{ a:1 },
created:function(){
console.log('a is:'+this.a);//可以在内部执行
}
});
var vm4_ = new Vue({
data:{ a:1 }
});
console.log(vm4_.a);//值为1
</script>
</body>
</html>
附带本节所有代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue实例</title>
<script src="vue.js"></script>
</head>
<body>
<button v-on:click="appear" id="example">就是这里，没有宝藏哦~</button>
<script>
//实现双向绑定
var data1 = { a: 1 }; //设定元素属性及初值
var vm = new Vue({ //新建vue
data:data1 //绑定
});
vm.a = 2;
console.log(data1.a);
data1.a = 3;
console.log(vm.a);
//预知需要改变的系列属性 提前在data中设定初值
var data2 = { a:1 };
var vm2 = new Vue({
data:data2
});
vm2.b=5;
console.log(data2);//未能读取 data2.b 属性及值，需要在data中设初值
var data2_ = { a:1,b:0 };
var vm2_ = new Vue({
data:data2_
});
vm2_.b=5;
console.log(data2_);//能购读取 data2.b 属性及值，值为5
/*举例data属性及初值
data:{
newTodoText:'',
visitCount:0,
hideCompletedTodos:false,
todos:[],
error:null
}*/
//Vue实例 设定了一些有用的实例属性以及方法 用 $作为前缀区分 内置不需要设初值
var data3 = { a: 1 };
var vm3 = new Vue({
el: '#example',
data: data3,
methods:{
appear:function(){
data3.a == 2?data3.a =1:data3.a =2;
}
}
});
console.log(vm3.$data === data3); // => true
console.log(vm3.$el === document.getElementById('example'));// => true
// $watch 是一个实例方法
vm3.$watch('a', function (newValue, oldValue) {
// 这个回调将在 `vm.a` 改变后调用
alert('噔 噔 噔 噔~ ');
alert('啥都没有*(^-^)* ')
});
//生命周期钩子 在vue中补充添加属性及值，指向原来的参数
// created 钩子可以用来在一个实例被创建之后执行代码：
new Vue({
data:{ a:1 },
created:function(){
console.log('a is:'+this.a);//可以在内部执行
}
});
var vm4_ = new Vue({
data:{ a:1 }
});
console.log(vm4_.a);//值为1
</script>
</body>
</html>
