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

首先是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. 51nod1674：区间的价值2（分治，利用&和|的收敛性）

    lyk拥有一个区间. 它规定一个区间的价值为这个区间中所有数and起来的值与这个区间所有数or起来的值的乘积. 例如3个数2,3,6.它们and起来的值为2,or起来的值为7,这个区间对答案的贡献为2 ...

  2. shell json简单处理

  3. 微信小程序开发之真机预览

    1:真机预览时上传组件的坑: 当在真机里面使用上传组件,当进入选择相片或者拍照的时候,小程序会进入后台,调用APP onHide()方法,选择完返回小程序是会调用App Onshow()方法,然后调用 ...

  4. PXE与cobbler实现系统自动安装

    安装操作系统的流程事实上并不复杂,如果你要给三五台服务器安装系统那么我们手工去安装即可.但是当我们要部署的是大型机房的操作系统的时候显然手动安装去一台一台的点,是不现实的.尤其现在互联网行业高速发展, ...

  5. UVaLive 6847 Zeroes (找规律，水题)

    题意 :给定一个范围,然后让你求在这个范围内所有的数的阶乘末尾0的个数有多少种. 析:找规律,写几个就会发现每隔5个会增加一个0,因为要么乘10了,要么乘5了. 代码如下: #pragma comme ...

  6. CCF 201509-3 模板生成系统 (STL+模拟)

    问题描述 成成最近在搭建一个网站,其中一些页面的部分内容来自数据库中不同的数据记录,但是页面的基本结构是相同的.例如,对于展示用户信息的页面,当用户为 Tom 时,网页的源代码是 而当用户为 Jerr ...

  7. easyui更改messager的OkCancel按钮为（中文）确定取消

    jquery-easyui默认情况下,消息框的按钮文字是英文的OK  Cancel,但可以通过提供的方法进行修改,如: $.extend($.messager.defaults,{ ok:" ...

  8. CodeForces 623B【预处理+DP】

    题意: 给出n,a,b以及n个整数a1,a2-an, 可以对数组进行以下两种操作: (1)花费len*a的代价删除连续的len个数,len<|S| (2)花费b的代价将某一个a[i]加一或减一, ...

  9. 51nod1076(tarjan)

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1076 题意:中文题诶- 思路:先用tarjan找出所有桥,再用 ...

  10. 51nod1352(exgcd)

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1352 题意:中文题诶- 思路:exgcd 显然题目可以描述为: ...