Vue.js——6.创建组件
Vue组件
组件就是为了拆分Vue实例的代码量,能够不同的功能定义不同的组件
创建组件的方法
1.
// 创建组件
let com1=Vue.extend({
template:'<h1>hellow</h1>'//必须加标签名称
})
Vue.component('myCon1',com1)
引用 <my-con1></my-con1>
//或者不用驼峰
第二种
Vue.component('myCon1',{
template:'<h1>hellow</h1>'
})
第3种
Vue.component('myCon1',{
template:'#tmp1'
})
在app外面
<template id="tmp1">
<h1>hollow</h1>
</template>
Vue.js——6.创建组件的更多相关文章
- 转: Vue.js——60分钟组件快速入门(上篇)
转自: http://www.cnblogs.com/keepfool/p/5625583.html Vue.js——60分钟组件快速入门(上篇) 组件简介 组件系统是Vue.js其中一个重要的概 ...
- Vue.js学习 Item11 – 组件与组件间的通信
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...
- vue.js实例对象+组件树
vue的实例对象 首先用js的new关键字实例化一个vue el: vue组件或对象装载在页面的位置,可通过id或class或标签名 template: 装载的内容.HTML代码/包含指令或者其他组件 ...
- vue.js 精学组件记录
组件需要注册后才可以使用. Vue.component('my-component',{ template:'<div>这是组件内容</div>' }): 局部注册组件 var ...
- vue.js相关UI组件收集
内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 ###UI组件 element ★9689 - 饿了么出品的Vue2的web UI工具套件 Vux ★6927 - 基于Vu ...
- Vue.js的动态组件模板
组件并不总是具有相同的结构.有时需要管理许多不同的状态.异步执行此操作会很有帮助. 实例: 组件模板某些网页中用于多个位置,例如通知,注释和附件.让我们来一起看一下评论,看一下我表达的意思是什么.评论 ...
- Vue.js 的精髓——组件
开篇:Vue.js 的精髓——组件 写在前面 Vue.js,无疑是当下最火热的前端框架 Almost,而 Vue.js 最精髓的,正是它的组件与组件化.写一个 Vue 工程,也就是在写一个个的组件. ...
- Vue.js——60分钟组件快速入门(上篇)
组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML ...
- Vue.js——60分钟组件快速入门(下篇)
概述 上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:"嘿,老哥,我开 ...
随机推荐
- Linux netfliter 架构
netfliter 简介 netfilter是在Linux 2.4.X内核引入的一个子系统,它提供了一个抽象的.通用框架,这个框架提供了一整套的钩子函数的管理机制.包括钩子函数的原型定义,注册,注销等 ...
- python三大神器===》装饰器
1.认识装饰器 如果你经常看我的博客,你已经学会了python的前两大‘神器’(迭代器,生成器),那么什么是装饰器呢?就如字面意义装饰器是对某个事物(通常指函数)进行装饰,让其在不修改任何内部代码的情 ...
- 将git本地仓库同步到远程仓库
同步到远程仓库可以使用git bash 也可以使用tortoiseGit 1.使用git bash 在仓库的所在目录,点击右键选择“Git Bash Here”,启动git bash程序. 然后再gi ...
- 20200119日志 EPLAN高压房 VFD 单线图 心得
提纲: EPLAN 画单线图的方法,可以先绘制原理图,然后在一个柜子里面的器件 用方框圈起来.方框名称一样.注意 一个工程里面的器件编号是唯一的. 断路器选型. PT 手车 接地刀作用 具体内 ...
- 小程序之scroll-view用法 - 水平滚动
<scroll-view class="box" scroll-x="true" > <view class="box-item&q ...
- Spark tungsten 项目阅读笔记
Spark tungsten 项目阅读笔记 Spark tungsten 项目的宣言就是:Bringing Apache Spark closer Bare Metal. 我的理解就是不要让硬件成为S ...
- SQL 、LINQ日前比较
using Newtonsoft.Json; using Newtonsoft.Json.Linq; using System; using System.Collections.Generic; ...
- chrome浏览器安装vue调试器vue-devtools
chrome浏览器安装vue调试器vue-devtools https://blog.csdn.net/zhangjnwei/article/details/76693053
- python+selenium 发送邮件
import time from selenium import webdriver from selenium.webdriver import ChromeOptions from seleniu ...
- gdb 常用选项
gdb 常用选项 help:查看命令帮助,具体命令查询在gdb中输入help + 命令,简写h run:重新开始运行文件(run-text:加载文本文件,run-bin:加载二进制文件),简写r st ...