- 博客(47)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 第一章：VUE的基础模板语法
目录Hello Vuev-cloak指令VUE数据填充v-once命令v-model双向绑定v-on事件v-on指令事件传参v-on事件修饰符v-on按键修饰符Vue自定义按键修饰符Vue实现简单计算器v-band属性绑定v-model底层实现vue样式绑定，对象方式vue样式绑定，数组方式vue样式绑定，结合方式vue样式绑定，style样式处理[v-if、...
2020-03-23 19:24:04
236
原创 vue实现选项卡案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> .tab ul { overflow: hidden;...
2020-03-23 19:08:44
308
原创 v-for循环
语法：v-for((item.index) in 循环体)item是循环的内容 index是下标<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt...
2020-03-23 19:04:39
269
原创 v-if、v-show分支操作
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello Vue&...
2020-03-23 19:01:48
158
原创 vue样式绑定，style样式处理
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello Vue&...
2020-03-23 19:00:10
280
原创 vue样式绑定，结合
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello Vue&...
2020-03-23 18:57:15
163
原创 vue样式绑定，数组方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello Vue&...
2020-03-23 18:55:13
618
原创 vue样式绑定，对象方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello Vue&...
2020-03-23 18:49:18
297
原创 v-model 的底层实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello Vue&...
2020-03-23 18:44:48
279
原创 v-band 属性绑定
Vue实现属性绑定 v-bandv-band 简写 “：”<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0...
2020-03-23 18:42:15
3363
原创 Vue实现简单计算器
实现简单计算器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do...
2020-03-23 18:38:27
290
原创 Vue-自定义按键修饰符
自定义按键修饰符<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D...
2020-03-23 18:37:08
143
原创 v-on按键修饰符
v-on按键修饰符@keyup.delete=“clearContent” 按下delete时触发@keyup.enter=“handleSubmit” 按下回车键触发<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta na...
2020-03-17 12:57:02
158
原创 v-on事件修饰符
v-on事件修饰符@click.stop=“handle1” VUE提供的阻止冒泡@click.prevent=“handle2” VUE提供的阻止默认行为<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo...
2020-03-17 12:54:43
167
原创 v-on指令事件传参
v-on指令的传参带参：<button @click=“handle(123,456,$event)”>点击3接参：handle: function (p, q, event) {<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <...
2020-03-17 12:52:46
143
原创 v-on事件
v-on事件绑定方法可以简写成 @符号在vue实例中，方法写在methods:{ } 里，与data:{ } 平级@click=“handle()” 可以传参，把需要传递的参数写在括号里，在methods中就可以接收到<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-...
2020-03-17 12:47:32
194
原创 v-model双向绑定
v-model双向绑定被v-model命令绑定的input框 会和data里的值同步<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...
2020-03-16 17:01:02
121
原创 v-once命令
v-once命令v-once 只编译一次，显示的信息不再修改，可以使用此指令， 提高性能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in...
2020-03-16 16:57:54
257
原创 VUE数据填充
v-text 填充纯文本：填充纯文本内容v-html 填充HTML片段：会解析HTML标签v-pre 填充原始信息 跳过编译过程<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="w...
2020-03-14 19:26:28
1231
原创 v-cloak指令
v-cloak指令v-cloak 隐藏插值表达式 直接显示内容（防止页面闪动）在CSS中定义 [v-cloak]：display：none在要用到的标签里加 v-cloak<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta nam...
2020-03-14 19:22:27
202
原创 HelloVue
Hello Vueel：元素挂载的位置（值可以是CSS选择器或者DOM元素）data：模型数据（值是一个对象）插值表达式：1.将数据填充到HTML标签中2.插值表达式支持基本的计算操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <...
2020-03-14 19:18:14
155
原创 VUE元数据及路由匹配
VUE元数据及路由匹配HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti...
2020-03-11 18:18:20
397
原创 VUE导航钩子
VUE导航钩子HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&...
2020-03-11 18:17:12
106
原创 VUE命名视图
VUE命名视图HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&...
2020-03-11 18:16:11
147
原创 VUE 手动访问和传参
VUE 手动访问和传参HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti...
2020-03-11 18:14:39
146
原创 VUE-子路由
VUE-子路由HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&...
2020-03-11 18:13:23
150
原创 Vue-router传参
Vue-router传参HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t...
2020-03-11 18:11:13
119
原创 Vue-router
Vue-router<router-link to="/"<router-viewvar router = new VueRouterHTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewp...
2020-03-11 18:09:55
101
原创 VUE插槽slots
VUE插槽slots插槽的使用HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
2020-03-10 21:00:58
691
原创 VUE混合mixins
VUE混合mixins把公共的部分抽取出来放到一个类中调用： mixins: [类名]HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt...
2020-03-10 20:56:50
230
原创 VUE自定义指令的配置和传参
VUE自定义指令的配置和传参新增传参封装binding.value：值为html页面v-pin设置的值binding.modifiers：值为v-pin.bottom.right的 bottom right值 是写在v-pin用 . 连接的值binding.arg：值为v-pin:true.bottom.right的 true值 是写在v-pin用 : 连接的值HTML<!D...
2020-03-10 20:53:46
1511
原创 VUE自定义指令
VUE自定义指令Vue.directive 自定义指令HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=...
2020-03-10 20:49:12
281
1
原创 VUE过滤器
VUE过滤器Vue.filter 过滤器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
2020-03-10 20:45:51
102
原创 平行组件（兄弟组件）通信
平行组件（兄弟组件）通信mounted 生命周期$on 立即执行$emit 快速触发事件HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi...
2020-03-10 20:40:11
257
原创 VUE子父组件通信
VUE子父组件通信实现点击显示余额HTML代码this.$emit()方法：触发事件快捷方式传两个值，第一个值为要触发事件的名字 第二个值为数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" c...
2020-03-10 20:35:04
147
原创 VUE父子组件通信
VUE父子组件通信父子组件通信主要用到 props: [ ]在HTML页面中给自定义标签添加自定义属性 在JS页面中使用props: [’ '] 接收自定义属性例：HTML：<自定义标签 username=“qhy”></自定义标签>JS：props: [‘username’]HTML部分<!DOCTYPE html><html lan...
2020-03-10 20:28:34
87
原创 使用VUE组件实现简单的点赞功能
使用VUE组件实现简单的点赞功能HTML页面 ↓<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
2020-03-09 20:10:45
7535
原创 VUE组件封装
VUE组件封装组件封装可以直接在HTML中写上标签来实现组件的功能HTML页面 ↓<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia...
2020-03-09 19:58:49
208
原创 VUE控制指令
VUE控制指令（v-if v-else-if v-else）HTML页面 ↓<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial...
2020-03-09 19:45:42
113
原创 VUE计算属性
VUE计算属性（可以写一个函数来讲计算值）本案例为计算总分和平均分计算属性：computed：{ } 和 data、methods 同级HTML页面 ↓<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewp...
2020-03-09 19:43:05
235
空空如也
重启电脑后PCIE的采集卡就识别不到了
2021-03-17
TA创建的收藏夹 TA关注的收藏夹
TA关注的人