![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue学习之路
学习掌握vue的使用,注重应用
爱码小电驴
这个作者很懒,什么都没留下…
展开
-
通俗形象地理解下vue中组件之间通信的方法
因为组件化来开发后,中间的一些数值要相互传过来使用的话,这就是组件之间的通信问题!这里还有说下就是因为每个组件的数据作用域是没法共享的!所以才需要通信1、父子之间的通信父子组件的区分就是:谁在谁的模板中,谁就是谁的孩子!现在两个人,一个Father和Son然后使用的时候是在大概这样使用的有一天,父亲有好了多个儿子,为了区别他们,决定给他们取个好听的名字,比如老大叫一宝,老二叫二狗,老三叫三虎,这个时候父亲说看他们的脸记不住,决定让每个孩子都在胸前贴上自己的名字!这里就是父亲给孩子分别传递这个名原创 2020-07-26 19:44:17 · 181 阅读 · 0 评论 -
最详细易懂的vue路由学习笔记整理
之前在写vue项目的时候在路由那块不是特别清晰,现在写个整理,记录下自己的学习心得在以往的网站中,想要做到各个页面跳转会想到用a标签来实现,在vue项目中,想要实现这样的跳转也可以用a标签来,但是相比之下,有一种更好的插件可以用,那就是路由(router)在下面点击跳转页面!!解决哪个路由代表哪个组件显示酱紫!!!router就像一般的插件一样在vue项目中遵循先安装、配置(默认有个router.js配置文件)、使用的流程,在安装手脚架的时候可以一起将router一起安装了;首先,会自动生成一份r原创 2020-07-18 00:02:49 · 347 阅读 · 0 评论 -
vue项目中跨域问题的处理
在数据请求当中,由于不同源造成的跨域问题【跨域问题后面再整理写一篇】比如我要获取拉钩网的数据,这时候就会出现跨域问题在vue项目中处理跨域问题的配置文件是vue.config.js可以按照这个文档来配置就行主要用到是里面的devServer.proxy比如我想获取拉钩网(https://m.lagou.com/listmore.json)这个数据,然后这里写下跨域问题的处理...原创 2020-07-17 13:21:03 · 1053 阅读 · 0 评论 -
最详细的Vue学习之父子组件之间通信
** 有时候需要实现一些功能时会用到组件之间的通信**一、父传子–靠属性比如需要做一个导航,在不同的页面需要显示不同的标题时,可以根据父组件传过来的属性来改变子组件的显示,下面的例子中,父组件是root(就是实例化的vue)<body> <div id="box"> <navbar myname = "position"></navbar> <navbar myname = "list"></navbar原创 2020-07-14 18:55:19 · 151 阅读 · 0 评论 -
最详细之--Vue组件定义学习
一、组件的定义1、全局组件定义(两种定义法) // 定义全局组件写法一: Vue.component('comp', //注意组件字母别写错了!写多了n { template: ` <div> 这里是组件 <button @click = handleback()>按钮!</button> <原创 2020-07-13 16:07:27 · 147 阅读 · 0 评论 -
vue初学习(七)——自定义指令
自定义指令是指当一些指令不够用的时候需要自己自定义一些指令来实现对应的功能自定义指令分为局部和全局的,和过滤器filter一样,局部的可以一次性定义多个指令,全局的实例化一次只能定义一个指令在打开这个页面后还没点击过任何内容,这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能:写法:directive(自定义名字,{inserted:函数})全局定义:// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 D原创 2020-05-19 16:21:11 · 133 阅读 · 0 评论 -
vue初学习(六)——filter过滤器
filter 过滤器的使用filter主要用于处理数据格式问题,分为局部和全局的用法与computed计算属性的最大区别就是 filter可以是全局的,但是计算属性不能,他们能够完成的工作可以是相同的;computed是通过绑定函数的方式来执行,filter是用管道符在数据后面隔开filter局部用法:定义一个过滤器名称:数值会执行什么样的函数 <div id="app"> <h3> 没有进行过滤器处理的数据 </h3> <p>原创 2020-05-19 15:35:14 · 135 阅读 · 0 评论 -
Vue初入门(五)—— 数据请求
Vue数据请求方式有两大种:1、第三方提供的数据请求库:axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。2、原生JS提供的请求方式:fetch一、axios数据请求方式 文档1、使用axios请求模拟数据2、使用axios进行get数据请求3、使用axios进行post数据请求下面按照顺序来学习下用法先在官网中引入文件<script src="https://unpkg.com/axios/dist/axios原创 2020-05-18 17:24:46 · 329 阅读 · 0 评论 -
vue初学习(一)—— 基础指令
初步认识vue一、Vue特点,Vue是不兼容ie8以及以下,因为Vue使用了不兼容ie8以及以下的es5的语法易用,偏重于应用灵活: 完整的生态系统小米公司: 手机、电视、电脑、衣服、智能家居、。。。高效vue.js的原文件很小性能高二、 Vue为什么性能高?应该Vue使用了 虚拟DOM 技术三、 虚拟DOM是什么呢?使用js对象模型来模拟真实DOM节点四、Vue是一个MVVM类型框架,M V VM五、什么是MVCMVC其实一个架构思想,指的是原创 2020-05-15 01:16:35 · 150 阅读 · 0 评论 -
Vue初学习——类名绑定和样式绑定
类名绑定 := v-bind 单项数据绑定第一种方法:类名绑定方法 -> 对象形式写法 :<p :class = "{类名: 布尔值}">第二种方法:类名绑定方法 -> 数组形式写法:<p :class = "['类名1','类名2']"></p> <style> .size { width: 100px; height: 100px; } .bg{原创 2020-05-14 21:24:14 · 372 阅读 · 0 评论 -
vue学习初入门(三)——计算属性和侦听器
computed 计算属性的用法第一种用法:想要把字符串反转,这个只是单向的变化 getter属性有时会在视图层放入太多的逻辑处理,导致违背了关注点分离的特点,也不好维护,这时考虑计算属性的用法,例如: <div id="app"> <p> {{ msg }} </p> <!-- 需求:将msg反向输出 str->arr->reverse -> str --> <!-- V是视图,vm才原创 2020-05-14 21:10:05 · 223 阅读 · 0 评论 -
Vue初入门(二)———列表渲染和事件
一、列表渲染 v-for** v-for 能够渲染输出的有 :字符串、数值**原创 2020-05-14 15:32:37 · 130 阅读 · 0 评论