- 博客(47)
- 问答 (1)
- 收藏
- 关注
原创 第一章: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 171
原创 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 227
原创 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 174
原创 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 108
原创 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 186
原创 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 86
原创 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 535
原创 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 247
原创 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 204
原创 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 3238
原创 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 221
原创 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 100
原创 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 92
原创 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 96
原创 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 96
原创 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 135
原创 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 78
原创 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 188
原创 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 1137
原创 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 151
原创 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 104
原创 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 329
原创 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 81
原创 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 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"> <ti...
2020-03-11 18:14:39 85
原创 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 110
原创 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 64
原创 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 79
原创 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 630
原创 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 164
原创 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 1359
原创 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 211 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 67
原创 平行组件(兄弟组件)通信
平行组件(兄弟组件)通信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 207
原创 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 91
原创 VUE父子组件通信
VUE父子组件通信父子组件通信主要用到 props: [ ]在HTML页面中给自定义标签添加自定义属性 在JS页面中使用props: [’ '] 接收自定义属性例:HTML:<自定义标签 username=“qhy”></自定义标签>JS:props: [‘username’]HTML部分<!DOCTYPE html><html lan...
2020-03-10 20:28:34 67
原创 使用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 7189
原创 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 172
原创 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 87
原创 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 148
空空如也
重启电脑后PCIE的采集卡就识别不到了
2021-03-17
TA创建的收藏夹 TA关注的收藏夹
TA关注的人