Vue.js之组件嵌套的小demo项目

第一步:初始化一个wabpack项目,这里不在复述。
第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个组件文件

  Header.vue文件:

 <!--1模板:html结构 -->
<template>
<header>
<h1>{{title}}</h1>
</header>
</template> <!--2行为:处理逻辑 -->
<script>
export default {
name: 'app-header',
data () {
return {
title:"Vue.js Demo"
}
}
}
</script> <!--3样式:解决样式 -->
<style scoped>
header{
background: pink;
padding: 10px;
}
h1{
color: #222;
text-align: center;
}
</style>

  Users.vue文件:

 <template>
<div class="users">
<ul>
<li v-for="user in users"
@click="user.show = !user.show">
<h2 >{{user.name}}</h2>
<h3 v-show="user.show">{{user.Position}}</h3>
</li>
</ul>
</div>
</template> <script>
export default {
name: 'users',
data () {
return {
users:[
{name:"Henry",Position:"Java工程师",show:false},
{name:"Lily",Position:"Java工程师",show:false},
{name:"KangKang",Position:"Java工程师",show:false},
{name:"Maria",Position:"Java工程师",show:false},
{name:"Sally",Position:"Java工程师",show:false},
{name:"Elinna",Position:"Java工程师",show:false}
]
}
}
}
</script> <style scoped>
users{
width: 100%;
max-width: 1200px;
margin:40px auto;
padding: 0 20px;
box-sizing: border-box;
}
ul{
display: flex; //所有li在一行
flex-wrap: wrap; //所有li在容器里,不会超出容器
list-style-type: none;
padding: 0; //去掉浏览器自带的padding值
}
li{
flex-grow: 1; //如果一行之有一个会撑满整行,如果有两个,两个撑满整行
flex-basis: 200px; //每一个li200px的宽度
text-align: center;
padding: 30px;
border: 1px solid #666;
margin: 10px;
}
</style>

  Footer.vue文件:

 <template>
<footer>
<p>{{copyright}}</p>
</footer>
</template> <script>
export default {
data () {
return {
copyright:"Copyright 2018 Vue Demo" }
}
}
</script> <style scoped>
footer{
background: #666;
padding: 6px;
}
footer p{
color: pink;
text-align: center;
}
</style>

第三步:编写App.vue文件:在此文件中要在script中通过import引用刚才编写的三个组件,然后通过组件的别名使用组件。

App.vue文件:项目入口文件中引入的组件

 <!--模板-->
<template>
<div id="app">
<app-header></app-header>
<users></users>
<app-footer></app-footer>
</div>
</template> <!--行为-->
<script>
//局部注册组件
import Users from './components/Users'
import Header from './components/Header'
import Footer from './components/Footer' export default {
name: 'App',
components:{
"users":Users,
"app-header":Header,
"app-footer":Footer
}
}
</script> <!--样式-->
<style >
</style>

html文件:项目的入口文件

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue-playlist</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

main.js文件:项目的入口js文件

 import Vue from 'vue'
import App from './App' Vue.config.productionTip = false
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})

  然后启动项目,就能看到生成一个组件嵌套形成的小demo

项目加载流程:
  index.html是入口文件,加载html时候会调用main.js文件,main.js文件会实例化vue组件App.vue,然后App.vue会把其他组件也加载进来,最后渲染整个页面。

Vue.js之组件嵌套小demo的更多相关文章

  1. Vue.js多重组件嵌套

    Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...

  2. Vue.js之组件嵌套

    Vue.js中组件嵌套有两种方式 第一种:注册全局组件 例如在components文件夹下新建一个User.vue组件,然后在main.js文件中注册全局组件 //注册全局组件 Vue.compone ...

  3. 【Vue课堂】Vue.js 父子组件之间通信的十种方式

    这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...

  4. Vue.js 和 MVVM 的小细节

    Vue.js 和 MVVM 的小细节 转载 作者:流云诸葛 链接:www.cnblogs.com/lyzg/p/6067766.html MVVM 是Model-View-ViewModel 的缩写, ...

  5. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  6. Vue.js之组件传值

    Vue.js之组件传值 属性传值可以从父组件到子组件,也可以从子组件到父组件. 这里讲一下从父组件到子组件的传值 还以上次的demo为例,demo里有APP.vue是父组件,Header.vue,Us ...

  7. vue.js 同级组件之间的值传递方法(uni-app通用)

    vue.js 兄弟组件之间的值传递方法 https://blog.csdn.net/jingtian678/article/details/81634149

  8. Vue.js之组件(component)

    从结构上看,组件之于实例,就好比轮子之于汽车.从属性和方法来看,组件有实例的大部分方法,如果Vue实例是孙悟空,组件就好比实例的一个毫毛,变化多端却为Vue实例所用. 目录: 组件的注册 is的作用 ...

  9. 用Vue.js递归组件构建一个可折叠的树形菜单

    在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', {   template: `<!--Invoking myself! ...

随机推荐

  1. sql DATEPART() MONTH() convert() cast() dateadd() DATEDIFF() with(nolock)

    DATEPART() 函数用于返回日期/时间的单独部分,比如年.月.日.小时.分钟等等. 语法 DATEPART(datepart,date) date 参数是合法的日期表达式.datepart 参数 ...

  2. web页面性能分析一些网址

    https://developers.google.com/speed/pagespeed/insights/

  3. vue 记一次编译没反应、无进度、没有任何报错的提示,但后台却TM一直消耗内存的BUG:

    控制台一直提示“building for production...”,而且spinner停止了动画! 由于没有任何的提示.况且项目的代码.结构.设计完全未知模糊的情况下,我只能按照unix的理念“使 ...

  4. python学习之pyenv

    我们经常有这种需求: linux系统中既要有python2.xxx,又要有python3.xxx,甚至更极端的情况是,有多个版本的python3.xxx. 如何实现上述需求呢?更新python的话,费 ...

  5. nginx反向代理批量实现https协议访问

    我们进入大多数HTTPS网站ie浏览器都会给出相关提醒了,但我配置了一台HTTPS代理机器发现css与js都加载不了,这个有朋友说是https页面,如果加载http协议的内容,会被认为页面不安全,所以 ...

  6. unity mac 破解教程

    1.安装好软件,我们解压破解包,有下面两个文件,Unity 和Unity_v5.x.ulf,放桌面.     2.打开终端.       3.输入文件地址,注意,我这上边的用户名,记得改成自己的用户名 ...

  7. hdu3208 Power of Integer

    /** 题目:H - Power of Integer 链接:https://vjudge.net/contest/152887#problem/H 题意:给出区间[a, b],问你区间[a, b]所 ...

  8. Servlet 自动刷新页面

    假设有一个网页,它是显示现场比赛成绩或股票市场状况或货币兑换率.对于所有这些类型的页面,您需要定期刷新网页. Java Servlet 提供了一个机制,使得网页会在给定的时间间隔自动刷新. 刷新网页的 ...

  9. linux shell习题训练

    shell习题训练 求2个数之和 计算1-100的和 将一目录下所有的文件的扩展名改为bak 编译当前目录下的所有.c文件: 打印root可以使用可执行文件数,处理结果: root's bins: 2 ...

  10. 很easy的js双向绑定框架(二):控制器继承

    初衷 上一篇已经实现了数据的双向绑定,但model的控制范围是整个文档.在实际project中必需要有作用范围,以便做ui模块的拆分. 这一篇,我们希望实现像angularjs一样的控制器继承: 1. ...