![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 86
Vue从0到1笔记
不会Java怎么找女朋友
这个作者很懒,什么都没留下…
展开
-
十一、Vue插槽
01-slot-插槽的基本使用1.1 为什么使用slot(一)slot翻译为插槽在生活中很多地方都有插槽,电脑的USB插槽,插板当中的电源插槽插槽的目的是让我们原来的设备具有更多的扩展性比如电脑的USB我们可以插入U盘,硬盘,手机,音响,键盘,鼠标等(二)组件的插槽组件的插槽也是为了让我们封装的组件更具有扩展性让使用者可以决定组件内部的一些内容到底展示什么(三)例子:移动网站中的导航栏移动开发中,几乎每个页面都有导航栏导航栏我们必然会封装成一个插件,比如nav-bar组件一原创 2021-01-12 00:47:21 · 122 阅读 · 0 评论 -
十、Vue组件化开发
01-组件化实现和使用步骤1.1 什么是组件化?人面对复杂问题的处理方式:任何一个人处理信息的逻辑能力都是有限的所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容但是,我们人有一种天生的能力,就是将问题进行拆解如果将一个复杂的问题,拆分成很多个可以处理的小问题,再将其放在整体当中,你会发现大的 问题也会迎刃而解组件化也是类似的思想:如果我们将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得变得非常复杂,而且不利于后续的管理以及扩展但如果,我们将一个原创 2021-01-10 21:43:14 · 132 阅读 · 0 评论 -
九、v-model的使用
01 v-model的使用和原理1.1 v-model表单控件在实际开发中式非常常见的,特别是对于用户信息的提交,需要大量的表单Vue中使用v-model指令来实现表单元素和数据的双向绑定案例解析:当我们在输入框输入内容时因为input中的v-model绑定了message,所以会实时将输入的内容传递给message,message发生改变当message发生改变时,因为上面我们使用Mustache语法,将message的值插入到DOM中,所以会发生响应的改变所以,通过v-model实现原创 2021-01-10 11:30:59 · 369 阅读 · 0 评论 -
八、书籍购物车案例
代码实战<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>01-购物车案例</title> <style> table { border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; }原创 2021-01-10 01:22:45 · 1152 阅读 · 1 评论 -
七、Vue循环遍历
01-v-for遍历数组1.1 代码实战 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>01-v-for遍历数组</title></head><body><div id="app"> <!-- 1.在遍历的过程中,没有使用索引值(下标值)--> <ul>原创 2021-01-06 00:56:46 · 260 阅读 · 0 评论 -
六、Vue条件判断
01-v-if,v-else-if,v-else的使用1.1 v-if,v-else-if,v-else1、v-if,v-else-if,v-else这三个指令与JavaScript的条件语句if,else,else if类似Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件2、v-if原理v-if后面的条件为false时,对应的元素以及其子元素不会渲染也就是根本没有不会有对应的标签出现在DOM中1.2 代码实战<!DOCTYPE html><ht原创 2021-01-05 02:06:46 · 613 阅读 · 0 评论 -
五、Vue事件监听
01-v-on的基本使用1.1 事件监听1、在前端开发中,我们需要经常和用户交互这个时候,我们就必须监听用户发生的事件,比如点击,拖拽,键盘事件等等在Vue中使用v-on监听事件2、v-on的介绍作用:绑定事件监听器缩写:@预期:Function | Inline Statement | Object参数:event1.2 代码实战<!DOCTYPE html><html lang="en"><head> <meta chars原创 2021-01-03 21:52:53 · 325 阅读 · 0 评论 -
四、Vue计算属性
01-计算属性的基本使用1.1 计算属性1、在模板中可以直接通过插值语语法显示一些data中的数据2、但是在某些情况下,我们可能需要对数据进行一些转化后在显示,或者需要将多个数据结合起来进行显示比如我们有firstName和lastName两个变量,我们需要显示完整的名称但是如果多个地方都需要显示完整的名称,我们就需要写多个{{firstName}} {{lastName}}3、我们可以将上面代码换成计算属性计算属性是写在实例的computed选项中的1.2 代码实战<!DO原创 2021-01-03 20:34:32 · 4253 阅读 · 1 评论 -
三、动态绑定属性
01-v-bind的基本使用1.1v-bind1、除了内容需要动态来决定外,某些属性我们也希望动态来绑定比如动态绑定a元素的href属性比如动态绑定img元素的src属性2、这个时候,我们可以使用v-bind指令:作用:动态绑定属性缩写:语法糖 :(简写)预期:any(with argument) | Object(without argument)参数:attrOrProp(optional)1.2代码实战<!DOCTYPE html><html lang原创 2021-01-03 02:22:32 · 177 阅读 · 0 评论 -
二、插值操作
01-Mustache语法1.1代码实战<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>01-Mustache语法</title></head><body><div id="app"> <!-- mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式-->原创 2021-01-03 01:11:02 · 277 阅读 · 0 评论 -
一、Vue初体验
01-HelloVuejs代码实战<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>01-HelloVuejs</title></head><body><div id="app">{{message}}</div><script type="text/javasc原创 2021-01-03 00:04:57 · 110 阅读 · 0 评论