Vue.js学习笔记 (2)

Vue.js学习笔记（2）

学习资料：黑马程序员Vue教程(BV12J411m7MG)

②本地应用

2.显示切换，属性绑定

（v-show、v-if、v-bind）

v-show

根据表达式的真假，切换元素的显示和隐藏

（例如广告、遮罩层）

无论v-show后面写什么，都会解析为布尔值，从而判断是否显示。

总结：

• v-show指令的作用是：根据真假切换元素的显示状态
• 原理是修改元素的display，实现显示隐藏
• 指令后面的内容，最终会被解析为布尔值
• 值为true元素显示，值为false元素隐藏
• 数据改变之后，对应元素的显示状态会同步更新

v-if

根据表达式的真假，切换元素的显示和隐藏（操纵dom元素）

总结：

• v-if指令的作用是：根据表达式的真假切换元素的显示状态
• 本质是通过操纵dom元素来切换显示状态；
• 表达式的值为true，元素存在于dom树中，为false，从dom树中移除
• 频繁的切换使用v-show，反之使用v-if，前者的切换消耗小

v-bind

设置元素的属性（比如src，title，class）

格式：v-bind: 属性名=表达式

v-bind可以省略

总结：

v-bind指令的作用是：为元素绑定属性

完整的写法是v-bind：属性名

简写的话可以直接省略v-bind，只保留：属性名

需要动态的增删class加你使用对象的方式

v-for

根据数据生成列表结构

v-for指令的作用是：

• 根据数据生成列表结构
• 数组经常和v-for结合使用
• 语法是（item，index）in数据
• item和index可以结合其他指令一起使用
• 数据长度的更新会同步到页面上，是响应式的

v-on补充

传递自定义参数，事件修饰符

总结：

• 事件绑定的方法写成函数调用的形式，可以传入自定义参数
• 定义方法时需要定义形参来接受传入的实参
• 事件的后面跟上**.修饰符**可以对事件进行限制
• .enter可以限制触发的按键为回车
• 事件修饰符有多种

v-model

获取和设置表单元素的值（双向数据绑定）

• v-model指令的作用是便捷的设置和获取表单元素的值
• 绑定的数据会和表单元素值相关联
• 绑定的数据←→表单元素的值（双向关联）

③网络应用

Vue结合网络数据开发应用

axios

axios：网络请求库

axios+vue ：结合Vue一起

总结：

• axios必须先导入才可以使用
• 使用get或post方法即可发送对应请求
• then方法中的回调函数会在请求成功或失败时触发
• 通过回调函数的形参可以获取响应内容，或错误信息。

axios + vue

axios如何结合vue开发网络应用

总结：

• axios回调函数中的this已经改变，无法访问到data中数据
• 把this保存起来，回调函数中直接使用保存的this即可
• 和本地应用的最大区别就是改变了数据来源