Vue基础(2)
fetch与axios请求数据
fetch基本语法:
fetch(url,{parmas}).then(res=>
res.json() //返回promise对象
).then(data=>{
return data //返回真正数据
}).catch(err=>{
throw new Error(err)
})
get请求:
<script type="text/javascript">
fetch("./test.json").then(res=>res.json()).then(res=>{
console.log(res)
})
</script>
axios请求
引入axios:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios执行GET
//参数在url中
<script type="text/javascript">
axios.get('/user?ID=12345')
.then(res=>{
console.log(res);
})
.catch(error=>{
console.log(error);
})
</script>
//带参数形式
<script type="text/javascript">
axios.get('/user', {
params: {
ID: 12345
}
})
.then(res=>{
console.log(res);
})
.catch(error=>{
console.log(error);
})
</script>
axios执行POST
<script type="text/javascript">
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function(response){
console.log(response);
})
.catch(function(error){
console.log(error);
})
</script>
计算属性
计算属性定义到 computed 里面,如:
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
myname: "xiaoming"
},
computed:{
getMyname(){
return this.myname.substring(0,1).toUpperCase()+this.myname.substring(1)
} //依赖的状态改变了,计算属性会重新计算一遍
}
}) </script>
这段代码的作用是将myname的第一个字符改成大写,getMyname是一个计算属性方法,需要定义到computed里面,调用的时候直接调用 getMyname,如: {{ getMyname }} 后面不用加小括号,计算属性方法当依赖的状态改变了,计算属性会重新计算一遍。
计算属性跟计算方法的区别
计算属性效率更高,计算属性调用过第一次后会存有缓存,第二次会直接使用缓存中的结果进行返回,当依赖的状态改变时才重新计算。
计算方法每次调用都会重新执行一遍函数,这样效率会降低。
组件化开发
为什么要使用组件?比如我们在一个页面中做好了轮播图效果,现在需要在另一个页面中也使用同样的轮播图,这时就需要复制大量代码
组件就是类似把这些dom结构css样式,逻辑封装成一个盒子或者说模板, 在需要使用重复的地方调用这个组件就能效果。
全局组件
使用 Vue.component定义全局组件,如:
Vue.component("navbar",{
template:`
<div>
<button>返回</button>
navbar
<button>主页</button>
</div>
`
})
Vue.component的第一个参数是组件名,template 的值是html结构的标签
调用组件: <组件名></组件名>,如 <navbar></navbar> 这样就能调用定义好的组件了,在浏览器中 组件标签 会自动被替换成 template中的结构数据
Vue.component的结构跟Vue的结构差不多,也可以定义methods属性 ,
局部组件
说到局部组件,其实当我们创建一个vue实例时,他就是一个root(根)组件,el:命中的元素中就是root组件的模板,根组件可以包含子组件。
局部组件是定义在组件内部的组件,使用components属性,如:
<script type="text/javascript">
Vue.component("navbar",{
template:`
<div>
<button>返回</button>
navbar
<button>主页</button>
<navbarchild></navbarchild>
</div>
`,
components:{
navbarchild:{
template:`<div>navbarchild</div>`
}
}
}) new Vue({
el:"#box"
})
</script>
这段代码在navbar组件中定义了一个局部组件 navbarchild,这个组件只能被 navbar 使用,根(root)组件是使用不了的。
如果需要定义一个组件要能够给所有组件使用,就需要定义成全局组件。
组件编写方式与Vue实例的区别
自定义组件需要有一个root element
一个组件必须有他的根节点,不能有两个根节点,如:
Vue.component("navbar",{
template:`
<div>
<button>返回</button>
navbar
<button>主页</button>
<navbarchild></navbarchild>
</div> <div>111</div>
`
})
这个navbar组件有两个同级的根节点,根节点只能有一个,所以这段代码会报错。要解决这个需要在最外层添加一个标签,这个标签可以是h1、p、nav.. 等
父节点的data是无法共享的
组件可以有data,methods,computed....,但是data 必须是一个函数
组件中 data必须是以函数形式写,如:
<script type="text/javascript">
Vue.component("navbar",{
template:`
<div>
<button>返回</button>
{{ navbarname }}
<button>主页</button>
</div>
`,
data(){
return {
navbarname: "nav"
}
}
}) new Vue({
el:"#box"
})
</script>
data()函数返回一个对象,这个对象是 data状态。
组件属性传递(父传子)
如果要组件中使用父组件中的属性,就 需要组件之间的属性传递,栗子:
<div id="app">
<navbar myname='home'></navbar>
<navbar myname='list'></navbar>
<navbar myname='shopcar'></navbar>
</div>
<script>
Vue.component("navbar", {
template:`
<div>
<button>返回</button>
navbar ----- {{ myname }}
<button>首页</button>
</div>
`,
props:['myname'] //接收父组件传来的属性
})
const app = new Vue({
el: "#app",
data: {
parentname: 'dict'
}
})
</script>
代码中定义了一个组件 navbar ,同时在 navbar 中设置了 props 属性,该属性值是数组类型,表示需要接收父组件传来的属性,可以接收多个,如: props:['a', 'b', 'c'],这些属性通过父组件传递过来后在自己模板中可以之间使用。
父组件在调用 navbar 时定义了一个属性 myname(这个属性名可以随便起,要跟 navbar 中要接收的属性名一样),然后把需要传递的值赋给 myname,再通过 myname 属性将值传给子组件。
上面写的属性值传递都是固定的,如果我们需要动态的传递属性值,就需要用到 v-bind ,将myname设置成动态绑定,如:
<div id="app">
<navbar :myname='parentname'></navbar>
</div> <script>
Vue.component("navbar", {
template:`
<div>
<button>返回</button>
navbar ----- {{ myname }}
<button>首页</button>
</div>`,
props:['myname'] //接收父组件传来的属性
})
const app = new Vue({
el: "#app",
data: {
parentname: 'list'
}
})
</script>
通过 v-bind 为 myname 动态绑定一个属性 parentname
属性验证
有时候在使用组件时,我需要接收一个布尔类型的值,但是调用的时候不小心传了一个字符串类型的值,这样就会造成我们的组件达不到预期的效果
怎么解决这问题呢?我们需要用到属性验证:
前面我们在 navbar 中设置 props的值时数组类型,这样不会存在属性验证,我们需要将 props的值设置成对象类型 如:
props:{
myname: String,
myshow: Boolean
}
props 属性的值是一个对象,对象属性 myname限制的类型是String、myshow是boolen,这样在父组件先子组件传递该属性时,会先验证一下类型是否匹配。
组件属性传递(子传父)
父传子是通过属性,子传父需要通过事件来进行传值,栗子:
<div id="app">
<child @myevent="handleEvent($event)"></child>
</div> <script type="text/javascript">
Vue.component("child", {
template:`
<div><button @click="childClick()">将值传给父组件</button>
</div>
`,
methods:{
childClick(){
this.$emit("myevent", 1000)
}
}
});
const vm = new Vue({
el: "#app",
methods:{
handleEvent(event){
console.log("父组件", event)
}
}
})
</script>
先来分析 child 组件,在child组件定义了一个childClick()方法,方法中有一行代码 this.$emit("myevent", 1000),$emit 这个方法用来调用父组件传过来的事件执行方法,第一个参数是事件名 (这个事件名是从父组件传递过来的),第二个参数是在调用父类事件方法的时候需要传参过去的值(后面还可以跟多个参数)。
父组件在调用 child 组件时设置了一个事件 @myevent(事件名自己可以任意定义) 为这个事件绑定了方法 handleEvent 它接收一个参数,当子组件执行 this.$emit("myevent", 1000) 这行代码时,子组件就会调用父组件传递过来的事件方法执行 handleEvent这个方法,并且会将值1000传参给handleEvent执行,这样就实现了组件子传父。
Vue基础(2)的更多相关文章
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇:传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- python 全栈开发,Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- Vue 基础精讲
Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...
- Vue基础以及指令
Vue 基础篇一 一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...
- 2-5 vue基础语法
一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...
- Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例,vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
- vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...
- Vue基础及脚手架环境搭建
From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...
随机推荐
- thinkPHP5.1 MVC架构使用方法
MVC架构 1.M层:model(模型),是增强版的数据库 M层是用来存放自动完成代码.修改器(数据修改).模型事件.验证器 2.V层:view 显示视图 V层用来存放HTML.css.JavaScr ...
- Python实现自动生成小学四则运算题目
Github地址: https://github.com/guoyuyi/gyy.github.io/blob/%E4%BD%9C%E4%B8%9A1/zy1.py 题目描述: 通过python语言编 ...
- Hive改表结构的两个坑|避坑指南
Hive在大数据中可能是数据工程师使用的最多的组件,常见的数据仓库一般都是基于Hive搭建的,在使用Hive时候,遇到了两个奇怪的现象,今天给大家聊一下,以后遇到此类问题知道如何避坑! 坑一:改变字段 ...
- Ubuntu中发生git Connection refused
今天在提交代码的时候: ssh: connect to host github.com port 22: Connection refused fatal: 无法读取远程仓库. 请确认您有正确的访问权 ...
- (转载)CPU基础知识
本文转载自网络. 如有侵权,请联系处理! 简介 中央处理器(CPU,Central Processing Unit)是一块超大规模的集成电路,是一台计算机的运算核心(Core)和控制核心( Con ...
- 开源发丝分割数据集CelebAHairMask-HQ(国庆献礼)
在这个特别日子里,举国欢庆,什么都可以缺席,大礼包不行. 本次开源针对CelebAMask-HQ中发丝部分进行细化的数据集. 该数据集可用于发丝分割等方向的研究和探索. 在过去的一年时间里,疫情改变很 ...
- 软件定义网络实验记录③--Mininet 实验——测量路径的损耗率
一.实验目的 在实验 2 的基础上进一步熟悉 Mininet 自定义拓扑脚本,以及与损耗率相关的设定: 初步了解 Mininet 安装时自带的 POX 控制器脚本编写,测试路径损耗率. 二.实验任务 ...
- Git多人项目开发流程演练
1. 前言 本文利用 GitHub 平台进行一个多人项目开发流程的演练,以加深课上所学内容. 参考文献:五⼤场景玩转 Git,只要这一篇就够了! 2. 初始化项目 2.1 新建远程项目 一个多人项目通 ...
- Trie树【字典树】浅谈
最近随洛谷日报看了一下Trie树,来写一篇学习笔记. Trie树:支持字符串前缀查询等(目前我就学了这些qwq) 一般题型就是给定一个模式串,几个文本串,询问能够匹配前缀的文本串数量. 首先,来定义下 ...
- 1.入门篇十分钟了解Spring Cloud
文章目录 Spring Cloud入门系列汇总 为什么需要学习Spring Cloud 什么是Spring Cloud 设计目标与优缺点 设计目标 优缺点 Spring Cloud发展前景 整体架构 ...