Vue
关注
分享
扫一扫
文章平均质量分 50
小王的进阶之路
这个作者很懒，什么都没留下…
展开
-
Vue --天气应用
自定义参数可以让代码的复用性更高methods 中定义的方法内部，可以通过 this 关键字点出其他的方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-U.原创 2021-08-29 12:28:24 · 396 阅读 · 0 评论 -
Vue -- axios+Vue
axios 回调函数中的 this 已经改变，无法访问到 data 中数据把 this 保存起来，回调函数中直接使用保存的 this 即可和本地应用的最大区别就是改变了数据来源<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <.原创 2021-08-29 11:56:29 · 169 阅读 · 0 评论 -
Vue -- 记事本应用
列表结构可以通过 v-for 指令结合数据生成v-on 结合事件修饰符可以对事件进行限制，比如 .enterv-on 在绑定事件时可以传递自定义参数通过 v-model 可以快速的设置和获取表单元素的值基于数据的开发方式<html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>小黑记事本</title>.原创 2021-08-29 09:49:51 · 163 阅读 · 0 评论 -
Vue -- v-model指令
v-model指令的作用是便捷的设置和获取表单元素的值绑定的数据会和表单元素值相关联绑定的数据和表单元素的值是双向绑定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content.原创 2021-08-28 17:18:24 · 137 阅读 · 0 评论 -
Vue -- v-on指令
v-on使用文档事件绑定的方法写成函数调用的形式，可以传入自定义参数定义方法时需要定义形参来接收传入的实参事件的后面跟上 .修饰符 可以对事件进行限制.enter 可以限制触发的按键为回车事件修饰符有多种<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=原创 2021-08-16 18:49:45 · 130 阅读 · 0 评论 -
Vue -- v-for指令
v-for 指令的作用是：根据数据生成列表结构数组经常和 v-for 结合使用语法是 (item,index) in 数据item 和 index 可以结合其他指令一起使用数组长度的更新会同步到页面上，是响应式的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=".原创 2021-08-16 18:06:56 · 350 阅读 · 0 评论 -
Vue -- 图片切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do原创 2021-08-15 17:08:07 · 225 阅读 · 0 评论 -
Vue -- v-bind 指令
v-bind 指令的作用是：为元素绑定属性完整写法是 v-bind:属性名简写的话可以直接省略 v-bind，只保留 :属性名需要动态的增删 class 建议使用对象的方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <.原创 2021-08-15 15:55:24 · 169 阅读 · 0 评论 -
Vue -- v-if
v-if 指令的作用是：根据表达式的真假切换元素的显示状态本质是通过操纵 DOM 元素来切换显示状态表达式的值为 true，元素存在于 DOM 树中，为 false，从 DOM 树中移除频繁的切换用 v-show，反之使用 v-if，前者的切换消耗小<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Com.原创 2021-08-15 12:04:03 · 156 阅读 · 0 评论 -
Vue -- v-show 指令
v-show 指令的作用是：根据真假切换元素的显示状态原理是修改元素的 display，实现显示隐藏指令后面的内容，最终都会解析为布尔值值为 true 元素显示，值为 false 元素隐藏数据改变之后，对应元素的显示状态会同步更新<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" .原创 2021-08-14 16:42:49 · 563 阅读 · 0 评论 -
Vue - 计数器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do原创 2021-08-14 16:18:54 · 143 阅读 · 0 评论 -
Vue 本地应用
Vue 本地应用目录1. v-text 指令2. v-html 指令3. v-on 指令1. v-text 指令v-text 指令的作用时：设置标签的内容（textContent）默认写法会替换全部内容，使用差值表达式 {{}} 可以替换指定内容内部支持写表达式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpor原创 2021-01-05 17:50:35 · 158 阅读 · 0 评论 -
Vue 基础
1. Vue 官方文档Vue 官方文档链接2. 第一个 Vue 程序导入开发版本的 Vue.js创建 Vue 实例对象，设置 el 属性和 data 属性使用简介的模板语法把数据渲染到页面上<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini原创 2021-01-05 15:54:35 · 136 阅读 · 0 评论