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

首先是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. bootstrap学习大纲

    bootstrap 学习分三部分,分别是 css样式,css组件,js插件. 下面介绍三部分分别要学习的内容: 1.css样式:栅格系统,排版,代码,表格,表单,按钮,图片,辅助类,响应式工具. 2. ...

  2. Intellij IDEA 弹窗License activation 报 this license BIG3CLIK6F has been cancelled 错误的解决。

    this license BIG3CLIK6F has been cancelled 具体如下: 对,没错,这个激活码本来可以使用到2018年的,但是,忽然间就不能用了.经查询吧. 还得修改个系统配置 ...

  3. 配置tomcat https的步骤

    keytool -genkey -v -alias tomcat -keyalg RSA -keystore D:\tomcat.keystore -validity 36500 keytool -g ...

  4. Android开发：显式/隐式Intent

    显式跳转 是在已知包名和类名的情况下常用的跳转方法: Intent mIntent = new Intent(); mIntent.setClassName("com.android.set ...

  5. TX1 ssh配置

    执行: sudo apt-get install openssh-server 验证: sudo ps -e |grep ssh 回车-->有sshd,说明ssh服务已经启,如果没有则输入命令s ...

  6. 蓝桥杯 2014本科C++ B组 地宫取宝 DFS+记忆化搜索

    历届试题 地宫取宝   时间限制:1.0s   内存限制:256.0MB 问题描述 X 国王有一个地宫宝库.是 n x m 个格子的矩阵.每个格子放一件宝贝.每个宝贝贴着价值标签. 地宫的入口在左上角 ...

  7. iOS中判断基础字符（大小写、数字等的判断）

    函数:isdigit 用法:#include 功能:判断字符c是否为数字 说明:当c为数字0-9时,返回非零值,否则返回零. 函数:islower 用法:#include 功能:判断字符c是否为小写英 ...

  8. c++中编译链接总结

    1 编译链接过程分为 预处理--->编译---->汇编---->链接.如下图所示 2 预处理都做了什么 (1)将所有的#define删除并展开所有的宏 (2)处理所有的条件预编译指令 ...

  9. UVa 753 A Plug for UNIX (最大流)

    题意:给定 n 种插座,m种设备,和k个转换器,问你最少有几台设备不能匹配. 析:一个很裸的网络流,直接上模板就行,建立一个源点s和汇点t,源点和每个设备连一条边,每个插座和汇点连一条边,然后再连转换 ...

  10. visual editor ve1.5下载

    eclipse官网的ve下载不了,下面这个能下 http://sourceforge.net/projects/visualeditor/files/latest/download