为什么需要组件拆分呢？这样才能更符合模块化这样一个理念。

首先是index.html,代码如下：

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

    <title>sell</title>

    <link rel="stylesheet" type="text/css" href="static/css/reset.css">

  </head>

  <body>

    <div id="app"></div>      <-----------------------------------------这里才是有用的哦，记住这里，这是一个div，id='app'   这里是  A

  </body>

</html>

　　app.vue文件：

<template>

    <div id="aaa">         <!------------------------------------------------------这里也要多注意下哦，稍后解释   这里是 B

        <div class="header">

            im header

        </div>

        <div class="container">

            im container

        </div>

        <div class="footer">

            im footer

        </div>

    </div>

</template>

<script>

</script>

<style>

</style>

　　　main.js文件

import Vue from 'vue';

import App from './App';

/*eslint-disable no-new*/

new Vue({

    el:'#app',　　　　　　　　　　　　　<!----------------------------------这里和下面一行都蛮重要的        这里是 C

    render: h => h(App)             <!----------------------------------还有这里哦                    这里是 D

})

好，先让我们看一下这么写的效果和最后呈现在HTML的结构是什么样的（太简单了，我怕你们打我。。。。）

　　我脑子笨，你们原谅我连这点都想不明白，我刚开始就在纠结这三个问题。

　　1.index.html里面的那个带id#app的div，为什么不会出现在dom结构里？

　　2.index.html里面的那个带id#app的div,它与app.vue里面的id=‘#aaa’的div有什么关系？

　　3.为什么在main.js文件里面，用render: h => h(App)把它们挂载到#app里面，有的却写的是components:{app}?

　　正好加了一个vue的群，在群里提出了我的问题，里面的人告诉我说：

　　1.应该index.html 里面那个ID 只在node环境用 打包以后 就渲染成挂载的app.vue的页面了.

　　2.app.vue 跟 index.html 里面的ID 不一定一样 ，app.vue里面的id 会最终渲染到DOM结构里，并且写的其他标签 要放到那个div里面 而且template下级 只能有一个div.

　　3.

new Vue({

  router,

  store,

  //components: { App }   <!---------------------------------------------vue1.0的写法

  render: h => h(App)     <!---------------------------------------------vue2.0的写法

}).$mount('#app')

　　先说render：render函数是渲染一个视图，然后提供给el挂载，如果没有render那页面什么都不会出来。

　　然后是  =>   箭头函数。是Es6中的新语法：（如果大家想更深入的了解，推荐一篇文章：链接：https://segmentfault.com/a/1190000009410939）

　　其实render: h => h(App)的意思， 首先 ：表示 Vue 实例选项对象的 render 方法，它作为一个函数，接受传入的参数 h 函数，返回 h(App) 的函数调用结果。等价于：　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　{

    　　　　　　　　　　　　　　　　　　render: function(h) {

        　　　　　　　　　　　　　　　　　　return h(App);

    　　　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　　　　 其次：Vue 在创建 Vue 实例时，通过调用 render 方法来渲染实例的 DOM 树。

vue2.0：（四）、首页入门，组件拆分1的更多相关文章

  1. Vue2.0表单校验组件vee-validate的使用

    vee-validate使用教程 *本文适合有一定Vue2.0基础的同学参考,根据项目的实际情况来使用,关于Vue的使用不做多余解释.本人也是一边学习一边使用,如果错误之处敬请批评指出* 一.安装 n ...

  2. Vue2.0的变化 ，组件模板，生命周期，循环，自定义键盘指令，过滤器

    组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...

  3. Webpack+vue2.0如何注册全局组件 (01)

    Part 1, 问题: webpack + vue2.0框架中,如何在入口js中注册组件? 就是在一个月以前,匆匆闯入vuejs这个社群,基本了解了vuejs的一些基础特性和语法.笔者兴致勃勃地开始想 ...

  4. Vue2.0中的transition组件

    组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...

  5. Vue2.0如何实现父组件与子组件之间的事件发射与接收

    关于vue2.0的事件发射和接收,大家都知道$dispatch和$broadcast在vue2.0已经被弃用了,取而代之的是更加方便快捷的方式,使用事件中心,组件通过它来互相通信,不管组件在哪一个层都 ...

  6. 在vue2.0中引用element-ui组件库

    element-ui是由饿了么团队开发的一套基于 Vue 2.0 的桌面端组件库. 官网:http://element.eleme.io/ 安装 npm i element-ui -S 引用完整的el ...

  7. 基于vue2.0的一个分页组件

    分页组件在项目中经常要用到之前一直都是在网上找些jq的控件来用(逃..),最近几个项目用上vue了项目又刚好需要一个分页的功能.于是百度发现几篇文章介绍的实在方式有点复杂, 没耐心看自己动手造轮子写了 ...

  8. vue2.0的瀑布流组件-使用说明

    做一个小项目,需要瀑布流,就选他了,先看看效果 使用瀑布流布局组件:vue-waterfall-easy 下载引入: 方式一:直接从git上复制组件的完整代码,引入vue组件文件即可 import v ...

  9. vue2.0开发时导入组件时出错

    导入自定义组件时出现了如下错误 ERROR Failed to compile with 1 errors 12:35:41 This dependency was not found: * comp ...

  10. vue2.0 组织机构树形选择组件(类似elementui <el-transfer> 与 <el-tree> 两个标签的结合)

    1. 效果图 2. 实现:   三级(部门或人员的树形选择) 3. 模拟数据说明:  fake.js name:  显示的名称(同时也是源码中 for 循环单一的key ,  如果真实数据存在名字有重 ...

随机推荐

  1. HihoCoder 1502 : 最大子矩阵 (双指针)

    描述 给定一个NxM的矩阵A和一个整数K,小Hi希望你能求出其中最大(元素数目最多)的子矩阵,并且该子矩阵中所有元素的和不超过K. 输入 第一行包含三个整数N.M和K. 以下N行每行包含M个整数,表示 ...

  2. 自己实现c++中string 类

    class String { public: String(const char *str = NULL);// 普通构造函数 String(const String &other);// 拷 ...

  3. cobbler api

    try: import xmlrpclib except ImportError as e: import xmlrpc.client SERVER_IP = '192.168.144.11' try ...

  4. ZipHelper

    using ICSharpCode.SharpZipLib.Zip; using System.Collections.Generic; using System.IO; namespace WLYD ...

  5. linux命令：rsync

    Rsync的命令格式可以为以下六种: rsync [OPTION]... SRC DEST rsync [OPTION]... SRC [USER@]HOST:DEST rsync [OPTION]. ...

  6. 【220】◀▶ IDL 数组操作函数说明

    参考:Array Creation Routines —— 创建数组函数参考:Array Manipulation Routines —— 操作数组函数 01   MAX 最大值. 02   MIN ...

  7. Android调试之TraceView

    TraceView 在应用运行时,可以使用Debug类打开操作日志记录功能,打开后Android会详细记录应用花在每个线程以及线程的每个函数的调用时间.操作日志记录完毕后,可以使用Android SD ...

  8. 【Hadoop】MapReduce笔记（四）：MapReduce优化策略总结

    Cloudera 提供给客户的服务内容之一就是调整和优化MapReduce job执行性能.MapReduce和HDFS组成一个复杂的分布式系统,并且它们运行着各式各样用户的代码,这样导致没有一个快速 ...

  9. 一道关于chm设计ctf钓鱼的一些思考

    版权声明:本文为博主的原创文章,未经博主同意不得转载 题目:flag就是文件指向的地址 文件: 作为一名web狗的出题人,这道ctf有点意思不是在于因为它难,而是相对于一些代码审计以及一些杂项题来说, ...

  10. 3 手写Java HashMap核心源码

    手写Java HashMap核心源码 上一章手写LinkedList核心源码,本章我们来手写Java HashMap的核心源码. 我们来先了解一下HashMap的原理.HashMap 字面意思 has ...