Vue.js的组件(slot/动态组件等)、单文件组件、递归组件使用
一、组件
1> 组件命名方式有两种(注意:在DOM模板中只有kebab-case命名方法才生效):
html中引用组件:
<!-- 在DOM模板中,只有 kebab-case命名才生效 -->
<my-component-name></my-component-name> script:
Vue.component('my-component-name',{
template:'<div>这是第一种命名方式:kebab-case</div>'
/* ... */
}) html中引用组件:
<my-component-name></my-component-name> script:
/* 根据大写字母隔开,my-component-name */
Vue.component('MyComponentName',{
template:'<div>这是第二种命名方式:PascalCase</div>'
/* ... */
})
2> 全局组件与局部组件:
/*
* 全局组件可以在根组件的任何子组件中使用
*/
Vue.component('component-a',{/* ...组件相关配置... */})
/*
* 局部组件只能在当前注册的组件实例中生效,在其子组件中也不生效
*/
var componentb = { /* ...组件相关配置... */ }
var vm = new Vue({
el:'#app',
'component-b':componentb /* 局部注册组件 */
})
3> 动态组件(component)
4> 插槽(slot)
二、单文件组件
1> 组成:单文件组件有 模板(<template></template>)、脚本(<script></script>) 与 样式(<style><style>) 组成
<!-- 这是一个单文件组件 -->
<template>
<div>模板中只允许一个根元素,可以在这个根元素中进行编写DOM结构</div>
</template> <script>
/* export default:默认导出对象;在这里进行vue的相关选项配置与逻辑编写 */
export default{
name: 'App'
}
</script> /*
* scoped:表示样式代码只在该组件中生效
* lang='stylus':表示样式使用stylus格式进行编写css
*/
<style lang='stylus' scoped>
/* >>> 3个箭头表示修改外部样式(.样式2) */
.样式1 >>> .样式2
background:red
</style>
2> 单文件组件的注册(局部注册):
<template>
<div>
<!-- 引入组件 -->
<test-component> </test-component>
</div>
</template> <script>
import TestComponent from '需要引入的组件路径'
export default{
name: 'App',
components : {
TestComponent /* 与写法 TestComponent:TestComponent 一致,es6新特性 */
}
}
</script> <style lang='stylus' scoped> </style>
三、递归组件
Vue.js的组件(slot/动态组件等)、单文件组件、递归组件使用的更多相关文章
- vue.js中的slot
vue.js 中的 slot 一.slot 的作用 调用组件的时候,对于数据,我们会用props将数据从父组件传至子组件.但是,如果从父组件到子组件,单纯是页面局部渲染的改变,slot会更合适. 二. ...
- Vue.js 作用域、slot用法(单个slot、具名slot)
作用域 在介绍slot前,需要先知道一个概念:编译的作用域.比如父组件中有如下模板: <child-component> {{message}} <child-component&g ...
- vue单文件组件实例1:简单单文件组件
HelloWorld.vue: <template> <div class="hello"> <h1>{{msg}}</h1> ...
- vue.js 利用SocketCluster实现动态添加数据及排序
直接上代码 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- Vue.js 学习笔记 第6章 表单与v-model
本篇目录: 6.1 基本用法 6.2 绑定值 6.3 修饰符 表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model完成表单的数据双向绑定. 6.1 基本用法 表单控件在实际业 ...
- vue单文件组件实例2:简单单文件组件
Introduce.vue: <template> <div class="intro"> 单位介绍 </div> </templat ...
- js与jquery的动态加载脚本文件
jquery动态加载 jQuery.getScript(url,[callback]) js动态加载 function loadJs(name) { document.write('<scrip ...
- Vue.js学习笔记 第七篇 表单控件绑定
本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...
- vue.js之组件(上篇)
本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...
随机推荐
- 【剑指Offer】左旋转字符串 解题报告(Python)
[剑指Offer]左旋转字符串 解题报告(Python) 标签(空格分隔): 剑指Offer 题目地址:https://www.nowcoder.com/ta/coding-interviews 题目 ...
- 1120 机器人走方格 V3
1120 机器人走方格 V3 基准时间限制:1 秒 空间限制:131072 KB N * N的方格,从左上到右下画一条线.一个机器人从左上走到右下,只能向右或向下走.并要求只能在这条线的上面或下面走, ...
- Manthan, Codefest 16 D. Fibonacci-ish
D. Fibonacci-ish time limit per test 3 seconds memory limit per test 512 megabytes input standard in ...
- STC8A,STC8G,STC8H系列的IRC内部振荡源频率调节
从STC15开始, 宏晶就在内置RC震荡源(内置时脉, 宏晶称之为IRC)这条路上越走越远. STC15这一代仅仅是"有", 精度和漂移差强人意. 从STC8开始对IRC的调节就越 ...
- 精通 MySQL 索引
索引概念: 概念:索引是提高mysql查询效率的数据结构.总的一句话概括就是索引是一种提高查询效率的数据结构. 数据库查询是数据库的最主要功能之一.设计者们都希望查询数据的速度能尽可能的快,因此数据库 ...
- 【感悟】观《BBC彩色二战纪录片》有感
2020年7月2日到3日我看了纪录片,以下是我的一些感悟 1.作为进攻者,无论大事还是小事都需要一鼓作气做完,以免留给对手喘息的机会.(指:未消灭) 2.作为防守者,要有顽强抵抗的精神,但要保留撤退的 ...
- 第三十七个知识点: The Number Field Sieve
第三十七个知识点: The Number Field Sieve 数域筛法(The Number Field Sieve ,NFS)是已知的分解算法中最有效率的.它的运行时间取决于被分解的数的大小而不 ...
- Kronecker Products and Stack Operator
目录 定义 Stack Operator Kronecker Product 性质 Stack Operator Kronecker Product 半线性 Whitcomb L. Notes on ...
- ssm项目使用过滤器出现4040错误
目录 问题 解决方法 (1)方法一 (2)方法二 问题 过滤器处理乱码问题 public class CharFilter implements Filter { @Override public v ...
- Nginx高并发简单配置
https://www.cnblogs.com/sunjianguo/p/8298283.html 停用除SSH外的所有服务,仅保留nginx,优化思路主要包括两个层面:系统层面+nginx层面. 1 ...