vue 只在父级容器移动_Vue易遗忘的基础复习(二)
数据请求
- Vue-resource请求
在Vue2.0之后已经被舍弃
2. fetch请求
因为传统 Ajax (指 XMLHttpRequest)存在一些令人头疼的问题:配置和调用方式非常混乱,而且基于事件的异步模型写起来也没有现代的 Promise,generator/yield,async/await 友好。而Fetch 的出现就是为了解决 XHR 存在的问题。
1 //get
2 fetch("**?a=1&b=2").then(res=>res.json()).then(res=>{console.log(res)})
3 fetch("**").then(res=>res.text()).then(res=>{console.log(res)})4 //post
5 fetch("**",{6 method:'post', //必须指明post请求方式,默认是get
7 headers: {8 "Content‐Type": "application/x‐www‐form‐urlencoded"
9 },
10 body: "name=zhangsan&age=100"
11 }).then(res=>res.json()).then(res=>{console.log(res)});
注意:因为fetch请求的数据是一个状态,所以想要调取数据需要在第二个.then之后才能拿到数据
3.axios请求
// get
axios.get("json/test.json?name=zhangsan&age=10").then(res=>{// res.data 才是真正的后端数据console.log(res.data.data.films)this.datalist = res.data.data.films
})//post
axios.post("json/test.json",{name:"zhangsan",age:100
}).then(res=>{console.log(res.data)
})
组件使用
(1)组件化
模块化是将页面中的整个完整的功能模块划分 优点:代码复用,便于维护
(2)组件
组件是可复用的 Vue 实例。组件之间可以相互嵌套,最外层只能有一个根。
组件分为:全局组件、局部组件
全局组件在任意的实例,所有父级组件都能使用,局部组件只能在创建自己的父级组件或者自己的实例中使用。
全局组件:
Vue.component('hello',{template:"<h1>hello</h1>"
})
组件通过template来确定自己的模板,template里的模板必须有根节点,标签必须闭合组件的属性挂载通过:data方法来返回一个对象作为组件的属性,这样做的目的是为了每一个组件实例都拥有独立的data属性
局部组件:
components:{'hello':{template:"<h1>asdasdasdasdasdas</h1>"}}
全局组件中可以嵌套局部组件:
<div id="app"><fater/>
</div>new Vue({el:"#app",components:{father:{template:'<div>father组件</div>',components:{son:{template:"<div>son组件</div>"}}}}
})
(3)过滤器
filter
全局过滤器:filter
Vue.filter(name,handler)
//name 过滤器名称
//handler 过滤器函数//例子:
<p>{{msg | firstUpper(3,2)}}</p>
Vue.filter('firstUpper',function (value,num=1,num2) {return value.substr(0,num).toUpperCase()+value.substr(num).toLowerCase()
})
局部过滤器:filters
filters:{firstUpper:function (value,num=1,num2) {return value.substr(0,num).toUpperCase()+value.substr(num).toLowerCase()}}
(4)虚拟dom
正常的DOM操作会消耗很多性能,Vue提供了虚拟dom方案。 虚拟DOM的核心思想是:对复杂的DOM结构,提供一种方便的工具,保证最小化的DOM操作,来提高执行效率。
虚拟DOM的Diff算法:
当DOM状态发生改变时,虚拟DOM会进行Diff运算,会进行同层级进行比较前后两棵虚拟DOM树的节点。这就需要每一个节点需要一个独立的key来进行对比,提高效率。
(5)组件之间的通信:因为组件之间的数据,方法是没办法共享的。 i.父子通信:
(1)Props
//父组件引用子组件,给子组件发送数据<bbb money="2"></bbb>//子组件需要接受
'bbb':{props:['money']
}
单向数据流:Prop只是单向绑定,只能父组件属性变化传递给子组件,所以你不能都在子组件中更变prop,会报错。
我们可已对prop传入的数据进行验证
props:{//类型验证:str:String,strs:[String,Number],//必传验证num:{type:Number,required:true}
}
//当父组件传递数据给子组件的时候,子组件不接收,这个数据就会挂载在子组件的模板的根节点上
slot插槽:(1)匿名插槽
//父组件
<div id="app"><hello><div>联通卡</div><div>移动卡</div></hello>
</div>
//子组件
<template id="hello"><div><slot></slot> //在哪写就以为在哪插入</div>
</template>
(2)具名插槽
//父组件
<div id="app"><hello><div slot="a">联通卡</div><div slot="b">移动卡</div></hello>
</div>
//子组件
<template id="hello"><div><slot name="a"></slot><slot name="b"></slot></div>
</template>
(2)ref
通过this.$ref. 可以实现数据的传输
(3)关系链
this.$parent.xxx ($parent,$children,$root),其中[]中的下标是从第一个子组件开始计算,其他子节点不算。
缺点:太乱了 this.$root.$children[3].$children[4]....
ii.子父通信:
(1)$emit
父组件需要声明一条数据,自己用,需要提供一个更自身数据的方法,父组件在调用子组件的时候,需要通过自定义事件将更改自身数据的函数传递给子组件,再用this.$emit(,)触发自定义事件通过父组件自己修改自己数据
(2)$ref
iii.兄弟通信:
采用关系链和ref链去使用或者用event bus事件总线,解决兄弟之间通信问题。
(6)transition过渡
用transition标签包裹需要过渡的的元素,多个元素要有不同key值,transition会有一个name属性,有两种过渡模式: in-out: 新元素先进行过渡,完成之后当前元素过渡离开。 out-in: 当前元素先进行过渡,完成之后新元素过渡进入,然后再CSS中添加过渡样式:
name属性值-enter:定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。
name属性值-enter-active:定义过渡的状态。在元素整个过渡过程中作用,在元素被插入时生效,在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
name属性值-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 ,在 transition/animation 完成之后移除。
name属性值-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。
name属性值-leave-active:定义过渡的状态。在元素整个过渡过程中作用,在离开过渡被触发后立即生效,在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
name属性值-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 ,在 transition/animation 完成之后移除。
vue 只在父级容器移动_Vue易遗忘的基础复习(二)相关推荐
- vue ref 绑定的事件需要移除吗_Vue易遗忘的基础复习(二)
数据请求 Vue-resource请求 在Vue2.0之后已经被舍弃 2. fetch请求 因为传统 Ajax (指 XMLHttpRequest)存在一些令人头疼的问题:配置和调用方式非常混乱,而且 ...
- width:100%与绝对定位同时存在,偏移出父级容器
当父级容器内的子元素width设为100%,而子元素又有绝对定位时,子元素伸展超出父级容器,像下面 出现这种情况的原因,width:100%,这个百分之百是相对其定位父级而言的,其定位父级有多宽,这个 ...
- 关于子元素的margin-top对父级容器无效
原理就是重新构建一个bfc盒子.如果不想看那么长,看下面这句话就好了. 刚开始我没看到这个总结时一直是使用自己摸索出来paddin-top解决,发现该方式并不好.亲测给父级加一个overflow不为v ...
- 父级容器relative子级容器absolutte时,如何设置子级窗口的宽度
<span style="color:#434343">当子容器的position设置为absolute或者fixed,如果元素的父容器为body的时候设置width为 ...
- 如何获取元素在父级div里的位置_前端面试题--元素的BFC特性和实例
1.BFC 是什么? Block Formatting Contexts 块级格式化上下文.(不懂? 没关系,后文有介绍.) 2.为什么需要BFC? 在传统布局中出现的问题需要一种统一的解决方案. 首 ...
- vue 父刷新子_vue.js从父级中更新子组件数据
如何从父组件中更新子组件中的数据?我正在尝试从父级中更新autores属性,并让它更新子级数据.目前什么都没有发生,我认为我没有正确的数据链接.如果我将它作为数据添加到父组件中,那么当代码运行时,父组 ...
- java top.dialog控件,java – 如何只为他的父级创建JDialog onTop?
可以说,我们有几个JFrame窗口同时可见,并且每个窗口都出现JDialog.当我们的窗口处于级联模式和对话框setAlwaysOnTop为真时,所有对话框将在最后一个窗口中可见. 我只想将Dialo ...
- vue怎么调用子元素的方法_vue 父组件中调用子组件函数的方法
vue 父组件中调用子组件函数的方法 在父组件中调用子组件的方法: 1.给子组件定义一个ref属性.eg:ref="childItem" 2.在子组件的methods中声明一个函数 ...
- 四、Vue组件化开发学习笔记——父子组件通信,父级向子级传值(props),子级向父级传值(自定义事件),slot插槽
一.父子组件的通信 在上一篇博文中,我们提到了子组件是不能引用父组件或者Vue实例的数据的. 但是,在开发中,往往一些数据确实需要从上层传递到下层: 比如在一个页面中,我们从服务器请求到了很多的数据. ...
最新文章
- 如何保证接口的幂等性?
- 高金吉院士:让机器“自愈化”引领新科技变革
- debain安装lyx2.2.2,以及报错整理:
- EndNote(二)之英文引文导入方式
- 计算机网络-数据链路层
- 选32位 64位 oracle,32位PLSQL配置为64位的Oracle和64位系统
- 腾讯和阿里在B站“打起来了”,你何时见过这场面?
- Dijkstra算法(c++版)
- object not found php,找不到PHP错误对象
- JMETER HTTP 请求
- requirej入门(二)
- 计算机c盘拒绝访问怎么办,怎么解决Win7系统C盘文件拒绝访问
- 漫漫的webim(一) web实现简易im功能
- python怎么读汉字翻译拼音_Python 返回汉字的汉语拼音
- 【数据库与SQL】力扣刷题SQL篇(7)
- html登录号如何显示用户名,HTML更改登录标签,登录后用户名
- java编程捕鱼和分鱼_C_捕鱼和分鱼
- 【系统测试】性能测试总结
- DOS和BIOS系统调用
- bzoj-4974 [Lydsy1708月赛]字符串大师
热门文章
- 小Z的房间[HEOI2015] (matrix-tree定理)
- JdbcType类型和Java类型的对应关系
- 如何快速打造企业ISO体系文件管理
- 无废话ExtJs 入门教程二十三[员工管理实例:Demo]
- FreeBSD 6.0架设管理与应用-附录B 制作FreeBSD安装光盘
- Object Builder Application Block (2)
- 802.11N blockACK
- Coursera ML笔记 - 神经网络(Learning)
- GC garbage collection 垃圾回收机制
- 动态规划 dp01 西瓜分堆问题 c代码