vue - 组件的创建
组件的创建
vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来。组件的使用更使我们的项目解耦合。更加符合vue的设计思想MVVM。
那接下来就跟我看一下如何在一个Vue实例中使用组件吧!
这里有一个Vue组件的示例:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body> <div id="app">
<Vheader></Vheader>
<Vheader></Vheader>
</div> <script type="text/javascript" src='./vue.js'></script>
<script type="text/javascript">
//组件的创建
Vue.component('Vheader',{
data:function(){
return {
// 必须要return
}
},
template:`<div class="header">
<div class="w">
<div class="w-l">
<img src="./logo.png"/>
</div>
<div class="w-r">
<button>登录</button><button>注册</button> </div>
</div>
</div>`
}) var app = new Vue({
el:"#app",
data:{ },
computed:{ },
method:{ }, }) </script> </body>
</html>
官网:
https://cn.vuejs.org/v2/guide/components-registration.html
vue - 组件的创建的更多相关文章
- Vue组件component创建及使用
组件化与模块化的区别 什么是组件:组件的出现,就是为了拆分Vue实例的代码量,能够让我们以不同的组件,来划分不同的功能模块 ,将来我们需要什么功能,就可以去调用对应的组件即可 组件化与模块化的不同: ...
- [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick
思路: 1. 组件的好处,重用性 2. 组件对的slot用法 3. 子如何调用父的数据 4. 子如何触发父的方法执行 5. 父如何触发子的方法执行 6. 如何创建组件和销毁自建--如何缓存避免每次切换 ...
- [vue]webpack&vue组件工程化实践
[vue]全局组件和局部组件(嵌套+props引用父组件数据) [vue]组件篇 [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick [vue] ...
- [vue]组件最佳实战
[vue]全局组件和局部组件(嵌套+props引用父组件数据) [vue]组件篇 [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick [vue] ...
- vue组件创建的三种方式
1.使用Vue.extend创建全局的Vue组件 //1.1 使用vue.extend创建组件 var com1 = Vue.extend({ //通过template属性指定组件要展示的html结构 ...
- vue组件创建学习总结
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue系列之 => vue组件创建
创建方式 一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- vue 组件创建与销毁
vue 组件(如对话框组件)实时创建与销毁: 使用v-if <search-history :show="showSearchHistory" @close="sh ...
- vue基础:组件的创建方式和组件的data值
vue组件是什么: 组件是可复用的 Vue 实例,组件可以进行任意次数的复用 vue组件创建方式有3种: //第一种创建组件的方式// Vue.extend创建全局组件var com1 = Vue.e ...
随机推荐
- MySQL开发面试题
……继上一篇MySQL的开发总结之后,适当的练习还是很有必要的…… SQL语法多变,不敢保证唯一,也不敢保证全对,如果错误欢迎指出,即刻修改. 一.现有表结构如下图 TABLENAME:afinfo ...
- 用c语言如何在数字前自动补0
一: #include <stdio.h>int main(){ long a=3,b=4,c=15; printf("......."a,b,c);return 0; ...
- 用Eclipse平台进行C/C++开发
我们将概述如何在 C/C++ 开发项目中使用 Eclipse 平台.尽管 Eclipse 主要是一个 Java 开发环境,但其体系结构确保了对其它编程语言的支持.在本文中,您将学习如何使用 C/C++ ...
- CSS技巧:逐帧动画抖动解决方案
笔者所在的前端团队主要从事移动端的H5页面开发,而团队使用的适配方案是: viewport units + rem.具体可以参见凹凸实验室的文章 – 利用视口单位实现适配布局 . 笔者目前(2017. ...
- Android studio 插件安装
安装插件步骤 一 CodeGlance 最大的用途:可用于快速定位代码.显示在右侧 二 Android Studio Prettify 可以将代码中的字符串写在string.xml文件中 选中字符串鼠 ...
- MyBatis学习之SpringMvc和MyBatis整合
1. 整合流程 Dao层: 1. SqlMapConfig.xml,空文件即可,需要文件头. 2. applicationContext-dao.xml. a) 数据库连接池 b) SqlSessio ...
- sencha touch 自定义cardpanel控件 模仿改进NavigationView 灵活添加按钮组,导航栏,自由隐藏返回按钮(废弃 仅参考)
最新版本我将会放在:http://www.cnblogs.com/mlzs/p/3382229.html这里的示例里面,这里不会再做更新 代码: /* *模仿且改进NavigationView *返回 ...
- CSS 让 fontawesome 图标字体变细
一句 CSS 让 fontawesome 图标字体变细 自从 iOS 某个版本发布之后,前端的流行趋势是什么都越来越细…字体越来越细…图标线条也越来越细.而老物 fontawesome 粗壮的线条风格 ...
- elk单台环境搭建
一.简介1.核心组成ELK由Elasticsearch.Logstash和Kibana三部分组件组成:Elasticsearch是个开源分布式搜索引擎,它的特点有:分布式,零配置,自动发现,索引自动分 ...
- Node.js 文件系统fs模块
Node.js 文件系统封装在 fs 模块是中,它提供了文件的读取.写入.更名.删除.遍历目录.链接等POSIX 文件系统操作. 与其他模块不同的是,fs 模块中所有的操作都提供了异步的和 同步的两个 ...