Vue
关注
分享
扫一扫
Test_晓
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
自学Vue必看的slot知识总结
文章目录什么是slot插槽插槽的使用具名插槽什么是slot插槽（1）slot插槽的目的：让我们原来的设备具备更多的扩展性（2）组件的插槽：组件的插槽也是为了让我们的封装更具有扩展性，让使用者可以决定组件内部的一些内容到底展示的是什么例如： 某宝各个页面的导航栏它既有相同的部分又有不相同的部分，那么这个组件就不能是固定下来的，其不同的部分就要用到插槽（抽取共性、保留不同）插槽的使用1、插...原创 2020-04-01 20:09:04 · 1239 阅读 · 4 评论 -
自学Vue必看的父子组件访问方式
文章目录父子组件访问 父组件访问子组件使用$children（不常使用）$children使用方法使用$refs（经常使用）$refs使用方法子组件访问父组件和根组件（使用较少）父子组件访问 有时候我们需要父组件直接访问子组件、子组件直接访问父组件父组件访问子组件父组件访问子组件有两种方式，第一种方式是使用 $children，第二种方式是使用 $refs使用$children（不常使用...原创 2020-03-31 17:33:28 · 253 阅读 · 0 评论 -
自学Vue必看的父子组件通信（二）
文章目录父子组件通信---父传子父子组件通信---子传父举例展示HTMLJavaScript效果图示父子组件通信—父传子在我的上一篇文章中提到了父子组件通信中的父传子，如何您还不了解，建议参考：自学Vue必看的父子组件通信（一），回归正题！！！父子组件通信—子传父子传父是当子组需要向父组件传递数据时，就要用到自定义事件。步骤：（1）在子组件中，通过 $emit() 来触发某一事件A（...原创 2020-03-31 15:26:44 · 228 阅读 · 1 评论 -
自学Vue必看的父子组件通信（一）
文章目录父子组件通信父子组件通信---父传子第一种方式------字符串数组第二种方式------对象类型限制提供默认值是否必传父子组件通信有可能在一个页面中，我们从服务器请求到了很多数据，其中一部分的数据并非是在我们的大组件中展示的，而是需要在其子组件进行展示。但是子组件并不会再次发送一个网络请求（发送请求对服务器压力大），而是直接将父组件中的数据传递给子组件注意：在开发中，Vue实例和子...原创 2020-03-30 17:34:31 · 261 阅读 · 0 评论 -
为什么Vue组件中的data是一个函数原理(详细易懂)
文章目录组件中的data实例data是函数----原理function知识data是函数的原理案例总结举一反三组件中的data组件是一个具有单独自身功能模块的封装，这个模块有属于自己的HTML模板，也应该有属于自己的数据data，组件也有自己的方法methods注意：组件不能直接访问Vue实例中定义的数据。就算可以访问，若将所有的数据都放在Vue实例中，Vue实例就会变得非常臃肿（数据很多）...原创 2020-03-29 15:43:50 · 10133 阅读 · 2 评论 -
自学Vue必看组件基础知识总结
文章目录什么是组件化Vue 组件化思想注册组件基本步骤 （组件化的基本使用）注册组件语法糖方式组件模板的分离写法全局组件和局部组件父组件与子组件什么是组件化WHY：若将一个页面中所有的处理逻辑全部放到一起，处理起来就会变得很复杂， 也可能存在大量重复代码，并且也不利于后续的管理以及扩展 。但如果将一个页面拆分成一个个小的功能块，每个功能块实现属于自己这部分独立的功能，那么之后整个页面的管理和维...原创 2020-03-29 11:36:16 · 419 阅读 · 2 评论 -
自学Vue必看的v-model知识总结(超详细)
文章目录基本概念基本使用v-model原理使用v-bindv-bind和v-on同时使用v-model结合radio使用v-model结合checkbox使用单选框多选框v-model结合select使用基本概念表单控件在实际开发中是很常见的，Vue中使用v-model指令来实现表单元素和数据的双向绑定基本使用最重要的特征是表单元素和数据的双向绑定<body> <d...原创 2020-03-28 14:34:02 · 2556 阅读 · 9 评论 -
自学Vue必看的v-for知识总结
文章目录基础v-for遍历数组v-for遍历对象基础v-for 类似于JS中的for循环语法格式： item in arrv-for遍历数组<body> <div id="app"> //<!-- for遍历数组 在遍历过程中没有使用索引值 --> <ul> <li v-for="book in boo...原创 2020-03-28 09:36:28 · 256 阅读 · 0 评论 -
用案例说明v-if和v-show的区别
文章目录v-if和v-show相同之处v-if和v-show不同之处总结v-if和v-show相同之处v-if 和 v-show 都具有条件判断的功能，如下面案例所示，“hello word” 都会在浏览器上消失<body> <div id="app"> <h2 v-if="isshow" >{{message}}</h2> ...原创 2020-03-28 08:56:41 · 372 阅读 · 0 评论 -
自学Vue必看的v-on知识总结
文章目录v-on基础用法基本用法示例v-on参数v-on参数示例v-on参数修饰符.stop修饰符的使用.prevent修饰符的使用[keyCode(编码)|keyAlias（简写）] 的使用.once 的使用v-on基础用法（1）作用：绑定事件监听器（2）缩写（语法糖）：@（3）预期：function 、Inline Statement、Object基本用法示例<body>...原创 2020-03-25 20:11:44 · 716 阅读 · 0 评论 -
自学Vue必看的计算属性知识总结以及计算属性与方法的区别
文章目录为什么使用计算属性如何使用计算属性计算属性的setter和gettermethods和computed区别小案例：用计算属性算总价方法一方法二方法三为什么使用计算属性我们知道，在模板中可以直接通过插值语法显示一些data中的数据 。但在某一些情况时，我们可能需要丢数据进行一些转化后再显示，或者是将多个数据结合起来进行显示例如：假如有两个变量firstName和lastName,需求是...原创 2020-03-24 17:29:35 · 970 阅读 · 0 评论 -
自学Vue必看的v-bind绑定
文章目录v-bind绑定属性基本语法语法糖写法v-bind动态绑定class通用样式常规语法和语法糖写法对象语法动态绑定class数组语法绑定classv-bind绑定属性基本语法v-bind:[属性名]="变量名"语法糖写法:[属性名]="变量名"<body> <div id="app"> <a v-bind:href="ahref">...原创 2020-03-24 14:38:42 · 2509 阅读 · 0 评论 -
Vue中的插值操作知识总结
文章目录Mustache语法v-oncev-htmlv-textv-prev-cloakMustache语法Mustache语法又称作小胡子语法（双大括号语法），数据是响应式的<body> <div id="app"> <h2>HELLO {{book}}</h2> //插入到标签中 <h2>{{book +...原创 2020-03-24 10:19:13 · 561 阅读 · 0 评论 -
一篇文章弄懂Vue中的MVVM
文章目录什么是MVVMVue中的MVVM图示解释举例全部代码展示ViewModelViewModel什么是MVVM我有一篇博客是关于MVVM的，如果您想要了解，请参考：写给大忙人看的MVC、MVP和MVVMVue中的MVVM图示解释View层（1）视图层（2）在前端开发中，通常就是DOM层（3）主要的作用是给用户展示各种信息Model层（1）数据层（2）数据可能是...原创 2020-03-23 19:57:02 · 312 阅读 · 0 评论