Vue学习笔记(带源码)
朱振玉小迷弟
学习更多技能,完成更多想法
展开
-
Vue的学习大纲
一、组件化开发二、 前端模块化三、webpack四、Vue Cli原创 2021-04-11 14:08:08 · 230 阅读 · 0 评论 -
Vue中v-model和checkbook的使用
一、v-model双向绑定<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <!-- 1、checkbox的单选框 --> <!-- <label for="agree"> <原创 2021-03-29 18:44:58 · 156 阅读 · 0 评论 -
Vue实现购物车小案例(免费)
一、源码index.html:<!DOCTYPE html><html> <head> <meta charset="UTF-8"/> <title>购物车小案例</title> <link rel="stylesheet" type="text/css" href="./css/style.css"/> </head> <body> <div id="app"&g原创 2021-03-28 13:23:29 · 479 阅读 · 0 评论 -
单击列表中的元素变色
<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>作业回顾</title> <style type="text/css"> .active{ color: red; } </style> </head> <body> <div id="app"> <原创 2021-03-27 17:29:56 · 223 阅读 · 1 评论 -
Vue的数组中哪些方法是响应式的
一、源码<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>用户登录切换小案例</title> </head> <body> <div id="app"> <ul> <li v-for="(item,index) in letters"> {{index+1}}.{原创 2021-03-27 17:05:15 · 193 阅读 · 1 评论 -
用户登陆页面前端(附源码)
一、源码<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>用户登录切换小案例</title> </head> <body> <div id="app"> <span> <label> 用户名: <input v-if="isUser" type="原创 2021-03-27 10:50:41 · 1335 阅读 · 0 评论 -
Vue中的v-if和v-else
一、v-if和v-elsev-if判断语句之用,v-else则是和v-if一起出现,当v-if判断为true时,v-else不执行;当v-if判断为false时,v-else才执行。源码01:<!DOCTYPE ><html> <head> <meta charset="utf-8" /> <title>20210327练习</title> </head> <body> <div原创 2021-03-27 09:53:48 · 41933 阅读 · 2 评论 -
动态绑定class的对象语法
源码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>v-bind</title> <style type="text/css"> .active{ color: aqua; } </style> </head> <body> <div id="app">原创 2021-03-21 17:38:56 · 137 阅读 · 0 评论 -
Vue中的一些指令
一、v-once当一个元素通过el挂载点挂载到页面上时,是可以通过页面中的开发者模式局部更新的,但加了v-once的元素不会进行局部更新,用的不多,且v-once后面不跟表达式。源码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>v-once</title> </head> <body> <div id="ap原创 2021-03-20 19:25:54 · 97 阅读 · 0 评论 -
如何利用Vue制作一个简单的计数器
一、思路1、首先设置一个文本作为计数器的说明;2、在文本附近设置两个按钮作为计数时使用;3、设置一个el挂载点为两个按钮设置函数,即将数字加一或减一;4、为两个按钮绑定设置好的函数;5、完成。二、源码<!DOVTYPE><html> <head> <meta charset= "utf-8"> <title></title> </head> <body> <div id="原创 2021-03-18 19:26:41 · 930 阅读 · 0 评论 -
Vue实例(数据双向绑定)
一、v-model双向数据绑定,即修改绑定的两方数据,更改任何一方都会使另一方同步修改。二、实例<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>v-model</title> </head> <body> <div id="app"> <input type="text" v-model原创 2021-03-16 20:17:28 · 264 阅读 · 0 评论 -
Vue中的v-for
一、根据数据生成列表结构<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>v-blind</title> <style> .active{ border: 1px solid red; } </style> </head> <body> <div id="app"&g原创 2021-03-16 17:58:59 · 174 阅读 · 0 评论 -
Vue中的v-blind指令
一、了解v-blindv-blind的主要用法是动态更新HTML元素上的属性。二、调用图片地址下面是先通过el挂载点挂在一个数据(图片的地址),然后通过v-blind调用图片地址。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>v-blind</title> </head> <body> <div id="ap原创 2021-03-15 11:19:47 · 2346 阅读 · 2 评论 -
Vue中v-show与v-if的区别
一、官方解释:v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则原创 2021-03-14 16:04:10 · 131 阅读 · 0 评论 -
用Vue实现计数器
如何用Vue实现一个计数器?源码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>本地应用-计数器</title> </head> <body> <!-- html结构 --> <div id="app"> <!--计数器功能区域--> <div class="i原创 2021-03-14 14:34:32 · 990 阅读 · 0 评论 -
Vue基础
一、第一个Vue程序1、导入开发版本的Vue.js2、创建Vue实例对象,设置el属性和data属性3、使用简洁的模板语法把数据渲染到页面上附带上Vue官方文档,Vue的作者是一名中国人,叫尤雨溪,所以官方文档对中文特别友好,可以参照官方文档进行学习。第一个Vue程序<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Vue基础</title>原创 2021-03-02 10:38:52 · 88 阅读 · 0 评论