从零开始学习VUE
我的学习记录
吃瓜的阳大王
实习两年半的个人练习生
展开
-
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 · 236 阅读 · 0 评论 -
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 · 193 阅读 · 0 评论 -
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 · 115 阅读 · 0 评论 -
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 · 208 阅读 · 0 评论 -
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 · 91 阅读 · 0 评论 -
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 · 546 阅读 · 0 评论 -
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 · 249 阅读 · 0 评论 -
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 · 214 阅读 · 0 评论 -
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 · 3262 阅读 · 0 评论 -
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 · 228 阅读 · 0 评论 -
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 · 104 阅读 · 0 评论 -
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 · 97 阅读 · 0 评论 -
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 · 103 阅读 · 0 评论 -
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 · 99 阅读 · 0 评论 -
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 · 137 阅读 · 0 评论 -
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 · 81 阅读 · 0 评论 -
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 · 196 阅读 · 0 评论 -
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 · 1152 阅读 · 0 评论 -
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 · 156 阅读 · 0 评论 -
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 · 109 阅读 · 0 评论 -
第一章: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 · 181 阅读 · 0 评论