19-(了解)v-bind动态绑定style(数组语法)P20 - 00:08
<!--数组语法-->
<h2 :style="[beaStyle,beaStyle1]">{{message}}</h2>
data:{
message:"你好啊",
beaStyle{background:'red',fontColor:'#ccc'},
beaStyle1:{fontSize:'50px'}
},
20-(掌握)计算属性的基本使用P21 - 00:33
1、某些情况需要对一些数据进行处理，或者转换。
可以用方法methods,或者计算属性computed。
计算属性里面也是定义函数，起名字尽可能用属性的名字来取名字，比如：fullName,展示的时候，不需要加小括号。
<h2>{{fullName}}</h2>
computed:{
fullName:function () {
return this.firstName+" "+this.lastName;
}
}
21-(掌握)计算属性的复杂操作P22 - 00:21
computed:{
totalPrice:function () {
let result = 0
//es5语法
// for(let i=0; i<this.books.length; i++){
// result +=this.books[i].price;
// }
// return result
//ES6语法
// for(let i in this.books){
// result +=this.books[i].price
// }
// return result
for(let book of this.books){
result += book.price
}
return result
}
}
22-(了解)课堂回顾P23 - 00:01
vue-day01--day02
一、邂逅vuejs
1.1认识vuejs（
- vue读音，
- vue的渐进式，
- vue的特点
）
1.2安装vue
- cdn引入
- 下载引入
- npm安装
1.3vue初体验
- hello vuejs（mustache语法-体验vue响应式）
- vue列表展示（v-for,后面给数组追加元素的时候，新的元素也可以在界面中渲染出来）
- vue计数器小案例（事件监听：：click--methods）
1.4vue中的mvvm
1.5创建vue时，options可以放哪些东西
- el:
- data:
- methods:
- 生命周期
二、插值语法
- mustache语法
- v-once
- v-html
- v-text
- v-pre
- v-clock
三、动态绑定属性v-bind
3.1v-bind绑定基本属性
- v-bind:src
- :href
3.2v-bind动态绑定class
- 对象语法：：class={类名：布尔值}
- 数组语法
3.3v-bind动太绑定style
- 对象语法、
- 数组语法
四、计算属性 computed
