Vue选项/数据/资源(基础结构介绍)
- data methods computed 里面定义的属性不能重名;
Vue的data(数据层)
- data属性值是对象,也可以是一个函数,如果一个函数就必须返回一个对象。
- data属性值是对象
data:{
// data中的数据最后都会放到vm这个实例上
msg:“hello”,
person:“12345”,
obj:{name:“邢民华”,age:18},
arr:[88,77,66]
}
vm.msg=“world”;- data属性值是函数
data:function(){
// data的属性值可以是函数,如果是函数一定要返回一个对象
// this --> 当前Vue的实例;
// console.log(this);
return {
msg:“今天是17号”,
a:100,
b:100
};
}
- data中的数据如果数组中某一项发生改变,不能引起视图的更新;如果是对象的属性名对应的属性值更新,会引发视图的更新;
数组arr vm.arr[0]=100;// 数据已经更新,但是视图没有更新- 数组内置的方法,能够引发原数组发生变化,可以引发视图的更新
pop push shift unshift splice sort reverse
<body>
<div id="a">
{{msg}}
{{person}}
{{obj.name}}
{{arr}}
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
// filter some find every reduce forEach map
// Vue : Vue是一个类
// 视图: 浏览器打开页面;
// 数据影响视图;当vue中的data数据发生改变,视图也会发生改变;
// 数据是响应式:reactive
let vm = new Vue({
// 这个对象中的属性名是固定的
el:"#a",// el : 代表Vue的语法的范围
data:{
// data中的数据最后都会放到vm这个实例上
msg:"hello",
person:"12345",
obj:{name:"邢民华",age:18},
arr:[88,77,66]
}
});
// vm.msg="world";
// console.log(vm);
//vm.arr[0]=100;// 数据已经更新,但是视图没有更新
//1. data中的数据如果数组中某一项发生改变,不能引起视图的更新;
如果是对象的属性名对应的属性值更新,会引发视图的更新;
//2. 数组内置的方法,能够引发原数组发生变化,可以引发视图的更新
// pop push shift unshift splice sort reverse
// vm.obj.name="刘宝华";
vm.arr=vm.arr.filter(item=>item>70);
// 数据会影响视图,如果想更改视图,只需要更改对应的数据,视图会自动更新;
// 采用了MVVM的原理;
// 在框架中,框架没有直接操作真正的DOM,而是操作了虚拟的DOM,更改数据以后,
就会更改虚拟的DOM,然后进行DOM-diff的对比,只需要把发生变化的那个地方进行替换,大大地提高了页面的性能;
//{type:"div",children:[{},{}]}
</script>
</body>
-------------------------------------------------------------
<body>
<div id="app">
<!-- {{msg}}
{{a}} -->
<div id="c">
{{a}}
</div>
<input type="text" v-model="b" yy="b">
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
//let a=100;
// 指令 : 以v-开头,放在行间属性上,有着特殊意义的一些词;就是指令;
// v-model :应用于表单元素;把data中数据放到input框中;
// 双向数据绑定:数据能影响视图 视图影响数据;
let vm = new Vue({
el:"#app",
data:function(){
// data的属性值可以是函数,如果是函数一定要返回一个对象
// 40% 60%
// this --> 当前Vue的实例;
// console.log(this);
return {
msg:"今天是17号",
a:100,
b:100
};
}
})
</script>
</body>
Vue的methods(控制层)
- 给元素绑定的事件的方法,需要放在methods中
methods:{
// 这里面存储的是键值对、
// 1.给元素绑定的事件的方法,需要放在methods中
// 2. methods中的方法名不能和data中属性重名
// 3. 事件中的this指向当前vue的实例
// 绑定事件时,可以有小括号,也可以没有
// 1.在绑定事件时,如果没有小括号,那么第一个参数就是事件对象
// 2. 如果有小括号,但是没有传参,那么e默认是undefined;
// 3. 如果需要事件对象,并且需要传参,那么需要在绑定时使用$event进行占位;
fn(e, a) { // e: 事件对象
console.log(e, a);
}
}
<body>
<div id="app">
<button @click="fn">提交</button>
<input type="text" @keyup="fn">
{{msg}}
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
// v-on: 给元素绑定事件的指令
// v-on:可以简写成@
let vm = new Vue({
el:"#app",
data:{
msg:"该吃饭了"
},
// 给元素绑定的事件的方法,需要放在methods中
methods:{
// 这里面存储的是键值对、
// 1.给元素绑定的事件的方法,需要放在methods中
// 2. methods中的方法名不能和data中属性重名
// 3. 事件中的this指向当前vue的实例
fn(){
// console.log(this);
// console.log(100);
this.msg="该下课了";
}
}
});
</script>
</body>
-----------------------------------------------------------------------------------
<body>
<div id="app">
<button @click="fn($event,100,200)">提交</button>
<input type="text" @keyup="fn">
{{msg}}
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: "该吃饭了"
},
methods: {
// 绑定事件时,可以有小括号,也可以没有
// 1.在绑定事件时,如果没有小括号,那么第一个参数就是事件对象
// 2. 如果有小括号,但是没有传参,那么e默认是undefined;
// 3. 如果需要事件对象,并且需要传参,那么需要在绑定时使用$event进行占位;
fn(e, a) { // e: 事件对象
console.log(e, a);
}
}
});
</script>
</body>
Vue的filters过滤器
过滤器 {{a | toFixed(2)}}
filters里的方法不是挂在在实例上,所以filters里的方法可以和data方法重名
toFixed(val,a){// 形参;
// 当进行解析编译时,就会执行这个方法,方法的返回最终会放到页面上
val:形参的值就是管道符前面的值a:toFixed传递的
return val.toFixed(a);// 这个函数返回什么,那么页面展示什么
},
<body>
<div id="app">
<!-- 这个toFixed的参数会传给filters中方法第二个参数; -->
{{a | toFixed(2)}}
{{b | toFixed(3)}}
{{8 | addZero}}
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm=new Vue({
el:"#app",
data:{
a:10.5679,
b:1.23456,
c:8
},
methods:{
},
filters:{// 过滤器
//filters里的方法不是挂在在实例上,所以filters里的方法可以和data方法重名
toFixed(val,a){// 形参;
// val:形参的值就是管道符前面的值a:toFixed传递的
return val.toFixed(a);// 这个函数返回什么,那么页面展示什么
},
addZero(num){
// 当进行解析编译时,就会执行这个方法,方法的返回最终会放到页面上
return num<10?"0"+num:num;
}
}
});
</script>
</body>
Vue的created(钩子函数)
这是一个钩子函数;当初始化vue时,会默认调用的一个回调函数
一般情况下;请求数据都是在created中执行获取数据
当new Vue时,没有渲染真实的DOM之前,会执行这个钩子函数created;
请求到数据立即对data中的数据赋值,那么当编译DOM结构时,采用最新的数据编译;
减少DOM的渲染;
钩子函数中的this都指向vue的实例;
<style>
.x{
font-size: 40px;
}
.y{
color:red;
}
</style>
</head>
<body>
<div id="app">
<div v-for="a in products">{{a}}</div>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script>
// 用请求回来数据渲染视图;
new Vue({
el:"#app",
data:{
products:[]
},
created(){// 这是一个钩子函数;当初始化vue时,会默认调用的一个回调函数
// 一般情况下;请求数据都是在created中执行获取数据
console.log(100);
// 当new Vue时,没有渲染真实的DOM之前,会执行这个钩子函数created;
请求到数据立即对data中的数据赋值,那么当编译DOM结构时,采用最新的数据编译;
减少DOM的渲染;
//钩子函数中的this都指向vue的实例;
this.getData();
},
methods:{
getData(){
axios.get("./carts.json").then(data=>{
// data.data就是咱们获取的数据
// console.log(data.data);
this.products=data.data;
});
}
},
filters:{
}
});
</script>
</body>
Vue的computed计算属性
computed: 计算属性
computed中属性不能喝data重名,也不能和methods重名
计算属性:当一个属性依赖多个属性改变时,一般采用computed方法;当依赖的属性发生改变时,会立即执行get方法,并且重新计算当前最新的val值,最后重新渲染视图;
computed :会默认走缓存,节省性能;
this --> Vue的实例
当依赖的属性发生改变时,会执行get方法
如果computed中的属性是函数,默认就是get;
get
当arr对象中的isSelected发生改变时,会默认触发一次get方法;
当获取使用val时,会默认把get的返回值给了val;
set
当设置更改val的值时,会默认执行computed的这个set方法
<body>
<div id="app">
<input type="checkbox" v-model="val"> 全选<br>
<ul>
<li v-for="a in arr">
<input type="checkbox" v-model="a.isSelected">{{a.name}}
</li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
arr:[{isSelected:false,name:"手机"},{isSelected:true,name:"电脑"}]
},
computed:{// 计算属性
// computed中属性不能喝data重名,也不能和methods重名
// 计算属性:当一个属性依赖多个属性改变时,一般采用computed方法;当依赖的属性发生改变时,会立即执行get方法,并且重新计算当前最新的val值,最后重新渲染视图;
// computed :会默认走缓存,节省性能;
val:{
get(){
// 当获取使用val时,会默认把get的返回值给了val;
// this --> Vue的实例
// console.log(100);
// 当arr对象中的isSelected发生改变时,会默认触发一次get方法;当依赖的属性发生改变时,会执行get方法
// console.log(100);
return this.arr.every(item=>item.isSelected);
},
set(a){
// 当设置更改val的值时,会默认执行computed的这个set方法
//console.log(a);// 代表的是当前val最新的值;
this.arr.forEach(item => {
item.isSelected=a;
});
}
},
sum(){
// 如果computed中的属性是函数,默认就是get;
return 100
}
}
})
</script>
</body>
computed的同异步
<body>
<div id="app">
{{a}}
<li v-for="b in arr">{{b}}</li>
</div>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
arr:[]
},
computed:{
a(){
// computed中不支持异步;
// 如果a的依赖数据是通过异步被更新的,那么a不能监听到最新发生的变化
let b;
axios.get("./carts.json").then((data)=>{
b=data.data;
});
// this.arr=[1,2,34,4]
// let b = 10;
// setTimeout(function(){
// console.log(200);
// b=88;
// },2000);
// return b;
return b;
}
}
});
</script>
</body>
</html>
Vue的watch-监听data中属性
<body>
<div id="app">
<!-- <input type="text" v-model="a"> -->
{{a}}
<button @click="fn"></button>
</div>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
// computed : 有缓存 当这个属性依赖多个属性计算而来;当依赖的属性发生改变以后,
会触发get方法;重新计算该结果;
// data中的属性不能喝methods中的重名,也不能和computed中重名,
// watch : 监听;监听的是data的属性
new Vue({
el:"#app",
data:{
arr:[],
a:100
},
computed:{
},
methods:{
fn(){
this.a = 1;
}
},
watch:{
a(newVal,oldVal){// 监听现有的属性,当属性发生改变以后,会做的一些事情;
//console.log(10);
// newVal : 最新的值
// oldVal : 上一次的值
console.log(newVal,oldVal);
}
}
});
</script>
</body>
watch的深度监听
<body>
<div id="app">
姓:<input type="text" v-model="person.firstName">
<br>
名:<input type="text" v-model="person.lastName">
<br>
姓名:<input type="text" v-model="person.fullName">
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
person: {
firstName: "",
lastName: "",
fullName: ""
}
},
computed: {
},
watch: {
// 如果监听了对象,当这个对象中的属性名对应的键值对发生改变以后,并不会触发监听的这个对象的函数;
因为这个引用数据类型的地址没发生改变;
// 把person改成对象的写法,handler相当于函数,deep:true是对这个person对象中的每一个属性进行监听,
当其中一个属性发生改变,也会触发handler这个函数;
// person: {
// handler(newVal) {
// // 这是个函数;两个参数分别是person这个对象改变之前改变之后的的值
// // console.log(newVal);
// console.log(1);
// },
// deep: true, // deep属性对对象进行深度监听。
// immediate: true //函数立即运行,初始化
// },
// 监听其中一个属性时,可以写成'对象.属性名'
"person.firstName": {
handler(newVal, oldVal) {
// 这是个函数;两个参数分别是person这个对象改变之前改变之后的的值
// console.log(100);
// console.log(newVal, oldVal);
console.log(newVal, oldVal);
console.log(1);
},
deep: true,
immediate: true //函数立即运行,初始化
}
}
})
</script>
</body>
Vue中computed和watch的区别
- 如果用computed和watch都可以实现,能用computed就不要用watch;原因是computed有缓存;
computed 和 watch的区别
computed 会默认走缓存,减少性能的开销
computed不支持异步
当一个属性依赖多个属性变化而变化时,这个属性适合用computed;多对一
watch :不走缓存,性能开销大
扫描二维码关注公众号,回复: 10493731 查看本文章watch支持异步
当这个属性发生改变会影响其他属性时,这个属性用watch,一对多
<body>
<div id="app">
姓:<input type="text" v-model="firstName">
名:<input type="text" v-model="lastName">
姓名: <input type="text" v-model="fullName">
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
// 如果用computed和watch都可以实现,能用computed就不要用watch;原因是computed有缓存;
// computed 和 watch的区别
// 1. computed 会默认走缓存,减少性能的开销
// 2. computed不支持异步
// 3. 当一个属性依赖多个属性变化而变化时,这个属性适合用computed;多对一
//1.watch :不走缓存,性能开销大
//2.watch支持异步
//3. 当这个属性发生改变会影响其他属性时,这个属性用watch,一对多
new Vue({
el:"#app",
data:{
firstName:"",
lastName:"",
fullName:""
},
computed:{
// fullName(){// 得到结果;监听的每一个依赖的属性,当依赖属性的发生改变,
就会执行该函数
// console.log(100);
// return this.firstName+this.lastName
// }
},
methods:{
},
watch:{
firstName(newVal){
// 这个属性中的this指向vue的实例
setTimeout(()=>{
// 箭头函数:this指向上一级作用域
this.fullName=newVal+this.lastName;
},1000)
},
lastName(newVal){
// 每改变一次值,都会触发一次
setTimeout(()=>{
console.log(100)
this.fullName=this.firstName+newVal;
},1000)
}
}
});
</script>
</body>