vue2.0：（四）、首页入门，组件拆分1

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

首先是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的结构是什么样的（太简单了，我怕你们打我。。。。）

vue2.0：（四）、首页入门，组件拆分1

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

　　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.

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

相关文章