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

首先是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. 在KitKat(Android 4.4.2) 推送网址给手机

    弱者才会回避问题. 最近想把网址推送给手机实现后台下载,打算故技重施,用短信传送然后中断广播的方法实现隐蔽传送.试了半天发现怎么现在拦不住短信了.查了一下才发现原来Android4.4增加了一个安全机 ...

  2. vim的tab缩进及用空格设置

    编辑~/.vimrc文件,分别设置用空格而不是用tab,一个tab多少个空格,自动缩进多少宽度,显示行号. set expandtabset tabstop=4 set shiftwidth=4 se ...

  3. 深入理解java虚拟机---->java内存区域与内存溢出异常

    2. java内存区域于内存溢出异常 2.1 概述: 对于C/C++而言,内存管理具有最高的权利,既拥有每一个对象的“所有权”,又担负着每一个对象生命开始到结束的维护责任. 对于java而言,则把内存 ...

  4. poj3070 求斐波那契数列第n项 ——矩阵快速幂

    题目:http://poj.org/problem?id=3070 用矩阵快速幂加速递推. 代码如下: #include<iostream> #include<cstdio> ...

  5. bzoj3832

    拓扑排序+set 如果我们直接记录所有路径是不行的,那么我们要降低路径的数量,于是我们把最短路径转换到边上,这样我们就只有m条路径了. 先计算出f[i]和g[i]表示正反拓扑最长链,把所有g插到set ...

  6. java一些jar包的bug(不定期更新)

    c3p0-0.9.5.jar 连接池jar包,常用于web项目,关闭连接池时,没有注销所有的driver 解决:可声明一个ServletContextListener的子类并设置监听,重写contex ...

  7. java集合框架之几种set（HashSet LinkedHashSet TreeSet ）

    参考http://how2j.cn/k/collection/collection-sets/691.html#nowhere HashSet LinkedHashSet TreeSet HashSe ...

  8. 5-1 变量与常量 & 6-1课程总结

    变量与常量 常量就是变量定义的的前面加上final final关键字定义常量 新建类FinalDemo 更新常量n的值会报错.常量不可以被修改 常量有个命名规则 一般以大写字母去表示 final in ...

  9. lua中文教程【基本语法】

    代码例子:http://www.inf.puc-rio.br/~roberto/book/code.html 注意:没有“:” 1.特点:可扩展.简单.高效.跨平台 2.使用方式:嵌入程序.独立使用. ...

  10. swift4.0 方法监听Selector写法总结

    import UIKit class MainViewController: UITabBarController { //MARK:属性 懒加载 lazy var composeBtn = UIBu ...