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. springboot学习（八） 使用jpa访问数据库

    1.添加maven依赖 <dependency> <groupId>mysql</groupId> <artifactId>mysql-connecto ...

  2. 测试xxxxxxxx

    测试sdfs xxxxxxxbgssdfsdf f sd=JS-demp.zip f /**  * @author John Smith <john.smith@example.com>  ...

  3. PHP+Redis 实例 页面缓存

    前提分析! 上面的图,我分为了三个层级去做页面缓存,其实不一定要三个层面都实现的,如果你做了页面级的,项目初期是够了,作为接口级,基本可以解决很多吞吐量. 对于上面的三个层级,我用了同一个方法去做. ...

  4. php中的匿名函数的注意事项

    在php5.3以后,php加入匿名函数的使用,今天在使用匿名的时候出现错误,不能想php函数那样声明和使用,详细看代码 $callback=function(){ return "aa&qu ...

  5. Visual Studio - 引入动态库

    以VS2013为例: 1.新建项目 2.选择"Win32控制台应用程序",点确定 勾选“控制台应用程序”和“空项目”选项,点击完成,然后新建一个C文件,在文件头上右键: 3.粘贴准 ...

  6. TCP/IP的三次握手与四次挥手详解

    TCP((Transmission Control Protocol)传输控制协议,是一个面向连接的协议.在运用此协议进行数据传输前都会进行连接的建立工作(三次握手):当数据传输完毕,连接的双方都会通 ...

  7. 用lua nginx module搭建一个二维码

    用lua nginx module搭建一个二维码(qr code)生成器 作者 vinoca 發布於 2014年10月31日 如果有VPS,或者开源的路由器,安装一个nginx,添加lua-nginx ...

  8. 教你实现类似于格瓦拉启动页中的放大转场动画（OC&Swift）

    教你实现类似于格瓦拉启动页中的放大转场动画(OC&Swift) 一.前言 用过格瓦拉电影,或者其他app可能都知道,一种点击按钮用放大效果实现转场的动画现在很流行,效果大致如下 在iOS中,在 ...

  9. spring boot 多层级mapper

    mapper目录结构:   mapper ----dev -------produce   在 application.properties 文件中配置 mybatis.mapper-location ...

  10. linux mysql 5.7.17 编译安装小记

    官方网站中下载源码包: https://dev.mysql.com/downloads/mysql/ 选择下载源码包: 由于官网下载较慢,我选择使用搜狐镜像站进项下载..速度真的快的不是一星半点: 电 ...