Vuejs
关注
分享
扫一扫
Eli-sun
不断学习
展开
-
简单认识一下Vuejs
Vue是一个渐进式的框架，什么是渐进式的呢？1.渐进式意味着你可以将VUE作为你应用的一部分嵌入其中，带来更丰富的交互体验。2.或者你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。3.比如core+Vue-router+vuex,也可以满足你各种各样的需求。Vue有很多特点和WEb开发中常见的高级功能1.解耦视图和数据2.可复用的组件3.前端路由技术4.状态管理5.虚拟DOM学习Vuejs的前提？1.从零学习Vue开发，并不需要你具备其他类似于Angular、R原创 2020-06-03 11:30:38 · 171 阅读 · 0 评论 -
ES模块化的导入导出（所有方法都要求掌握）
ES模块化的导入导出首先，我们需要在HTML代码中引入两个js文件，并且类型需要设置为module<script src="aaa.js" type="module"></script><script src="bbb.js" type="module"></script><script src="mmm.js" type="module"></script>export基本使用：export指令用于导出变量1.导出方式原创 2020-06-20 18:29:34 · 1699 阅读 · 0 评论 -
模块化
为什么要有模块化？随着ajax异步请求的出现，慢慢形成了前后端分离全局变量同名的问题：匿名函数（闭包）的解决方案，这样虽然不会出现命名冲突的问题，但是如果想要在匿名函数外使用之前在函数内定义的变量就会无法使用，这样就没有代码的复用性了。使用模块作为出口1.在匿名函数内部定义一个对象2.给对象添加各种需要暴露到外面的属性和方法（不需要暴露的直接定义即可）3.最后将这个对象返回，并且在外面使用一个moudleA接收这就是模块化最基本的封装，实时上模块的封装还有很多高级的话题（function（）原创 2020-06-20 17:29:01 · 120 阅读 · 0 评论 -
编译作用域的概念-作用域插槽的使用
编译作用域的概念编译作用域在真正学习插槽之前，我们要先理解一个概念：编译作用域<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minim原创 2020-06-20 16:42:22 · 635 阅读 · 0 评论 -
slot-插槽的基本使用-具名插槽的使用（重要）
slot-插槽的基本使用-具名插槽的使用为什么使用slot ？slot翻译为插槽：1.在生活中很多地方都有插槽，电脑的USB插槽，插板当中的电源插槽。2.插槽的目的是让我们原来的设备具有更多的扩展性。3.比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等等。组件的插槽：1.最暗的插槽也是为了让我们封装的组件更加具有扩展性。2.让使用者可以决定组件内部的一些内容到底展示什么。栗子：移动网站中的导航栏：1.移动开发中几乎每个页面都有导航栏。2.导航栏我们必然会封装成一个插件，原创 2020-06-20 11:46:35 · 1904 阅读 · 0 评论 -
子访问父-parent-root
子访问父-parent-root这个用的很少，开发中一般不建议使用<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scal原创 2020-06-20 10:38:14 · 329 阅读 · 0 评论 -
父访问子-children-refs
父访问子-children-refs父子组件的访问方式：$children有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问根组件。1.父组件访问子组件：使用$children或 $refs reference(参考，引用)** $refs->对象类型，默认是一个空的对象，ref=" bbb "refs一般用的比较多**2.子组件访问父组件：使用$parent<!doctype html><html lang="en"><he原创 2020-06-18 20:34:59 · 256 阅读 · 0 评论 -
结合双向绑定案例-watch实现
结合双向绑定案例-watch实现watch这个方法老师还没讲<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1原创 2020-06-18 19:50:15 · 234 阅读 · 0 评论 -
组件通信-父子组件通信案例
组件通信-父子组件通信案例这个案例中有一个问题，就是value未定义我也不知道怎么解决<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, mi原创 2020-06-18 19:35:02 · 221 阅读 · 0 评论 -
第二次知识点回顾
Vue第二次知识点回顾一、计算属性1.1.计算属性的本质fullname:{set(),get()}1.2.计算属性和methods对比计算属性在多次使用时，只会调用一次，它是有缓存的二、事件监听2.1.事件监听基本使用2.2.参数问题btnClickbtnClick(event)btnClick(abc,event)->$event2.3.修饰符.stop.prevent.enter.once.native三、条件判断3.1.v-if/v-else-if/v-e原创 2020-06-18 17:00:48 · 143 阅读 · 0 评论 -
子级向父级传递
子级向父级传递自定义事件的流程：在子组件中，通过$emit()来触发事件在父组件中，通过v-on：/@来监听子组件事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!--1.父组件模板--><div id="app">原创 2020-06-17 22:01:09 · 373 阅读 · 0 评论 -
父子组件通信-父传子props和props驼峰标识
父子组件通信-父传子props父子组件的通信子组件是不能引用父组件或者Vue实例的数据的，但是在开发中，往往一些数据确实需要从上层传递到下层：1.比如在一个页面中，我们从服务器请求到了很多的数据2.其中一部分的数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示3.这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件（父组件）将数据传递给小组件（子组件）如何进行父子组件间的通信呢？Vue官方提到：1.通过props向子组件传递数据2.通过事件向父组件发送消息（自定原创 2020-06-17 15:01:16 · 339 阅读 · 0 评论 -
组件模板抽离的写法
组件模板抽离的写法1.我们通过语法糖简化了Vue组件的注册过程，另外还有一个地方的写法比较麻烦，就是template模块写法。2.如果我们能将其中的HTML分离出来写，然后挂载到对应的组件上，必然结构会变得非常清晰3.Vue提供了两种方案来定义HTML模块内容：（1）使用script标签（2）使用template标签<!doctype html><html lang="en"><head> <meta charset="UTF-8">原创 2020-06-16 20:50:51 · 295 阅读 · 0 评论 -
父组件和子组件、注册组件语法糖
父组件和子组件<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-原创 2020-06-16 20:00:35 · 328 阅读 · 0 评论 -
全局组件和局部组件
全局组件是在多个Vue实例下面都可以使用，局部组件只能在挂载的实例下使用。一般一个项目只有一个实例<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.原创 2020-06-16 19:10:19 · 323 阅读 · 0 评论 -
组件化的实现和使用步骤
组件化的实现和使用步骤什么是组件化？我们将一个完整的页面分成很多个组件，每个组件都用于实现页面的一个功能，而每个组件由可以进行细分。Vue组件化思想组件化是Vue.js中的重要思想1.它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。2.任何的应用都会被抽象成一棵组件树。注册组件的基本步骤组件的使用分成三个步骤：1.创建组件构造器：调用Vue.extend()方法创建组件构造器2.注册组件：调用Vue.component()方法注册组件3.使用组件：在Vue实原创 2020-06-16 17:35:34 · 612 阅读 · 0 评论 -
v-model修饰符的使用
v-model修饰符的使用lazy修饰符：1.默认情况下，v-model默认是在input事件中同步输入框的数据的。2.也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。3.lazy修饰符可以让数据在失去焦点或者回车时才会更新。number修饰符：1.默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。2.但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。3.number修饰符可以让在输入框中输入的内容直接直接转换成数字类型。原创 2020-06-15 20:10:50 · 208 阅读 · 0 评论 -
input中的值绑定
input中的值绑定值绑定可以不用将值写死，动态的绑定到选框中 <label v-for="item in originhobbies" :for="item"> <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}} </label> <script src="../vue.min.js"></script><script原创 2020-06-15 14:48:28 · 975 阅读 · 0 评论 -
v-model结合select类型使用
v-model结合select类型使用v-model：select和CheckBox一样，select也分单选和多选两种情况1.单选：只能选中一个值1.v-model绑定的是一个值2.当我们选中option中的一个时，会将它对应的value赋值到mySelect中选择一个 <select name="abc" v-model="fruit"> <option value="苹果">苹果</option> <option value=原创 2020-06-15 14:30:16 · 3779 阅读 · 3 评论 -
v-model结合CheckBox类型使用
复选框分为两种情况：单个勾选框和多个勾选框使用label的好处不仅点选框可以选中而且点文字也可以选中,一般情况下一个label对应一个input <label for="license"> <input type="checkbox" id="license" v-model="agree">同意协议 </label>CheckBox单选框 <label for="license"> <input type="checkbox原创 2020-06-15 14:09:22 · 357 阅读 · 0 评论 -
v-model结合radio类型使用
v-model:radio当存在多个选框时<div id="app"> <label for="male"> <input type="radio" id="male" name="sex" value="男" v-model="sex">男 </label> <label for="female"> <input type="radio" id="female" name="sex" value="女" v-原创 2020-06-13 22:06:48 · 1330 阅读 · 0 评论 -
v-model的使用和原理（重要）
表单绑定v-model表单控件在实际开发中是非常常见的，特别是对用户信息的提交，需要大量的表单。Vue中使用v-model指令来实现表单元素和数据的双向绑定。案例解析：1.当我们在输入框输入内容时2.因为input中的v-model绑定了message,所以会实时将输入的内容传递给message,message发生改变。3.当message发生改变时，因为我们上面使用Mustache语法，将message的值插入到DOM中,所以DOM会发生响应的改变。4.所以，通过v-model实现了双向的绑原创 2020-06-13 18:13:13 · 773 阅读 · 0 评论 -
数组中哪些方法是响应式的（重要）
数组中哪些方法是响应式的因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。1.push()2.pop()3.shift()4.unshift()5.splice() 拼接6.sort() 将…分类7.reverse() 颠倒 反转...原创 2020-06-11 17:59:54 · 327 阅读 · 0 评论 -
v-for绑定和非绑定key的区别
v-for绑定和非绑定key的区别组件key的属性：1.官方推荐我们在使用v-for时，给对应的元素或组件添加上一个key属性。2.为什么要加这个key属性呢（了解）？这个其实和Vue虚拟DOM的Diff算法有关系。key的主要作用是为了高效的更新虚拟DOM要保证key和要插入的东西一一对应的关系splice（A，B，‘’C’）；splice是插入方法，splice（A，B）：从第A个元素开始删除B个元素。splice（A，0，‘C’）：在第A个元素的后面插入 ‘C’ 元素。...原创 2020-06-08 20:15:21 · 318 阅读 · 0 评论 -
v-for遍历数组和对象
v-for遍历数组和对象v-for遍历数组：当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。1.v-for的语法类似于JavaScript中的for循环。2.格式如下：item in items 的形式。我们来看一个简单地案例：如果在遍历的过程中不需要使用索引值。1.v-for=“movie in movies”2.依次从movies中取出movie， 并且在元素的内容中，我们可以使用mustache语法，来使用movie。如果在遍历的过程中，我们需要拿到元素在数组中的原创 2020-06-08 18:52:57 · 6277 阅读 · 0 评论 -
v-show的使用以及和v-if的区别
v-show的使用以及和v-if的区别v-showv-show的用法和v-if非常相似，也用于决定一个元素是否渲染；v-if和v-show的对比：v-if和v-show都可以决定一个元素是否渲染，那么开发中我们如何选择呢？1.v-if当条件为false时，压根不会有对应的元素在DOM中。2.v-show当条件为false时，仅仅是将元素的display属性设置为none而已。开发中如何选择呢？1.当需要在显示与隐藏之间切换很频繁时，使用v-show。2.当只有一次切换时，通过使用v-if。原创 2020-06-08 18:20:15 · 326 阅读 · 0 评论 -
登录切换小案例
登录切换小案例条件渲染案例我们来做一个简单的小案例用户在登录时，可以切换使用用账号登录还是邮箱地址登录。案例小问题：小问题1.如果我们有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入内容。2.但是按道理讲，我们应该切换到另一个input元素中了。3.在另一个input元素中，我们并没有输入内容。4.为什么会出现这个问题呢？问题解答1.这是因为Vue在进行DOM渲染时，处于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。2.在下面的案例中，Vue内部会发原创 2020-06-08 18:00:35 · 256 阅读 · 1 评论 -
v-if、v-else-if、v-else
v-if、v-else-if、v-else1.这三个指令与JavaScript的条件语句if、else、else if类似。2.Vue的条件指令可以根据表达式的值DOM中渲染或销毁元素或组件。v-if<div id="app"> <h2 v-if="isShow"> <div>abc</div> <div>abc</div> <div&原创 2020-06-07 20:31:34 · 205 阅读 · 0 评论 -
v-on修饰符使用
v-on修饰符使用在某些情况下，我们拿到的event的目的可能是进行一些事件处理。Vue提供了修饰符来帮助我们方便的处理一些事件：.stop-调用event.stopPropagtion().<div id="app"> <!-- 1 .stop修饰符的使用 --> <div @click="divClick"> aaaaaaa <button @click.stop="btnC原创 2020-06-07 12:40:31 · 263 阅读 · 0 评论 -
v-on参数传递问题
v-on参数传递问题当通过methods中定义方法，以供@click调用时，需要注意参数问题。情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去。情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-06-07 11:21:47 · 662 阅读 · 0 评论 -
v-on基本使用和语法糖
v-on基本使用和语法糖在前端开发中，我们需要经常和用户交互。1.这个时候，我们就必须监听用户发生的事件，比如点击、拖拽、键盘事件等等。2.在Vue中如何监听事件呢？使用v-on指令v-on介绍：作用：绑定事件监听器缩写：@预期：function | inline statement | Object参数：event语法糖：<button @click="increment">+</button> <button @click="decrem原创 2020-06-07 10:26:49 · 1756 阅读 · 0 评论 -
计算属性和methods的对比
计算属性和methods的对比计算属性的性能比methods要高因为计算属性有一个缓存的作用，当遇到反复调用一个东西时它不会反复的循环调用，而是直接引用上一次的结果。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g原创 2020-06-05 19:21:37 · 296 阅读 · 0 评论 -
计算属性的setter和getter
计算属性的setter和getter每一个计算属性都包含一个getter和setter为什么计算属性不是按照函数的方式进行使用而是按照属性的方式进行使用？计算属性一般是没有set方法的，只读属性，我们一般将set方法删除掉代码段1：fullName: function() { return this.firstName + ' ' + this.lastName; }代码段2：fullName: {原创 2020-06-05 19:05:58 · 228 阅读 · 0 评论 -
前三天学习内容的总结
Vuejs前三天学习内容的总结(6.3-6.5)一.邂逅Vuejs1,1认识Vuejs为什么学习VuejsVue的读音Vue的渐进式Vue的特点1.2安装VueCDN引入下载引入npm安装1.3Vue的初体验hello Vuejs1.mustache->体验Vue响应式Vue列表展示1.v-for2.后面给的数组追加元素的时候，新的元素也可以在界面中渲染出来3.Vue计数器小案例事件监听：click->methods1.4Vue中的MVVM1.5创建Vue原创 2020-06-05 17:48:18 · 118 阅读 · 0 评论 -
计算属性（重要）
什么是计算属性？我们知道在模板中可以直接通过插值语法显示一些data中的数据。但是在某些情况下，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示。1.比如我们有firstName和lastNmae两个变量，我们需要显示完整的名称。2.但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}}{{lastName}}我们可以将上面的代码转换成计算属性：OK，我们发现计算属性是写在实例computed选项中的。栗子：<!DOCTYPE htm原创 2020-06-05 16:57:41 · 498 阅读 · 0 评论 -
v-bind动态绑定style(对象语法)
v-bind动态绑定style(对象语法)我们可以利用v-bind：style来绑定一些CSS内联样式。在写CSS属性名的时候，比如font-size我们可以用驼峰式（camelCase）fontSize或短横线分隔(kebab-case,记得用单引号括起来) ‘font-size’绑定class有两种方法：对象语法数组语法snipaste截图软件栗子：<!DOCTYPE html><html lang="en"><head> <m原创 2020-06-05 10:58:42 · 368 阅读 · 0 评论 -
v-bind动态绑定class（数组语法）
（了解）v-bind动态绑定class（数组语法）很多时候我们希望动态的来切换class,比如：1.当数据为某个状态时，字体显示红色2.当数据为另一个状态时，字体显示黑色绑定class有两种方式：1.对象语法2.数组语法绑定方式：对象语法对象语法的含义是：class后面跟的是一个对象对象语法有下面这些用法：用法一：直接通过{}绑定一个类 <h2 class="title" v-bind:class="{active:isActive}">{{message}}</h2原创 2020-06-05 10:17:20 · 2313 阅读 · 0 评论 -
v-bind动态绑定class（对象语法）
v-bind动态绑定class（对象语法）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>原创 2020-06-04 21:14:03 · 235 阅读 · 0 评论 -
v-bind的使用
v-bind的使用除了内容需要动态来决定外，某些属性我们也希望动态来绑定1.比如动态绑定a元素的href属性2.比如动态绑定img元素的src属性这个时候我们可以使用v-bind指令作用：动态绑定属性缩写：:预期：any(with argument) | Object (with argument)参数：attrOrProp(optional)v-bind语法糖v-bind有一个对应的语法糖，也就是简写方式在开发中，我们通常会使用语法糖的形式，因为这样更加简洁。简写方式如下：<原创 2020-06-04 20:50:50 · 423 阅读 · 0 评论 -
插值操作
插值操作mustache语法：mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式<div id="app"> <h3>{{firstName}},hello</h3> <h3>{{firstName+' '+lastName}}</h3> <h3>{{firstName}} {{lastName}}</h3> <h3>{{cou原创 2020-06-04 14:41:14 · 473 阅读 · 0 评论