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基础之计算属性,组件基础定义和使用的更多相关文章

  1. Vue的computed计算属性是如何实现的

    一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...

  2. Vue 过滤器与计算属性

    过滤器 V1.x 版本 过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档,http://cn.vuejs.org/ ...

  3. 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 代码实 ...

  4. Vue学习之vue中的计算属性和侦听器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. vue里在自定义的组件上定义的事件

    事件分为原生事件和自定义事件. vue里在自定义的组件上定义的事件,都被认为是自定义事件,必须用$emit()来触发. 这也是子组件向父传值的原理. 如果想作为原生事件,需要在原生事件后面加上.nat ...

  6. Vue.js 源码分析(六) 基础篇 计算属性 computed 属性详解

    模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护,比如: <div id="example">{{ messag ...

  7. Vue基础之计算属性

    适用场景 设想一个场景,你需要得到一个复杂运算/逻辑的返回值,利用模板内的表达又过长且难以阅读和维护,这时计算属性就可以很好的解决你的问题.看下面的例子: <!DOCTYPE html> ...

  8. Vue.js-09：第九章 - 组件基础再探（data、props）

    一.前言 在上一章的学习中,我们学习了 Vue 中组件的基础知识,知道了什么是组件,以及如何创建一个全局/局部组件.不知道你是否记得,在上一章中,我们提到组件是一个可以复用的 Vue 实例,它与 Vu ...

  9. Vue教程：计算属性computed与侦听器watch（三）

    计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

随机推荐

  1. Docker笔记6：Docker 常见命令及镜像管理

    目  录 一.Docker 常用命令 docker version 命令 docker info 命令 二.Docker 镜像管理 搜索镜像:docker search 镜像名 获取镜像:docker ...

  2. Python初学习:简单的练习题

    Python初学习 一些见到那的练习题: 初级难度 设计一重量转换器,输入以g为单位的数字后,返回换算结果以Kg为单位的结果 中级难度 设计一个求直角三角形斜边长的函数,(以两个直角边为参数,求最长边 ...

  3. 多测师讲解jmeter _图片详解_（全）高级讲师肖sir

  4. 多测师讲解自动化selenium___定位元素002___高级讲师肖sir

    高级自动化测试python+selenium教程手册 --高级讲师肖sir(Harm) 第 2 章8种定位方法 总结: selenium 的 webdriver 提供了八种基本的元素定位方法,前面六种 ...

  5. 机器学习 KNN算法原理

    K近邻(K-nearst neighbors,KNN)是一种基本的机器学习算法,所谓k近邻,就是k个最近的邻居的意思,说的是每个样本都可以用它最接近的k个邻居来代表.比如:判断一个人的人品,只需要观察 ...

  6. 通过jQuery来获取DropDownList的Text/Value属性值

    脚本代码: <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript">& ...

  7. Sectigo邮件签名证书安装指南

    本篇将详细讲解如何在邮箱客户端安装Sectigo 邮件签名证书. 请先准备好您的邮件签名证书.如已签发未导出,请参照如何导出邮件签名证书的步骤完成准备工作. 本文将以Outlook 邮箱系统为例,在其 ...

  8. 【CF1436B】Prime Square 题解

    原题链接 题意简介 要求构造一个由不大于 1e5 的非负数构成的正方形矩阵,矩阵的每个元素不是质数,但每一行.每一列的数字的和都是质数. 思路分析 看到样例二,我们知道数字可以重复. 于是,我们很容易 ...

  9. Python ( 学习基础篇 第二部 )

    目录 运算符 算数运算符 比较运算符 赋值运算符 位运算符 逻辑运算符 成员运算符 身份运算符 Python 中运算符的优先级 运算符总结基础语法 判断类型 isinstence 代码块 流程控制 w ...

  10. 学会Git玩转GitHub(第三篇) 入门详解 - 精简归纳

    学会Git玩转GitHub(第三篇) 入门详解 - 精简归纳 JERRY_Z. ~ 2020 / 10 / 25 转载请注明出处!️ 目录 学会Git玩转GitHub(第三篇) 入门详解 - 精简归纳 ...