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

首先是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. tyvj2044 旅游景点

    背景 “扫地”杯III NOIP2012模拟赛 day2 第二题 描述 liouzhou_101住在柳侯公园附近,闲暇时刻都会去公园散散步.很那啥的就是,柳侯公园的道路太凌乱了,假若不认识路就会走着走 ...

  2. nvidia-smi 查看GPU信息字段解读

    第一栏的Fan:N/A是风扇转速,从0到100%之间变动,这个速度是计算机期望的风扇转速,实际情况下如果风扇堵转,可能打不到显示的转速.有的设备不会返回转速,因为它不依赖风扇冷却而是通过其他外设保持低 ...

  3. poj3613Cow Relays——k边最短路(矩阵快速幂)

    题目:http://poj.org/problem?id=3613 题意就是求从起点到终点的一条恰好经过k条边的最短路: floyd+矩阵快速幂,矩阵中的第i行第j列表示从i到j的最短路,矩阵本身代表 ...

  4. Log4j1的使用与log4j.properties的配置

    这里介绍Log4j1(即Log4j 1.x版本),这里以普通的Java项目为例,用eclipse编写,项目结构如下图所示: 该项目主要包括: java文件:Log4jv1Util 以及 Log4jv1 ...

  5. httpclient:Ip 代理

    参考:http://blog.csdn.net/sdfiiiiii/article/details/70432060  http://blog.csdn.net/qy20115549/article/ ...

  6. Flask_restful 插件实战笔记——基本概念与使用

       最近在Resetful接口设计上想法还是挺多的,也实现了一些需求!想着整理下Flask_restful插件的基本知识,方便日后的复习!   官方地址:https://flask-restful. ...

  7. mosquitto.conf之log配置

    # ================================================================= # Logging # 日志信息 # ============= ...

  8. python 之元类

    定义类的两种方法: 1.class定义 2.type(类名,类的基类们,类的名称空间) # 定义类的三要素:类名.基类.名称空间 class_name = 'Chinese' class_bases ...

  9. c语言中#和##的用法

    一.一般用法 我们使用#把宏参数变为一个字符串,用##把两个宏参数贴合在一起. 用法: #include<cstdio> #include<climits> using nam ...

  10. 【Linux学习】Linux文件系统1--文件系统的目录结构

    Linux文件系统1--文件系统的目录结构 一.linux文件系统的类型 LINUX有四种基本文件系统类型:普通文件.目录文件.连接文件和特殊文件,可用file命令来识别. 1.普通文件:如文本文件. ...