Vue
关注
分享
扫一扫
渣渣圆
22届软件工程应届生，写博客记录自己的成长
展开
-
vue-router
使用vue-router的步骤:第一步: 创建路由组件第二步: 配置路由映射: 组件和路径映射关系第三步: 使用路由: 通过<router-link>和<router-view>创建路由组件配置组件和路径的映射关系使用路由路由的默认路径我们在routes中又配置了一个映射.path配置的是根路径: /redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了....原创 2021-06-13 21:40:41 · 137 阅读 · 2 评论 -
Vue组件化语法糖以及模板抽离
语法糖Vue为了简化这个过程，提供了注册的语法糖主要是省去了调用Vue.extend()的步骤，而是可以直接使用一个对象来代替全局组件和局部组件语法糖模板的分离写法使用<script>标签使用<template>标签通常使用<template>比较多，两种方式都是通过id的方式来绑定使用代码实现<!DOCTYPE html><html> <head> <meta charset=..原创 2021-05-29 15:24:52 · 253 阅读 · 0 评论 -
Vue组件化
Vue组件化组件化是Vue.js中的重要思想它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用任何的应用都会被抽象成一颗组件树组件的使用分成三个步骤创建组件构造器注册组件使用组件1.Vue.extend()：调用Vue.extend()创建的是一个组件构造器传入template代表我们自定义组件的模板2.Vue.component()：调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标原创 2021-05-29 01:13:14 · 179 阅读 · 0 评论 -
v-model使用radio，checkbox，select
v-model应用radio单选按钮<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <label for="male"> <!-- 如果不加name，会导致可以同时勾选男女，加上na原创 2021-04-11 21:39:50 · 326 阅读 · 0 评论 -
V-model双向绑定数据
一丶v-model表单控件在实际开发中式非常常见的，特别是对于用户信息的提交，需要大量的表单Vue中使用v-model指令来实现表单元素和数据的双向绑定v-model其实是一个语法糖，他背后的本质上是包含两个操作v-bind绑定一个value属性v-on指令给当前元素绑定input事件<input type="text" v-model="message"><!--等用于下面 --><input type="text" :value="message" @i原创 2021-04-11 21:03:26 · 879 阅读 · 0 评论 -
切换登录方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <span v-if="isUser"> <label for="username">用户账号</label>原创 2021-03-06 00:50:13 · 769 阅读 · 0 评论 -
V-for中的key
V-for中的key属性（一）为什么需要这个key属性？这个其实和Vue的的虚拟DOM的diff算法有关系（二）当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的即把C更新成F，D更新C，E更新成D，最后插入F，很没有效率（数据结构链表）（三）所以我们需要使用key来给每个节点做一个唯一标识Diff算法就可以正确的识别此节点找到正确的位置区插入新的节点四）key的作用主要是为了高效的更新虚拟D转载 2021-03-06 00:45:19 · 401 阅读 · 0 评论 -
v-if,v-else-if,v-else的使用
v-if,v-else-if,v-else这三个指令与JavaScript的条件语句if,else,else if类似Vue的条件指令可以根据表达式的值在DM中渲染或销毁元素或组件v-if原理v-if后面的条件为flase时，对应的元素以及其子元素不会渲染也就是根本没有不会有对应的标签出现在DOM中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t原创 2021-03-06 00:35:51 · 644 阅读 · 0 评论 -
Vue学习笔记——v-on修饰符
v-on修饰符修饰符：就是指定事件触发条件，比如按下键盘，监听键盘stop-调用event.stopPropagation().prevent-调用event.preventDefault().{keyCode | keyAlias}-只当事件是从特定键触发时才触发回调.once-只触发一次回调<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&转载 2021-03-06 00:30:06 · 231 阅读 · 0 评论 -
Vue学习笔记——conputed和methods对比
计算属性的缓存methods和computed看起来都可以实现我们的功能那么为什么还要多一个计算属性这个东西呢？因为计算属性会进行缓存，如果多次使用,计算属性只会调用一次，极大提高了性能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><sc转载 2021-03-06 00:14:26 · 236 阅读 · 0 评论 -
Vue学习笔记——计算属性的setter和getter
通常情况下只使用getter，获取数据setter一般不用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></scri原创 2021-03-06 00:09:50 · 198 阅读 · 0 评论 -
Vue学习笔记——计算属性计算数组价格
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><div id="app">原创 2021-03-06 00:03:59 · 1034 阅读 · 0 评论 -
Vue学习笔记——计算属性
computed当我们有firstName和lastName两个变量，我们需要显示完整的名称如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>原创 2021-03-06 00:01:15 · 137 阅读 · 0 评论 -
Vue学习笔记——for遍历列表，点击列表更改颜色
案例需求问题:点击列表中的哪一项，那么该项的文字就变成红色<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .active{ color: red; } </style> <script src="https://cdn.jsdelivr.net/npm/vu原创 2021-03-05 23:55:24 · 701 阅读 · 0 评论 -
Vue学习笔记——v-once
v-once该指令后面不需要跟任何表达式该指令表示元素和组件只渲染一次，不会随着数据的改变而改变<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script src="https://cdn.jsdelivr.net/npm/vue/dis原创 2021-03-05 23:50:08 · 110 阅读 · 0 评论 -
Vue计数器
Vue小demo——计数器<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <div id="app"> <h2>原创 2021-03-01 22:31:19 · 152 阅读 · 0 评论 -
Vue学习笔记——基础语法{{ }}
Vue学习笔记{{ }}大括号，也是最常用的取值符号，用来渲染data里面的数据<body> <div id="app"> {{message}} <H2>{{people.name}} {{people.sno}}</H2> <ul> <li>{{campus[0]}}</li> <li>{{campus[1]}}</li> <li>{{c原创 2021-03-04 22:54:00 · 6199 阅读 · 1 评论 -
Vue学习笔记——text，html语法以及区别
Vue-text<body> <div id="app"> {{message}} <h2 v-text="name+'呀'"></h2> <h2>{{message}},袁画圆</h2> <h2 v-text="message">啊啊啊</h2> </div> <script> var app =new Vue({ el:"#app",原创 2021-03-04 23:19:41 · 540 阅读 · 1 评论 -
Vue学习笔记——v-if实现原理
v-if<div id="app"> <p v-if="isShow">v-if</p> <h2 v-if="temperature>=35">热死了</h2> <input type="button" value="切换" @click="toggleIsShow()" /> <input type="button" value="+" @click="add()" /> <input type=原创 2021-03-04 23:41:16 · 4406 阅读 · 3 评论 -
Vue学习笔记——v-show实现原理
v-show例子<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>v-show指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="a原创 2021-03-04 23:48:04 · 2228 阅读 · 2 评论 -
Vue学习笔记——v-bind
v-bind作用：动态绑定数据简写: ：demo<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> .active{ b原创 2021-03-05 00:06:39 · 105 阅读 · 3 评论 -
Vue学习笔记——v-on
v-on任何一名语言都离不开与用户交互，v-on就是vue用来监听事件作用：绑定事件监听器简写：@预期：Function | Inline Statement | Object参数：eventdemo<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdeliv原创 2021-03-05 00:15:33 · 158 阅读 · 1 评论