Vue 组件基础完整示例
<!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">
<title>组件基础</title>
</head>
<body>
<div id="app">
<my-father></my-father>
</div> <template id="son">
<div>
<h1>my-son</h1>
<h3>{{ title }}</h3>
<button @click="test">test $emit()</button>
</div>
</template>
<template id="father">
<div>
<h1>my-father</h1>
<!-- 监听子组件发射的 test 事件 -->
<my-son title="test props" @test="test"></my-son>
</div>
</template> <script src="https://vuejs.org/js/vue.js"></script>
<script> // 一 、新建组件
// 使用组件的第一步就是新建组件
// 全局组件 ：使用 Vue.component() 新建的组件是全局组件
// 局部组件 ：使用 components 属性挂载子组件
// Vue.extend() ：可以新建一个组件对象 // 二 、组件的复用
// 组件的 data 必须是一个函数
// 因为组件复用时使用的是同一个组件实例 ，如果 data 作为一个引用类型的值的话 ，所有的组件将引用同一个 data // 三 、props 自定义组件特性
// props 属性可以为组件自定义特性
// 当一个值传递给一个 prop 特性的时候 ，它就会变成组件实例的一个属性 // 四 、根元素
// 每个组件只能拥有一个根元素 // 五 、监听子组件事件
// 组件可以使用 $emit() 方法发射一个事件 ，然后在父组件中监听这个事件 // 六 、组件名大小写
// 定义组件名的方式有两种
// 使用 kebab-case ：Vue.component('my-component-name', { /* ... */ })
// 使用 PascalCase ：Vue.component('MyComponentName', { /* ... */ })
// 不管组件名使用的是 kebab-case 还是 PascalCase ，对应的标签名都是 <my-component-name> // 第一步 ：新建一个 my-son 组件对象
let MySon = Vue.extend({
template: '#son',
// 第四步 ：自定义组件特性
// 使用子组件的时候就可以使用 v-bind 为特性设置值了
props: ['title'],
methods: {
test(){
// 发射一个 test 事件
this.$emit('test')
}
}
}) // 第二步 ：新建一个 my-father 全局组件
Vue.component('my-father', {
template: '#father',
// 第三步 ：使用 components 属性挂载子组件
components: {
MySon
},
methods: {
test(){
alert('说点什么好呢...')
}
}
}) // 第三步 ：定义根组件
new Vue({ }).$mount('#app') </script> </body>
</html>
Vue 组件基础完整示例的更多相关文章
- Vue 组件基础完整示例2
简介此页面可以直接复制运行,包含以下应用: Vue slot插槽使用Vue v-model使用Vue props使用父子组件数据传递element-ui使用HTML方式注册子组件,可以将子组件数据写在 ...
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
- Vue组件基础
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- vue组件基础之父子传值
可以看出数据从后端获取过来,最外层的父组件接收数据,子组件不能直接获取,必须由父组件传递,此时使用props,并且父组件的值更新后,子组件的值也会随之更新,但是反过来通过修改子组件props来影响父组 ...
- Vue.js 学习笔记之四：Vue 组件基础
到目前为止,这个系列的笔记所展示的都是一些极为简单的单页面 Web 应用程序,并且页面上通常只有几个简单的交互元素.但在实际生产环境中,Web 应用程序的用户界面往往是由多个复杂的页面共同组成的.这时 ...
- vue组件基础之创建与使用
一.创建组件 <script src="vue.js"></script> <!--引入vue.js文件--> <div id=" ...
- Vue组件基础知识总结
组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树. 那么什么是组件呢?组件可以扩展HTML元素,封装 ...
- vue—组件基础了解
什么是组件? 组件是vue中的一个可复用实例,所以new Vue()是vue中最大的那个组件,根组件,有名字,使用的时候以单标签或双标签使用 vm = newVue() 是最大的组件,具有很多实用性的 ...
- Vue组件的基础用法（火柴）
前面的话 组件(component)是Vue最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码,根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己的需要,使用 ...
随机推荐
- MySQL安装到最后一步未响应MySQL Server Instance Configuration Wizard
MySQL安装到最后一步未响应 第一个方法: 打开C盘,并且显示隐藏文件,然后在C盘下就能找到一个文件夹叫 "ProgamData" ,打开它,删除里面的 "mys ...
- Java集合--ArrayList出现同步问题的原因
1 fail-fast简介 fail-fast 机制是java集合(Collection)中的一种错误机制.当多个线程对同一个集合的内容进行操作时,就可能会产生fail-fast事件.例如:当某一个线 ...
- 2019牛客暑期多校训练营（第七场）D Number——实系数多项式因式分解定理
前置知识 代数基本定理 定理:每个次数 ≥ 1 复系数多项式在复数域中至少有一个跟. 由此推出,n次复系数多项式方程在复数域内有且只有n个根(重根按重数计算).(只要不断把多项式除以(x-xa),即可 ...
- vmware 安装centos7 阿里云镜像 虚拟机
一.资源准备: 1.vmware软件下载: 百度自行下载安装 2.阿里云镜像地址:https://opsx.alibaba.com/mirror 1).镜像下载步骤: 点击计入centos: 这里直接 ...
- PHP mysqli_data_seek() 函数
mysqli_data_seek() 函数调整结果指针到结果集中的一个任意行. // 假定数据库用户名:root,密码:123456,数据库:RUNOOB $con=mysqli_connect(&q ...
- 富文本编辑器复制word
这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用 后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下) ...
- BZOJ3791 作业 动态规划
你发现染 $k$ 次最多会将这个序列分成 $2k-1$ 段,然后任何 $2k-1$ 段以内的方案一定能被构建出来,所以直接 dp 就好了 #include <bits/stdc++.h> ...
- 威尔逊定理x
威尔逊定理 在初等数论中,威尔逊定理给出了判定一个自然数是否为素数的充分必要条件.即:当且仅当p为素数时:( p -1 )! ≡ -1 ( mod p ),但是由于阶乘是呈爆炸增长的,其结论对于实际操 ...
- Java面向对象2（G~J）
G 织女的红线(SDUT 2240) import java.util.Scanner; import java.text.DecimalFormat; class Sum { double x ...
- pytest学习笔记（一）
这两天在学习pytest,之前有小用到pytest,觉得这个测试框架很灵巧,用在实现接口自动化(pytest+requests)非常的轻便,然后很有兴致的决定学习下,然后又发现了pytest-sele ...