浅析Vue下的components模板使用及应用

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

在我们越来越深入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
}
});

总结

以上所述是小编给大家介绍的Vue下的components模板使用及应用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • Vue.js的动态组件模板的实现

    组件并不总是具有相同的结构.有时需要管理许多不同的状态.异步执行此操作会很有帮助. 实例: 组件模板某些网页中用于多个位置,例如通知,注释和附件.让我们来一起看一下评论,看一下我表达的意思是什么. 评论现在不再仅仅是简单的文本字段.您希望能够发布链接,上传图像,集成视频等等.必须在此注释中呈现所有这些完全不同的元素.如果你试图在一个组件内执行此操作,它很快就会变得非常混乱. 处理方式 我们该如何处理这个问题?可能大多数人会先检查所有情况,然后在此之后加载特定组件.像这样的东西: <templat

  • vue-cli的webpack模板项目配置文件分析

    由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和config里面一些相关的配置,所以刚好趁此机会将所有配置文件看一遍,理一理思路,也便于以后修改配置的时候不会"太折腾". 一.文件结构 本文主要分析开发(dev)和构建(build)两个过程涉及到的文件,故下面文件结构仅列出相应的内容. ├─build │ ├─build.js │ ├─check-versions.js │ ├─dev-client.js │ ├─dev-ser

  • vue模板语法-插值详解

    1.文本 数据绑定最常见的形式就是使用'Mustache'语法(双打括号)的文本插值: <span>message:{{msg}}</span> 使用v-once指令,也能执行一次性的插值,当主句改变时,插值处的内容不会更新. 但请留心这回影响到该节点上所有的数据绑定: <span v-once>this will nver change:{{message}}</span> 2.纯html 双打括号会将数据解释为纯文本,而非html.为了输出html可以使

  • 简单的vue-resourse获取json并应用到模板示例

    不说废话上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue js</title> <style> .completed { text-decoration: line-through; } .something { color: red; } </style> <

  • 简单谈谈Vue 模板各类数据绑定

    『天下武功,唯快不破』√,这一直是对武学造诣方面的追捧,虽然对于这个丝毫不会:更是对待现实工作不懈渴求,乃至苛求.因为这已不是遁隐修行,而是职场卖命,唯有先快速解决需求,方能攫取更为充盈的时间去深究技术机理,以使臻于更强,更强而优于快,如此优良循环得以形成.言归正传,作为前端ER,一度觉得,这 Vue 的诞生,好比一柄倚天利器,其易上手,写以及运行也都很高效,十分让人爱不释手:但这易上手,倒不等于容易精通,蛮多东西都需悉心学习.练习.理解,才能运用自如. 在使用 Vue 开发过程中,那基于 Do

  • 详解Vue 动态添加模板的几种方法

    以下方法只适用于 Vue1.0 版本,推荐系数由高到低排列. 通常我们会在组件里的 template 属性定义模板,或者是在 *.vue 文件里的 template 标签里写模板.但是有时候会需要动态生成模板的需求,例如让用户自定义组件模板,或者设置组件的布局. 例如要做一个类 select 的组件,用户传入 options 数据,通过 value prop 获取选中值,最基本的原型如下. Vue.component('XSelect', { template: ` <div class="

  • Vue 动态组件components和v-once指令的实现

    一.实现两个组件间互相展示.互相隐藏 <!DOCTYPE html> <html> <head> <title>动态组件</title> <script type="text/javascript" src="./vue-dev.js"></script> </head> <body> <div id="app"> <ch

  • Vue Components 数字键盘的实现

    本文介绍了Vue Components 数字键盘的实现,分享给大家,具体如下: 项目地址 点击查看 项目演示 点击查看 首先监听所有的input,有input聚焦时调起数字键盘,通过getBoundingClientRect判断input位置让数字键盘在input附近,失去焦点后则隐藏数字键盘 let inputElement = document.getElementsByTagName("input"); [...inputElement].forEach(ipele =>

  • 浅析Vue下的components模板使用及应用

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析. 在我们越来越深入Vue时,我们会发现我们对HTML代码的工程量会越来越少,今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用 我们先来简单的写一段components代码 (局部方法创造模板) <div id="app"> <haha&

  • 深入浅析Vue 中 ref 的使用

    深入浅析Vue 中 ref 的使用

    官网上的说明 一.前言# 在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取到的 DOM 元素进行操作.但是,当我们开始在前端项目中使用 Vue 这类的 MVVM 框架之后,对于 DOM 的操作我们就应当完全的交给框架,而我们只需要关注于数据.难道,在 Vue 中就不能手动获取到页面上的 DOM 元素了吗,答案当然是可以手动获取到 DOM 元素的,在 Vue

  • 用Vue.js方法创建模板并使用多个模板合成

    在vue.js定义模板时,可以定义多个模板,然后在components组件中调用模板,显示在界面上,注意components后面是一个对象,而不是数组.下面利用实例说明,操作如下: 第一步,在HBuilderX设计工具中,在指定的文件目录下新建一个静态页面,并引入vue.js核心文件,如下图所示: 第二步,在<body></body>标签内,插入一个div标签,并设置对应的ID属性,如下图所示: 第三步,接着在div标签中插入一个script标签,定义三个模板User.Studen

  • 浅析Vue 中的 render 函数

    render函数是什么 简单的说,在vue中我们使用模板HTML语法组建页面的,使用render函数我们可以用js语言来构建DOM 因为vue是虚拟DOM,所以在拿到template模板时也要转译成VNode的函数,而用render函数构建DOM,vue就免去了转译的过程. 当使用render函数描述虚拟DOM时,vue提供一个函数,这个函数是就构建虚拟DOM所需要的工具.官网上给他起了个名字叫createElement.还有约定的简写叫h, vm中有一个方法_c,也是这个函数的别名 先看官网对

  • 浅析vue cli3 封装Svgicon组件正确姿势(推荐)

    vue cli3 手把手教学封装Svgicon组件 第一步:在src文件下新建一个放置svg文件的文件夹 第二步:在components文件下新建一个Svg组件 这是一个 文件夹 专门用来存放项目里面需要使用的svg文件,比如 a.svg b.svg - svg组件源码 <template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconNam

  • 浅析 Vue 3.0 的组装式 API（一）

    (一)响应式数据 1. 简单例子 从最简单的数据绑定开始,在 Vue 2.0 中,我们这样将一个数据绑定到模板的指定位置: 在组件创建参数的 data 构造函数中返回一个用来绑定的数据对象,其中有个 now 字段,会被渲染到模板内的 .app > p 内. <template> <div class="app"> <h1>Hello world!</h1> <p>Now is: {{now.toString()}}<

  • vue下拉刷新组件的开发及slot的使用详解

    "下拉刷新"和"上滑加载更多"功能在前端.尤其是移动端项目中非常重要,这里笔者由曾经做过的vue项目中的"blink"功能和各位探讨下[下拉刷新]组件的开发: 正式开篇 在前端项目的 components 文件夹下新建 pullRefreshView 文件夹,在其中新建组件 index.vue:(它代表"整个屏幕",通过slot插入页面其他内容而不是传统的设置遮罩层触发下拉刷新) 首先需要编写下拉刷新组件的 template,

  • 浅析VUE防抖与节流

    浅析VUE防抖与节流

    防抖和节流到底是啥 函数防抖(debounce) 解释:当持续触发某事件时,一定时间间隔内没有再触发事件时,事件处理函数才会执行一次,如果设定的时间间隔到来之前,又一次触发了事件,就重新开始延时. 案例:持续触发scroll事件时,并不立即执行handle函数,当1000毫秒内没有触发scroll事件时,才会延时触发一次handle函数. function debounce(fn, wait) { let timeout = null return function() { if(timeout

  • 浅析vue component 组件使用

    component 使用 component的注册 1.全局注册 使用用Vue.component('componentName',{template:'<div class="tem1">hello world</div>'})在初始化实例之前. componentName自定义名称 在实例声明的作用域下中使用<componentName></componentName> 成功渲染效果就是 '<div class="te

  • Vue下的国际化处理方法

    1:首先安装 Vue-i8n npm install vue-i18n --save 注:-save-dev是指将包信息添加到devDependencies,表示你开发时依赖的包裹. -save是指将包信息添加到dependencies,表示你发布时依赖的包裹. 2:在main.js中配置信息 import VueI18n from 'vue-i18n' import {getCookie} from './common/cookie' //引入一个js文件,使用引入的函数getCookie,根

随机推荐