Vue--公有组件以及组件的使用和特点
组件的作用：为了能够让功能与功能之间互不影响，使代码更加清晰整洁 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">
<title>Document</title>
<script src="../vue2.4.4.js"></script>
</head> <body>
<!-- 定义一个vue的管理区块，（MVVM中的View） -->
<div id="app">
<!-- <login></login> --> <template id="tlogin">
<div>
用户名: <input type="text">
密码： <input type="text">
</div>
</template> <!--<script type="x-template" id="tlogin">
<div>
用户名: <input type="text">
密a码： <input type="text">
</div>
</script>-->
</div> </body> <script>
//公有组件
//注意:
// 1.所有的模板代码都必须要有一个根标签
// 2.如果组件的名称如果首字母大写
// a.所有的字母全部小写
// b.如果首字母和内部如果也有大写将大写字母改为小写并且在这个字母之前加上一个"-"
//UserName -> user-name // 1.0将组件的定义与组成分两步来执行
// 定义：
// Vue.extend({
// template:"组件的html代码"
// });
/*var login = Vue.extend({
template:"<h1>我是login</h1>"
});
// 注册：
// 参数一： 当前组成组件的名称
// 参数二： 组件对象
//Vue.component("login",login); // 向Vue中注册组件
Vue.component("login",login);
*/ //2.0组件的定义和组成一步到位
// 使用组件时候，一定要给组件一定要加上根标签 否则会报编译错误
/*Vue.component("login",{
template:"<h1>login</h1>"
});*/ // 以上两种写template麻烦
//3.0组件的使用三 （！！！常用）
Vue.component("login",{
template:"#tlogin"
});
//4.0 组件的使用四（了解即可）
// Vue.component("login",{
// template:"#tlogin"
// }); // 实例化vue对象（MVVM中的View Model）
new Vue({
// vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
el:'#app',
data:{
// 数据 （MVVM中的Model）
},
methods:{ }
})
</script>
</html>
Vue--公有组件以及组件的使用和特点的更多相关文章
- Vue.js——60分钟组件快速入门（上篇）
组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML ...
- Vue.js——60分钟组件快速入门（下篇）
概述 上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:"嘿,老哥,我开 ...
- 转： 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实现简单表格组件
本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解 ...
- vue.js2.0 自定义组件初体验
理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...
- 浅谈Vue不同场景下组件间的数据交流
浅谈Vue不同场景下组件间的数据“交流” Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...
- vue.js学习之组件（下篇）
本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- vue.js实例对象+组件树
vue的实例对象 首先用js的new关键字实例化一个vue el: vue组件或对象装载在页面的位置,可通过id或class或标签名 template: 装载的内容.HTML代码/包含指令或者其他组件 ...
随机推荐
- 模板——Treap
不得不说平衡树博大精深,除了Treap,还有splay,非旋Treap和可持久化数据结构,今天先讲讲Treap,也很感谢这位大佬的博客给予我帮助:http://www.360doc.com/conte ...
- SpringIOC注入模块中xml文件导入其他xml文件配置
如果我们在spring框架中配置了多个xml文件,我们可以在读取配置文件的时候把这些xml文件一下全都读取 也可以只读一个总的xml文件,在这个总的xml文件中把其他的xml全都都导入进来. 例如: ...
- 如何 在 jQuery 中的 $.each 循环中使用 break 和 continue
jQuery中each类似于javascript的for循环 但不同于for循环的是在each里面不能使用break结束循环,也不能使用continue来结束本次循环,想要实现类似的功能就只能用ret ...
- [转]WPF--模板选择
典型的,把模板关联到一块特定的数据上,不过通常希望动态的确定使用哪个模板---既可以基于一个属性值,也可以是一个全局状态.当真正需要大规模替换模板时,也可以使用DataTemplateSelector ...
- AppServer获取参数的方法
AppServer中从APP_PARAM表中根据param_code获取param_value: appManageService.getParamValueByCode(param_code) -- ...
- 阿里云HBase Ganos全新升级，推空间、时空、遥感一体化基础云服务
1.HBase Ganos是什么 Ganos是阿里云时空PaaS服务的自研核心引擎.Ganos已作为云数据库时空引擎与数据库平台融合,建立了以自研云原生数据库POALRDB为基础,联合NoSQL大数据 ...
- final,finally和finalize之间的区别
(1)final用于声明属性,方法和类,分别表示属性不可变,方法不可覆盖,类不可继承.内部类要访问局部变量,局部变量必须定义成final类型,比如一段代码 (2)finally是异常处理语句结构的一部 ...
- PAT甲级——A1028 List Sorting
Excel can sort records according to any column. Now you are supposed to imitate this function. Input ...
- MySql存储过程批量删除多个数据库中同名表中的指定字段
1. 创建存储过程batchDeleteField:删除所有名称为"MyDB_"开头的数据库中的指定字段 -- ---------------------------- -- Pr ...
- mongodb+nodejs 增删查的demo
1.启动数据库 启动完成后显示 端口号是27017 2.创建数据库 创建一个名为mydb的数据库 3.先查询一下当然的用户,再新增一个 4.创建数据表,查询所有的表 db.createCollec ...