03 . Vue基础之计算属性,组件基础定义和使用
vue组件
fetch请求组件
fetch
XMLHttpRequest是一个设计粗糙的API, 配置和调用方式非常混乱,而且基于事件的异步模型写起来不友好,兼容性不好.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id="box">
<button @click="handleClick()">获取影片信息</button>
<ul>
<li v-for="data in datalist">
<h3>{{ data.name }}</h3>
<img :src="data.poster">
</li>
</ul>
</div>
<script>
new Vue({
el: "#box",
data: {
datalist: []
},
methods: {
handleClick() {
fetch("./json/test.json").then(res => res.json()).then(res => {
console.log(res.data.films)
this.datalist = res.data.films
})
}
}
})
</script>
<!-- new Vue({
el: "#box",
data:{
datalist:["111","222","333"]
}
}) -->
</body>
</html>
axios请求组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id="box">
<button @click="handleClick()">正在热映</button>
<ul>
<li v-for="data in datalist">
<h1>{{ data.name }}</h1>
<img :src="data.poster">
</li>
</ul>
</div>
<script>
new Vue({
el: "#box",
data: {
datalist: []
},
methods: {
handleClick() {
axios.get("./json/test.json").then(res => {
// axios 自欧东包装data属性 res.data
console.log(res.data.data.films)
this.datalist = res.data.data.films
}).catch(err => {
console.log(err);
})
}
}
})
</script>
</body>
</html>
vue计算属性
/*
复杂逻辑,模板难以维护
1. 基础例子
2. 计算缓存 VS methods
- 计算属性是基于他们的依赖进行缓存的.
- 计算属性只有在他的相关依赖发生改变时才会重新求值
3. 计算属性VS watch
- v-model
*/
Example1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id="box">
<!-- 截取myname字符串将首字母大写,不推荐,请看下面 -->
{{ myname.substring(0,1).toUpperCase() + myname.substring(1) }}
<!-- 不要加(),否则就是函数 -->
<p>计算属性:{{ getMyName }}</p>
<p>普通方法:{{ getMyNameMethod() }}</p>
<div>
也需要计算结果
<p>计算属性:{{ getMyName }}</p>
<!-- 计算属性可以让一个页面多个地方调用一个计算结果只调用一次,而方法多次调用会多次执行 -->
<!-- 1. 依赖的状态改变了, 计算属性会重新计算一遍
2. 计算属性会缓存 -->
<p>普通方法:{{ getMyNameMethod() }}</p>
</div>
</div>
<script>
vm = new Vue({
el: "#box",
data: {
myname: "xiaoming"
},
methods:{
getMyNameMethod(){
console.log("getMyNameMethos-方法调用")
return this.myname.substring(0,1).toUpperCase() + this.myname.substring(1) }
},
computed:{
getMyName(){
console.log("getMyName-计算属性调用")
return this.myname.substring(0,1).toUpperCase() + this.myname.substring(1)
}
}
})
</script>
</body>
</html>
Example2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id="box">
<input type="text" v-model="mytext" />
<!-- <input type="text" @input="handleInput()" v-model="mytext" /> -->
<ul>
<li v-for="data in getMyDatalist">
{{ data }}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#box",
data: {
mytext: "",
datalist: ["aaa", "bbb", "ccc", "ddd", "eee", ],
},
computed: {
getMyDatalist() {
return this.datalist.filter(item => item.indexOf(this.mytext) > -1)
}
},
})
</script>
</body>
</html>
vue组件
组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
全局组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
<style>
.navbar{
background: red;
}
</style>
</head>
<body>
<div id="box">
<navbar></navbar>
<navbar></navbar>
</div>
<script type="text/javascript">
// 1. 全局定义组件(作用域隔离)
Vue.component("navbar", {
template: `
<div style="background:yellow">
<button @click="handleback()">返回</button>
navbar
<button>主页</button>
</div>`,
methods: {
handleback() {
console.log("back")
}
}
})
new Vue({
el: "#box"
})
</script>
</body>
</html>
03 . Vue基础之计算属性,组件基础定义和使用的更多相关文章
- Vue的computed计算属性是如何实现的
一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...
- Vue 过滤器与计算属性
过滤器 V1.x 版本 过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档,http://cn.vuejs.org/ ...
- Vue学习之--------计算属性（2022/7/9）
文章目录 1.计算属性 1.1 计算属性实现 1.1.1 基础知识 1.1.2 代码实例 1.1.3 测试效果 1.2 计算属性简写 1.2.1 简写代码 1.3 使用插值语法实现 1.3.1 代码实 ...
- Vue学习之vue中的计算属性和侦听器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue里在自定义的组件上定义的事件
事件分为原生事件和自定义事件. vue里在自定义的组件上定义的事件,都被认为是自定义事件,必须用$emit()来触发. 这也是子组件向父传值的原理. 如果想作为原生事件,需要在原生事件后面加上.nat ...
- Vue.js 源码分析(六) 基础篇 计算属性 computed 属性详解
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护,比如: <div id="example">{{ messag ...
- Vue基础之计算属性
适用场景 设想一个场景,你需要得到一个复杂运算/逻辑的返回值,利用模板内的表达又过长且难以阅读和维护,这时计算属性就可以很好的解决你的问题.看下面的例子: <!DOCTYPE html> ...
- Vue.js-09：第九章 - 组件基础再探（data、props）
一.前言 在上一章的学习中,我们学习了 Vue 中组件的基础知识,知道了什么是组件,以及如何创建一个全局/局部组件.不知道你是否记得,在上一章中,我们提到组件是一个可以复用的 Vue 实例,它与 Vu ...
- Vue教程：计算属性computed与侦听器watch（三）
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
随机推荐
- h5的第一份翻译
<!DOCTYPE html>DOCTYPE DOC文本文档documentTYPE 类型html hyper超,超级的:text文本:markup标记:language语言<htm ...
- Nuxt+Vue聊天室|nuxt仿微信App界面|nuxt.js聊天实例
一.项目简述 nuxt-chatroom 基于Nuxt.js+Vue.js+Vuex+Vant+VPopup等技术构建开发的仿微信|探探App界面社交聊天室项目.实现了卡片式翻牌滑动.消息发送/emo ...
- day01 Pyhton学习
一.python介绍 python是一种解释型.弱类型的高级编程语言. 编译型:是把源程序的每一条语言编译成机器语言,并保存成二进制文件,给计算机执行,运算速度快. 优点:程序执行效率高,可以脱离语言 ...
- 联赛模拟测试17 A. 简单的区间 启发式合并
题目描述 分析 我们要找的是一段区间的和减去该区间的最大值能否被 \(k\) 整除 那么对于一段区间,我们可以先找出区间中的最大值 然后枚举最大值左边的后缀与最大值右边的前缀之和是否能被 \(k\) ...
- Vagrant系列(一)----win10搭建Vagrant+VirtualBox环境_
一.Vagrant是什么? vagrant是一个操作虚拟机的工具.是一个基于Ruby的工具,用于创建和部署虚拟化开发环境. 通过命令和配置文件来管理虚拟机,很快就能完成一套开发环境的 ...
- ▶ 0001 No application 'E:\www\go\blog' found in your GOPATH
go mod 配置 beego 首先cmd bee new blog go mod init 然后复制到任意目录 bee run 就会报错, 要退出该目录,进入上级目录 bee run blog 才行
- linux(centos8):prometheus使用mtail监控错误日志
一,mtail的用途? mtail :从应用程序日志中提取指标以导出到时间序列数据库或时间序列计算器 它是一个google开发的日志提取工具,用途就是: 实时读取应用程序的日志. 再通过自己编写的脚本 ...
- Java中<?>，<? extends E>，<? super E>
在集合中,经常可看到<?>,<? extends E>,<? super E>,它们都是属于泛型: <?>: 是泛型通配符,任意类型,如果没有明确,那么 ...
- 理解 Android Binder 机制（一）：驱动篇
Binder的实现是比较复杂的,想要完全弄明白是怎么一回事,并不是一件容易的事情. 这里面牵涉到好几个层次,每一层都有一些模块和机制需要理解.这部分内容预计会分为三篇文章来讲解.本文是第一篇,首先会对 ...
- 女朋友看了我的博客，说太LOW了，于是我搞了一天~
持续原创输出,点击上方蓝字关注我 原创博客+1,点击左下角阅读原文进入 目录 前言 如何下载? 配置文件的分类 基本信息配置 修改主题 Next主题样式设置 添加动态背景 修改链接的样式 添加文章搜索 ...