前言

因为是Python系列只是简单介绍VUE的基本使用。

组件是Vue中的一个重要概念，是一个可以重复使用的Vue实例，它拥有独一无二的组件名称，它可以扩展HTML元素，以组件名称的方式作为自定义的HTML标签。因为组件是可复用的Vue实例，所以它们与new Vue（）接收相同的选项，例如data，computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。

把一些公共的模块抽取出来，然后写成单独的的工具组件或者页面，在需要的页面中就直接引入即可。那么我们可以将其抽出为一个组件进行复用。

例如页面头部、侧边、内容区，尾部，上传图片，等多个页面要用到一样的就可以做成组件，提高了代码的复用率。

一、数据的绑定

1.数据绑定

在vue中数据通过data属性进行绑定，如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="https://unpkg.com/vue/dist/vue.js"></script><title>Document</title>
</head>
<body><div id="app">{{name}}</div><script>new Vue({el: '#app',data: {name:'python'}})</script>
</body>
</html>

二、组件的使用

1.全局组件和局部组件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="https://unpkg.com/vue/dist/vue.js"></script><title>Document</title>
</head>
<body><div id="app"><zujian_all></zujian_all></div><script>// 局部组件注册,定义局部组件var zujian_a={template:'<div>局部组件1</div>',};// 全局组件Vue.component('zujian_all',{   // 在全局中使用绑定的数据 {{name}}template:'<div>全局组件  <zujian_a></zujian_a> {{name}} </div>',// components 将局部组件注册到全局组件中components:{zujian_a,},// data属性指定绑定的数据内容，可以在当前的组件中进行使用data:function(){return {name:'python'}}})new Vue({el: '#app',})</script>
</body>
</html>

三、组件传值

父组件给子组件传值，组件中通过props属性传递数据，如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="https://unpkg.com/vue/dist/vue.js"></script><title>Document</title>
</head>
<body><div id="app"><zujian_all></zujian_all></div><script>// 局部组件注册,定义局部组件var zujian_a={template:'<div>局部组件1 {{pos}} </div>',// 在子组件中通过props属性定义接受值的名称props:['pos']};// 全局组件Vue.component('zujian_all',{   // 在全局组件中调用子组件时，通过v-bind指定子组件中pos接受父组件中的哪个值template:'<div>全局组件  <zujian_a v-bind:pos="name"></zujian_a>  </div>',// components 将局部组件注册到全局组件中components:{zujian_a,},// data属性指定绑定的数据内容，可以在当前的组件中进行使用data:function(){return {name:'python'}}})new Vue({el: '#app',})</script>
</body>
</html>

子组件给父组件传值，通过$emi将数据传递个父组件

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Hello Ming</title><script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script><script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body><div id='app'><zujian_all></zujian_all></div><script>var zujian_a={ template:'<div>  局部组件A  <button v-on:click="isupload"> 上传</button>  </div>',methods:{isupload:function(){this.$emit('isListen','hello') // 子元素上的点击事件成功后，通过 $emit 将事件和数据传递给父组件}}}Vue.component('zujian_all',{template:'<div>  全局组件   <zujian_a v-on:isListen="isShow"></zujian_a> </div>',components:{zujian_a},methods:{isShow:function(data){alert(data)  //data参数接受子组件传递的值}}})new Vue({el:'#app'})</script>
</body>
</html>

【愚公系列】2022年04月 Python教学课程 78-VUE组件中的数据和属性相关推荐

【愚公系列】2022年04月 Python教学课程 63-DRF框架安装与配置
文章目录前言一.环境安装与配置二.安装三.案例 1.settings.py配置 2.urls.py使用前言 Django REST框架是一个强大而灵活的工具包,用于构建Web API. 您可 ...
【愚公系列】2022年04月 Python教学课程 62-DRF框架介绍
文章目录一.DRF简介二.DRF的特点三.DRF增删改查一.DRF简介 Django REST framework框架是一个用于构建WebAPl的强大而又灵活的工具.通常简称为DRF框架或RE ...
【愚公系列】2021年12月 Python教学课程 17-模块与包
文章目录一. 什么是模块二. 模块的使用 1. import xx.xx 2. from xx.xx import xx.xx 3. from xx.xx import xx as rename ...
【愚公系列】2021年12月 Python教学课程 01-全方位解读Python
文章目录一.python简介二.python起源三.Python 的发展趋势四.Python 语言的特点 1. 简单易学.明确优雅.开发速度快 2. 跨平台.可移植.可扩展.交互式.解释型.面 ...
【愚公系列】2021年12月 Python教学课程 04-字符串
文章目录一.字符串类型 str 1 字符串类型的定义 2 字符串的运算: 3 Python 转义字符: 4 "多行字符串" 5 字符串内置方法 6 格式化方法 7 字符串颜色控制 ...
【愚公系列】2021年12月 Python教学课程 14-递归函数
文章目录一.递归函数一.递归函数我们在前面的章节中,很多次的看到了在函数中调用别的函数的情况.如果一个函数在内部调用了自身,这个函数就被称为递归函数. What?函数可以自己调用自己?那不是成为 ...
【愚公系列】2021年12月 Python教学课程 19-面向对象编程-面向对象定义
文章目录一. 什么是面向对象编程总结一. 什么是面向对象编程面向对象编程:Object Oriented Programming,简称 OOP,是一种程序设计方法.OOP 把对象作为程序的基本 ...
【愚公系列】2021年12月 Python教学课程 07-字典Dict
文章目录一.字典Dict 二.字典相关操作 1.创建字典 2.访问字典 3.增加和修改 4.删除字典元素.清空字典和删除字典 5.字典的重要方法 6.遍历字典一.字典Dict Python 的字典 ...
【愚公系列】2022年01月 Java教学课程 73-反射
文章目录一.反射 1.反射的概述 2.获取Class类对象的三种方式 3.反射获取构造方法并使用 1.Class类获取构造方法对象的方法 2.Constructor类用于创建对象的方法 3.小结 4 ...

【愚公系列】2022年04月 Python教学课程 78-VUE组件中的数据和属性

文章目录

前言