浅谈Vue下的components模板
浅谈Vue下的components模板
在我们越来越深入Vue时,我们会发现我们对HTML代码的工程量会越来越少,今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用
我们先来简单的写一段components代码
(局部方法创造模板)
<div id="app">
<haha></haha>
</div> /*
这是最简单常用的一种创造模板方法,局部方法创造模板
要注意,局部模板 的作用范围 只在 相对的vue对象 范围内
比如 这个例子, <haha></haha>的范围 只在 <div id="app"> </div>内
因为 haha 挂载在 vm的components下 而 vm挂载的 对应节点是 id=app的 div上 */
let vm = new Vue({
el:"#app",
data:{
},
components:{
"haha":{
template:"<div>哈哈哈<div>"
}
}
});
(共有模板/全局模板),全局模板 顾名思义 肯定是 放在哪里都能用
<div id="app">
<hehe></hehe>
</div> //这里使用Vue.component原型方法来创造
Vue.component(
"hehe",template:"<div>呵呵呵<div>"
); let vm = new Vue({
el:"#app",
data:{
},
components:{
//这里则不需要添加,因为 互不影响
}
});
其他方法:
<div id="app">
<xixi></xixi>
</div> let xixi={
template:"<div>嘻嘻嘻<div>"
} let vm = new Vue({
el : "#app",
data{
},
components:{
xixi
} });
(模板的继承),全局模板 顾名思义 肯定是 放在哪里都能用
/*
我们来讲个最简单的 父亲,儿子 ,孙子的 例子
要注意以下几点:
1.先实例化对象vm
2.造出parent模板,并挂载在 vm的 conponents 下
3.造出 son 模板 并 挂载 在 父级 parent 的conponents下,并在 父级template属性中 包裹住自己的 模板名标签 ;同理 造出孙子标签
4.在HTML节点中添加 目标 根节点
(节点的顺序一定要书写正确)
*/
<div id="app">
<parent></parent>
</div> //创建 孙子 模板
let grendson = {
template:"<div>孙子</div>"
} //创建 儿子 模板
let son= {
template:"<son>儿子<grendson >孙子</grendson ></son>"
components:{
grendson
}
} //创建 父亲 模板
let parent = {
template:"<div>父亲<son></son></div>"
components:{
son
}
}
//实例化vm对象
let vm = new Vue({
el:"#app",
data:{
},
components:{
parent
}
});
相信很多人在刚接触前端或者中期时候总会遇到一些问题及瓶颈期,如学了一段时间没有方向感或者坚持不下去一个人学习枯燥乏味有问题也不知道怎么解决,对此我整理了一些资料 喜欢我的文章想与更多资深大牛一起讨论和学习的话 欢迎加入我的学习交流群907694362
浅谈Vue下的components模板的更多相关文章
- 【Vue】浅谈Vue(一):从模板语法数据绑定、指令到计算属性
写在前面 今年前端届比较有意思,从大漠穷秋发表文章比较angular和vue,继而致歉vue作者.社区,从谷歌辞去Angular Developer PM in China一职并且呼吁大家停止各种无谓 ...
- 浅谈Vue不同场景下组件间的数据交流
浅谈Vue不同场景下组件间的数据“交流” Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...
- 【Vue】浅谈Vue不同场景下组件间的数据交流
浅谈Vue不同场景下组件间的数据“交流” Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...
- 浅谈Vue.js
作为一名Vue.js的忠实用户,我想有必要写点文章来歌颂这一门美好的语言了,我给它的总体评价是“简单却不失优雅,小巧而不乏大匠”,下面将围绕这句话给大家介绍Vue.js,希望能够激发你对Vue.js的 ...
- [原创]浅谈NT下Ring3无驱进入Ring0的方法
原文链接:浅谈NT下Ring3无驱进入Ring0的方法 (测试环境:Windows 2000 SP4,Windows XP SP2.Windows 2003 未测试) 在NT下无驱进入Ring0是一个 ...
- 浅谈 IE下innerHTML导致的问题
原文:浅谈 IE下innerHTML导致的问题 先来看个demo吧: <!DOCTYPE html> <html> <head> <meta charset= ...
- []转帖] 浅谈Linux下的五种I/O模型
浅谈Linux下的五种I/O模型 https://www.cnblogs.com/chy2055/p/5220793.html 一.关于I/O模型的引出 我们都知道,为了OS的安全性等的考虑,进程是 ...
- 浅谈Vue响应式(数组变异方法)
很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用 ...
- 浅谈Linux下/etc/passwd文件
浅谈Linux 下/etc/passwd文件 看过了很多渗透测试的文章,发现在很多文章中都会有/etc/passwd这个文件,那么,这个文件中到底有些什么内容呢?下面我们来详细的介绍一下. 在Linu ...
随机推荐
- c++ LeetCode (网易面试题和链表以及树篇) 五道算法例题代码详解(三)
原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/11209807.html 一.1道网易c++的面试题 我当时第一时间的解答方案 #include ...
- arcgis api 4.x for js 图层拓展篇之mapvLayer(附源码下载)
因为在项目开发过程中,使用的arcgis js api版本是4.7,并不能支持客户端渲染热力图,想到arcgis js api 4.x的渲染是基于canvas,故琢磨着是否能借助类似于mapV.ech ...
- iOS引导页(镂空效果)
推荐使用SDK:pod 'EAFeatureGuideView' 温馨提示:(引导的图片图标需要私人订制的可以用自己的,让UI提供) 参考链接:https://www.jianshu.com/p/c9 ...
- 【React Native】进阶指南之一(特定平台、图片加载、动画使用)
一.特定平台代码 React Native提供了两种方法来区分平台: 使用Platform模块: 使用特定平台扩展名: 1.Platform模块 React Native提供了一个检测当前运行平台的模 ...
- Thymeleaf常用语法:条件判断 if、switch case
if语句条件判断使用th:if,它会判断表达式是否成立,表达式的结果支持boolean.number.character.String及其他类型.满足下面情况,if语句成立:(1) 表达式的结果是数字 ...
- 程序运行时间测试 - 使用系统函数 getrusage 获取程序运行时间
https://github.com/yaowenxu/Workplace/blob/master/timer/getrusagetimer.c 关键结构体: struct rusage { stru ...
- 2. Linux-3.14.12内存管理笔记【系统启动阶段的memblock算法(2)】
memory:表示可用可分配的内存: 结束完memblock算法初始化前的准备工作,回到memblock算法初始化及其算法实现上面.memblock是一个很简单的算法. memblock算法的实现是, ...
- 阿里云ubuntu 16.04 搭建pptpd 第二版
前言:1.我常用的服务器在国内,但我又有某方面的需求,所以想要搭建一个pptpd的服务器 2.但我又不常用,所以感觉阿里云包年包月的不划算,所以准备采用阿里云按量付费的实例来搭建pptpd,并形 ...
- CodeForces - 722C(思维+倒着并查集)
题意 https://vjudge.net/problem/CodeForces-722C 给你一个由n个非负整数组成的数列 a1 ,a2 ,...,an . 你将要一个一个摧毁这个数列中的数. ...
- 9. Vue - vue-cli
一.前端开发工具 1. Node.js Node.js是一个基于Chrome v8引擎的JavaScript运行环境.JavaScript本来只能跑在浏览器上,然后Node.js就是一种能让js直 ...