vue中局部组件的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script src="vue.js"></script>
<script>
//如果仅仅是实例化vue对象, 既有el又有template,如果template中定义模板内容
//那么template模板的优先级大于el // 首先是有一个 APP根组件, 下面有三个子组件:header, aside, content //第一步: 声子 Vue中组件的首字母要大写, 跟标签区分
//组件中的data必须是个函数,一定要有返回值
let App = { //跟的是一个对象 这个对象里 就是除了下面的Vue中,el以外的所有属性
data() {
return {text: "我是子组件"}
}, //第四步: 给子组件里写内容. 当前模板里的标签,只用当前数据属性跟下面的根组件Vue没有关系
//在<h2>{{text}}</h2>中的{{text}}部分可以放头部组件,内容组件和侧边栏组件 ************
template: `
<div id="a">
<h2>{{text}}</h2>
</div>
`,
//给子组件定义方法 比如说a标签的超链接
methods:{ },
} new Vue({
el: "#app", //绑定的是上面的id="app"
data() {
return {msg: "alex"}
}, //与生命周期有关
//用模板字符串
//定义模板
// 第三步:用子 把<App />写下面就是 用子 但是里面的内容需要写到上面子组件里App里
// template可以不用写 但是要挂载到 el上去
template: `
<div class="app"> <App><App/>
</div>
`, components: {
// 第二步: 挂子 父组件Vue里不仅是可以挂载一个App,还可以挂载其他组件
App //如果key和value一样,可以只写App 替代App:App }
})
</script>
</body>
</html>
局部组件的使用更改 以及全局组件的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<App></App>
</div>
<script src="vue.js"></script>
<script>
//如果仅仅是实例化vue对象, 既有el又有template,如果template中定义模板内容
//那么template模板的优先级大于el // 全局组件 *** 第一个参数是组件的名字,第二个参数是options
// 全局组件声明之后,可以再任意的组件里使用, 放到别的组件之后,就成了别的组件的子组件了
// 使用内置组件slot进行分发 让让别的组件中的Vbtn按钮显示不同的名称 ******
Vue.component("Vbtn",{
data(){ return {}},
template:`<button><slot>按钮</slot></button> `,
}) // 首先是有一个 APP根组件, 下面有三个子组件:header, aside, content //子组件2
//第一步:生子2 挂子往App里挂, 不需要挂Vue里
let Vheader = {//对象
data(){
return {}
},
//template 是一个组件模板,一定要用一个根(父)元素包裹起来,所以一定要有一个div闭合****
template:`
<div>
<h2>生子是在子组件中</h2>
<h2 style="color:red">挂子和用子是在父组件中</h2>
<Vbtn></Vbtn>
</div>
`, } //第一步: 声子 Vue中组件的首字母要大写, 跟标签区分
//组件中的data必须是个函数,一定要有返回值
let App = { //跟的是一个对象 这个对象里 就是除了下面的Vue中,el以外的所有属性
data() {
return {text: "我是子组件"}
}, //第四步: 给子组件里写内容. 当前模板里的标签,只用当前数据属性跟下面的根组件Vue没有关系
//在<h2>{{text}}</h2>中的{{text}}部分可以放头部组件,内容组件和侧边栏组件 ************
// 第三步:用子2 <Vheader></Vheader>, 下一步去对应模板Vheader的template里写内容
template: `
<div id="a">
<h2>{{text}}</h2>
<Vheader></Vheader>
<Vbtn>登录</Vbtn>
<Vbtn>注册</Vbtn>
<Vbtn>提交</Vbtn>
</div>
`,
//给子组件定义方法 比如说a标签的超链接
methods:{
},
components:{
// 第二步:挂子2
Vheader
},
} new Vue({
el: "#app", //绑定根元素 是上面的id="app"
data() {
return {msg: "alex"}
}, //根组件中 可以把template删除 直接在id = "app"的div中使用
// 子组件中的template 不能删除,因为子组件中的结构最终会渲染到id="app"的div里面<App></App> components: {
// 第二步: 挂子 父组件Vue里不仅是可以挂载一个App,还可以挂载其他组件
App //如果key和value一样,可以只写App 替代App:App }
})
</script>
</body>
</html>
vue中局部组件的使用的更多相关文章
- Vue 中的组件
VUE中的组件 一个自定义的标签,vue就会把他看成一个组件,vue可以给这些标签赋予一定意义:一个页面就是一个组件 好处: 1.提高开发效率 2.方便重复使用 3.便于协同开发 4.更容易被管理和维 ...
- 简述vue中父子组件是怎样相互传递值的（基础向）
前言 首先,你需要知道vue中父组件和子组件分别指的是什么? 父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) ...
- Vue中keep-alive组件的理解
对keep-alive组件的理解 当在组件之间切换的时候,有时会想保持这些组件的状态,以避免反复重渲染导致的性能等问题,使用<keep-alive>包裹动态组件时,会缓存不活动的组件实例, ...
- vue中自定义组件（插件）
vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...
- Vue中父子组件执行的先后顺序
Vera Vue中父子组件执行的先后顺序探讨(转载) 前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看 ...
- Vue中父子组件执行的先后顺序探讨
前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...
- Vue中父组件向子组件传值
Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue 中数据流组件
好久不见呀,这两年写了很多很多东西,也学到很多很多东西,没有时常分享是因为大多都是我独自思考.明年我想出去与更多的大神交流,再修筑自己构建的内容. 有时候我会想:我们遇到的问题,碰到的界限,是别人给的 ...
- vue中局部封装axios
Vue中局部配置axios 'use strict' import axios from 'axios'; import { Loading } from 'element-ui'; export c ...
随机推荐
- DataGridTemplateColumn
DataGridTemplateColumn自定义单元格样式 <DataGrid Grid.Row="0" Name="BasicRuleDataGrid" ...
- DataGridView动态添加新行的两种方法
简单介绍如何为DataGridView控件动态添加新行的两种方 法: 方法一: int index=this.dataGridView1.Rows.Add();this.dataGridView1.R ...
- linux C 内存管理方式之半动态
看到半动态申请内存,第一反应这是什么鬼? 实际上半动态内存申请很容易理解,在GNU C中使用alloca函数来实现 #include <stdlib.h> void *alloca (si ...
- apache卸载
windows下apache如何完整卸载? 原创 2014年08月14日 21:30:38 13960 1.运行services.msc,在服务中停止 apache 服务. 2.运行命令行程序,输入 ...
- php判断是否是移动设备
function isMobile() { // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset($_SERVER['HTTP_X_WAP_PROFILE'])) { ...
- Python爬虫: "追新番"网站资源链接爬取
“追新番”网站 追新番网站提供最新的日剧和日影下载地址,更新比较快. 个人比较喜欢看日剧,因此想着通过爬取该网站,做一个资源地图 可以查看网站到底有哪些日剧,并且随时可以下载. 资源地图 爬取的资源地 ...
- C语言中.h和.c文件解析（转载）
转载:http://www.cnblogs.com/laojie4321/archive/2012/03/30/2425015.html 简单的说其实要理解C文件与头文件(即.h)有什么不同之处, ...
- Android零基础入门第87节：Fragment添加、删除、替换
前面一起学习了Fragment的创建和加载,以及其生命周期方法,那么接下来进一步来学习Fragment的具体使用,本期先来学习Fragment添加.删除.替换. 一.概述 在前面的学习中,特别是动态加 ...
- Android零基础入门第71节：CardView简单实现卡片式布局
还记得我们一共学过了多少UI控件了吗?都掌握的怎么样啊. 安卓中一些常用控件学习得差不多了,今天再来学习一个新的控件CardView,在实际开发中也有非常高的地位. 一.CardView简介 Card ...
- Ring3下无驱动移除winlogon.exe进程ctrl+alt+del,win+u,win+l三个系统热键,非屏蔽热键（子类化SAS 窗口）
随手而作,纯粹技术研究,没什么实际意义. 打开xuetr,正常情况下.winlogon.exe注册了三个热键.ctrl+alt+del,win+u,win+l三个. 这三个键用SetWindowsHo ...