Vue学习记录
Vue的MVVM
model层 把数据给到viewmodel层 然后再给到view层 显示出来
view的指令 给到viewmodel层解析 然后回调到medol层
指令
v-bind 动态绑定
1.动态绑定class属性
1）直接写在标签里
2）将布尔值存在 data 中
3）写入methods方法中
2.动态绑定 数组
案例：将数组打印出来，并要求点击哪一项，哪一项的文字颜色就变成红色
思路：将点击后的样式定义一个current类，然后动态获取current类
每个item都有一个索引号index，定义一个currentIndex=0,每点击一次 就将index赋值给currentIndex，使得当前的item改变样式
<h2 v-for="(item,index) in names"
:class="{current:currentIndex === index}"
@click="isClick(index)">
{{index+1}}-{{item}}
案例: 实现书籍购物车案例
几个重要小点
1.toFixed(2) 保留两位小数
2.使项目中的数据都保留两位小数的实现方法
1)可以定义一个方法，然后调用
getFinalPrice(price) {
return "￥" + price.toFixed(2);
},
2）加载器 filters的使用，
filters: {
showPrice() {
return "￥" + price.toFixed(2);
},
},
3.当数量 <=1 时，减号按钮不能点击
用到v-bind:disabled
<button @click="decrement(index)" v-bind:disabled="item.count <= 1">-
4.计算总价格时使用computed 计算属性 实现
computed: {
totalPrice() {
let totalPrice = 0;
for (let i = 0; i < this.books.length; i++) {
totalPrice += this.books[i].price * this.books[i].count;
}
return totalPrice;
},
},
5.移除按钮 使用 .splice()方法
removeHandle(index) {
this.books.splice(index, 1);
},
6.最后 当列表为零时 显示“购物车为零” 使用 v-if v-else 实现
知识点：
1.计算属性
计算属性computed （直接使用 不用加小括号）
computed:{
fullname:{
get(){
console.log("---调用了get方法----");
return this.firstname+' '+ this.lastname
},
set(){
console.log('---调用了set方法');
}
}
}
注：计算属性（计算之后只需要得到一个结果就好，所以set()方法省略 ）
计算属性 一般没有set()方法 只读属性
计算属性computed和methods的区别
计算属性只调用一次（computed 会看值有没有改变 没有改变就直接打印结果）
methods会每次调用方法函数
2.事件监听v-on
1)如果该方法不需要额外参数，那么方法后的（）可以不添加
2）如果需要同时传入某个参数，同时需要event时，可通过$event传入事件
情况一：事件调用方法没有参数
<button @click='btnclick1()'>按钮1
<button @click='btnclick1'>按钮1
methods: {
btnclick1(){
console.log('我是1号')
}
}
情况二：在事件定义时，写方法省略了小括号，但是方法本身需要一个参数
<button @click='btnclick2()'>按钮2
<button @click='btnclick2'>按钮2
methods: {
btnclick2(event){
console.log('我是2号',event)
}
}
情况三：在方法定义时，我们需要event,同时又需要其他参数
<button @click='btnclick3(456,$event)'>按钮3
<button @click='btnclick3'>按钮3
methods: {
btnclick3(abc){
console.log(abc,event)
}
}
3.v-on的修饰符
1）阻止冒泡 .stop
2）阻止默认事件 .prevent
3) 键盘点击回调 .enter(回车)
4.v-if v-else v-else-if
v-if:当满足了某个条件的时候，才执行什么
v-else:当不满足某个条件时，执行什么
v-else-if:多个条件的时候
5.问题思考：在有输入内容的情况下，切换了类型，文字依然显示之前的输入内容
原因：因为vue在进行dom渲染的时候 ，出于性能考虑，会尽可能的复用已经存在的元素，而不是创建新的元素
解决办法：如果不希望Vue出现类似重复利用的问题，可以给对应的input添加key,并且需要保证key值的不同
6.v-if 和 v-show 的区别
v-if:当条件为false时，包含v-if指令的元素根本就不会在dom中
v-show:当条件为false时，v-show知识在给元素添加display:none的样式
7.v-for 循环遍历
1）遍历数组
包含index
不包含index
2）遍历对象
value
value，key
value，key，index
8.v-model 双向绑定
Vue的v-model指令实现表单关系和数据的双向绑定
当输入框中输入内容的时候
1.input中的v-model绑定了message,所以会实时将输入的内容传递给message，message发生改变
2.当message发生改变时，因为上面使用了mustache语法，将message的值插入dom中，所以dom发生相应改变
所以通过 v-model 实现了双向绑定
v-model的原理
v-model 是一个语法糖
背后本质上是两个操作：
1.v-bind绑定一个value的属性
2.v-on指令给当前元素绑定input事件
9.v-model和radio/checkbox/select
您的选择是：{{isAgree}}
请选择你的喜好
你的选择是：{{fruit}}
你的选择是：{{hobbies}}
10.v-model的修饰符
1） .lazy:可以让数据在失去焦点或者点击回车的时候才同步数据
2) .number:当需要的类型是数字类型的时候
3) .trim:过滤掉内容两边的空格
11.组件化
1.调用vue.extend（）方法
创建组件构造器
2.调用vue.component()方法
注册组件
3.在Vue 实例的作用范围
使用组件
父子组件的通信
1.父传子：
通过props向子组件传递数据
2.子传父
通过事件$emit向父组件发送消息
浙公网安备 33010602011771号