vue的组件基础
组件分为全局组件和局部组件。
组件的核心是template；所有的数据都为template服务。
父组件子组件传值：因为子组件是父组件的个标签，完全等同于添加动态属性；
然后子组件能够通过props：[ ]获取，(注意，props必须是数组或者对象，而不能是字符串)
如果不通过props接受父组件穿过来的值，那么子组件会以行间样式的形式把值表现出来，如下
<body>
<div id="app">
<my-template :trans='data1'></my-template>
</div>
<!-- <script src="../vue.js"></script> -->
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.common.dev.js"></script>
<script>
var myTemplate = {
template: '<div> {{trans}} </div>',
props: {
trans: [Number, String ] //子组件对父组件传来的值进行约束，必须是数字,还可以是对象，有default，type，require，validator
} }
const vm = new Vue({
el: '#app',
data: {
data1: 'aaa',
},
components:{
myTemplate: myTemplate
} }) </script>
vue的组件基础的更多相关文章
- 前端框架之Vue(9)-组件基础&vue-cli
组件基础 基本示例 这里有一个 Vue 组件的示例: <!DOCTYPE html> <html lang="en"> <head> <m ...
- vue入门——组件基础todolist
1. 以下是 todolist 的例子,没有用到组件:下面的3 会通过组件拆分todolist <!DOCTYPE html> <html lang="en"&g ...
- vue 父子组件 基础应用scrollball v-model sync
# 组件之间通信 可以通过 v-model 子组件可以通过 改变数据来改变父组件的数组 * v-model 子组件需要接受value属性,需要出发this.$emit("input&qu ...
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
- Vue.js-09：第九章 - 组件基础再探（data、props）
一.前言 在上一章的学习中,我们学习了 Vue 中组件的基础知识,知道了什么是组件,以及如何创建一个全局/局部组件.不知道你是否记得,在上一章中,我们提到组件是一个可以复用的 Vue 实例,它与 Vu ...
- Vue组件基础
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- Vue学习计划基础笔记(六) - 组件基础
组件基础 目标: 掌握组件的构建方式 掌握如何复用组件.父子组件如何传值.如何向父组件发送消息 掌握如何通过插槽分发内容 了解解析dom模板时的注意事项 了解动态组件 组件 组件理解起来大概上就和ph ...
- Vue学习计划基础笔记(五) - 表单输入绑定、组件基础
表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...
- Vue 组件基础完整示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- PHP中new static()与new self()的区别异同分析
本文实例讲述了PHP中new static()与new self()的区别异同,相信对于大家学习PHP程序设计能够带来一定的帮助. 问题的起因是本地搭建一个站.发现用PHP 5.2 搭建不起来,站PH ...
- Java全栈程序员之06：IDEA中MAVEN项目依赖及运行
MAVEN已经成为事实上的企业项目开发中的项目类型.无论是IDEA还是Eclipse,都已经默认支持创建MAVEN项目.严格意义上来说,MAVEN不是一种新的JavaEE项目类型.它凌驾于所以的项目类 ...
- Jquery如何获取某个元素前(后)的文本内容？
<span> text here... <a id="target_element">百万创想</a></span> 如何获得a标签 ...
- Spring Aop——给Advice传递参数
给Advice传递参数 Advice除了可以接收JoinPoint(非Around Advice)或ProceedingJoinPoint(Around Advice)参数外,还可以直接接收与切入点方 ...
- [转]Anatomy of a Program in Memory
Memory management is the heart of operating systems; it is crucial for both programming and system a ...
- Tomcat线程池的深入理解
1.工作机制: Tomcat启动时如果没有请求过来,那么线程数(都是指线程池的)为0: 一旦有请求,Tomcat会初始化minSpareThreads设置的线程数: 2.线程池作用: Tomcat的线 ...
- SQL Server 2016新特性：In-Memory OLTP
存储格式修改 在2014,2016中修改了内存优化表的存储格式,新的格式是序列的并且the database is restarted once during database recovery. ...
- ios 适配iOS11&iPhoneX的一些坑
前阵子项目开发忙成狗,就一直没做iOS11的适配,直到XcodeGM版发布后,我胸有成竹的在iPhoneX上跑起项目,整个人都凉透了...下面总结一下我遇到的坑,不是很全面,日后补充. 导航栏 导航栏 ...
- sqoop导入数据到hive中元数据问题
简单配置了sqoop之后开始使用,之前用的时候很好用,也不记得有没有启动hivemetastore,今天用的时候没有启动,结果导入数据时,如果使用了db.tablename,就会出现找不到数据库的错, ...
- rm -rf python 实现 v0.1
#coding=utf- import os def join(arr,join_falg): res = "" for a in arr: res += a+join_falg ...