![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 81
0rigami
学生
展开
-
17 - Vue 学习笔记 - slot 插槽的基本使用、作用域插槽
slot 翻译为 插槽:在生活中很多地方都有插槽,电脑的 USB 插槽等等。插槽的目的是让我们原来的设备具备更多扩展性。比如电脑的 USB 我们可以插入 U盘、硬盘、手机、鼠标等等。组件的插槽组件的插槽是为了让我们封装的组件更加具有扩展性。让使用者可以决定组件内部的一些内容到底展示什么。我们举个例子:<template id="cpn"> <div> <h2>我是组件</h2> <p>我是组件,哈哈哈</p>.原创 2021-06-16 16:53:53 · 207 阅读 · 0 评论 -
16 - Vue 学习笔记 - 组件通信父子组件的访问方式
有时候我们需要父组件直接访问子组件,子组件直接访问父组件,或者是子组件访问根组件父组件访问子组件:使用 $children 或 $refs子组件访问父组件:使用 $parent父访问子$children 访问this.$children 是一个数组类型,它包含所有子组件对象。因为子组件不可能只有一个,所以获取的是一个数组类型。我们可以通过遍历,遍历每个子组件。<div id="app"> <!-- 创建3个组件 --> <cpn></cp.原创 2021-06-15 20:26:35 · 130 阅读 · 0 评论 -
15 - Vue 学习笔记 - 父子组件通信子传父(自定义事件)、子传父的小问题
子传父(自定义事件)有时候我们需要子组件传递给父组件一些信息,这个时候需要使用自定义事件来完成。自定义事件流程:在子组件中,通过 $emit() 来触发事件在父组件中,通过 v-on 来监听子组件事件 (v-on 不仅能监听 DOM 事件,还可以监听自定义事件)<!-- 父组件模板 --><div id="app"> <!-- 监听子组件的事件 --> <cpn @item-click="cpnClick"></cpn><原创 2021-06-15 10:28:19 · 308 阅读 · 0 评论 -
14 - Vue 学习笔记 - 父子组件通信父传子
父子组件通信我们知道,子组件是不能引用父组件或者 Vue 实例的数据的。但是,在开发中,往往有一些数据需要从上层传递到下层:比如在一个页面中,我们从服务器请求到了很多数据。其中一部分数据,并非是整个页面的大组件来一并展示的,而是需要下面的子组件进行展示。这个时候,并不会让子组件再发送一次网络请求(子组件很多,如果每次都发送请求,对服务器压力很大),而是直接让大组件(父组件) 将数据传递给小组件(子组件)。所以我们需要使用到父子组件之间的通信。如何进行父子组件的通信呢?Vue 官方提到:通原创 2021-06-14 20:48:19 · 95 阅读 · 0 评论 -
13 - Vue 学习笔记 -注册组件语法糖、模板分离写法、组件访问数据
注册组件语法糖之前的注册组件的方式,可能有些繁琐。Vue 为了简化整个过程,提供了注册的语法糖。主要是省去了调用 Vue.extend() 的步骤,而是可以直接使用一个对象代替。<div id="app"> <cpn1></cpn1> <cpn2></cpn2></div><script src="../js/vue.js"></script><script> // 1. 全局组原创 2021-06-14 17:13:14 · 124 阅读 · 0 评论 -
12 - Vue 学习笔记 - 组件化开发、全局与局部组件、父组件和子组件
组件化开发什么是组件化?人们面对复杂问题的处理方式:任何一个人处理信息的逻辑能力都是有限的。所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容。但是,我们可以将问题进行拆解。如果将一个复杂的问题,拆分成多个可以处理的小问题,再将其放在整体当中,就可以把大的问题解决。组件化也是类似的思想:如果我们将一个页面的所有的处理逻辑全部放在一起,处理起来会变得非常复杂,而且不利于后期的维护管理与扩展。但是如果,我们将一个页面拆分成一个个小的功能可,每个功能块完成属于自己这部分原创 2021-06-14 13:35:34 · 287 阅读 · 0 评论 -
11 - Vue 学习笔记 - input 中的值绑定、v-model 修饰符
值绑定很多情况下,我们的数据并不是写死的,它有可能是从服务器获取,获取过来再动态生成这些数据。我们也可以借助一个 v-for 完成 input 的值绑定<div id="app"> <!-- 值绑定 --> <!-- :for 动态绑定 label 标签的 for 属性 --> <label v-for="hobby in originHobbies" :for="hobby"> <input type="checkbox" :val原创 2021-06-13 19:21:07 · 666 阅读 · 0 评论 -
10 - Vue 学习笔记 - v-model 的使用
v-model 的使用表单控件在实际开发中是非常常见的。特别是对于用户数据的提交,需要大量的表单Vue 中使用 v-model 指令来实现表单元素和数据的双向绑定原创 2021-06-13 18:15:11 · 265 阅读 · 0 评论 -
9 - Vue 学习笔记 - 登录切换小案例、v-show、v-for
登录切换小案例案例需求:一个登录的文本框,和一个按钮,按下按钮可以更改采用哪种方式登录<div id="app"> <span v-if="isUser"> <!-- label 的 for 的作用是,当点击 label 焦点会移至哪里 --> <label for="username">用户账号</label> <input type="text" id="username" placeholder="用户账号">原创 2021-06-12 19:51:26 · 216 阅读 · 0 评论 -
8 - Vue 学习笔记 - v-on的使用、v-if、v-else-if、v-else
v-on在前端开发中,我们经常要和用户交互这个时候,就必须监听用户所做的事件,比如点击,拖拽,键盘事件等等在 Vue 中,我们使用 v-on 指令来监听事件v-on介绍作用:绑定事件监听器缩写:@预期:Function | Inline Statement | Object参数:event基本使用<div id="app"> <h2>{{counter}}</h2> <!-- 可以直接写表达式 --> <!-- <bu原创 2021-06-12 18:32:18 · 215 阅读 · 0 评论 -
7 - Vue学习笔记 -计算属性、ES6 语法补充
计算属性我们直到,在模板可以直接通过插值语法显示一些 data 里的数据但是在某些情况下,我们可能需要对数据先进行转换后再显示,或者需要多个数据结合起来进行显示比如我们有 firstName 和 lastName 两个变量,我们需要显示完整的名称但是如果多个地方都要显示完整的名称,使用以前的方法就需要写多个 {{firstName}} {{lastName}}为了方便阅读我们可以将上面的代码换成计算属性:计算属性是写在实例的 computed 选项中的 <div id="a原创 2021-06-11 22:01:27 · 135 阅读 · 2 评论 -
6 - Vue 学习笔记 - v-bind的基本使用
在某些情况下,除了内容需要动态来决定外,某些属性也希望动态绑定比如动态绑定 a 元素的 href 属性比如动态绑定 img 的src 属性这个时候,可以使用 v-bind 指令:v-bind作用:动态绑定属性缩写::预期:any (with argument) | Object (without argument)参数:attrOrProp (optional)基本使用<div id="app"> <!-- <img src="{{imgURL}}.原创 2021-06-10 15:49:18 · 213 阅读 · 0 评论 -
5 - Vue 学习笔记 - 其他指令的使用
其他指令的使用v-once在某些情况,我们可能不希望界面随意的跟随改变这个时候,可以使用一个 Vue 的指令v-once这个指令后面不许需要跟任何表达式这个指令表示元素和组件*(后续才会学习)*值渲染一次,不会随着数据的改变而改变<div id="app"> <h2>{{message}}</h2> <h2 v-once>{{message}}</h2></div>第一个 h2 由于设置了 v-o原创 2021-06-10 14:45:18 · 50 阅读 · 0 评论 -
4 - Vue 学习笔记 - options 选项、生命周期、WebStorm的vue模板、mustache语法简单补充
Vue 的 options 选项我们会发现,在创建 Vue 实例时,传入了一个对象 options我们可以从官网上看这个 options 中包含了哪些选项 — API—Vue.js目前掌握这些选项:el:类型:string | HTMLElement作用:决定之后 Vue 实例会管理哪一个 DOMdata:类型:Object | Function(组件当中 data 必须是一个函数)作用:Vue 实例对应的数据对象methods:类型:{ [key : string] : Fun原创 2021-06-10 13:45:22 · 179 阅读 · 0 评论 -
3 - Vue 学习笔记 - Vue 中的 MVVM
什么是 MVVM ?(来自百度) MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开… 百度百科 — wiki百科原创 2021-06-10 13:04:44 · 71 阅读 · 0 评论 -
1 - Vue学习笔记 - Vue.js 的了解与安装
简单认识一下 Vue.js官方介绍 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。官方网址渐进式框架渐进式意味着你可以将 Vue 作为你应用的一部分嵌入其中,带来更丰富的交互体验或者给你希望的业务逻辑使用 Vue 实原创 2021-06-10 09:57:39 · 82 阅读 · 0 评论 -
2 - Vue 学习笔记 - Vue.js 体验
第一个 Vue 程序体验一下 Vue 的响应式<body> <div id="app"> {{message}} <h2>{{message}}</h2> <h1>{{name}}</h1> </div> <div>{{message}}</div> <script src="../js/vue.js">原创 2021-06-10 12:43:25 · 53 阅读 · 0 评论