By welkin

Updated:

Contents
  1. 1. 一、渲染组件
    1. 1.0.1. 1. 在页面中渲染基本组件
    2. 1.0.2. 2. 在vue中结合render函数渲染指定的组件到容器中
  • 2. 二、在.vue中定义自己的方法
    1. 2.0.1. 1. 使用export default
    2. 2.0.2. 2. export

    • 一、渲染组件

    1. 在页面中渲染基本组件

    1. 使用components进行渲染得到

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      <!DOCTYPE html>
      <html lang="en">

      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="./lib/vue-2.4.0.js"></script>
      </head>

      <body>
        <div id="app">
          <p>33333</p>
          <login></login>
        </div>

        <script>

          var login = {
            template: '<h1>这是登录组件</h1>'
          }

          // 创建 Vue 实例，得到 ViewModel
          var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            components: {
              login
            }
          });
        </script>
      </body>

      </html>

    2. 使用render
      这里 return 的结果，会 替换页面中 el 指定的那个 容器

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      <!DOCTYPE html>
      <html lang="en">

      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="./lib/vue-2.4.0.js"></script>
      </head>

      <body>
        <div id="app">
          <p>444444</p>
        </div>

        <script>

          var login = {
            template: '<h1>这是登录组件</h1>'
          }

          // 创建 Vue 实例，得到 ViewModel
          var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            render: function (createElements) { // createElements 是一个 方法，调用它，能够把 指定的 组件模板，渲染为 html 结构
              return createElements(login)
              // 注意：这里 return 的结果，会 替换页面中 el 指定的那个 容器
            }
          });
        </script>
      </body>

      </html>

    注意

    1. 使用components相当于之前使用的插值表达式，不会清空原有的内容，而render（相当于v-text）会清空原有的内容。
    2. 一个app只能有一个render，而components可以放多个

    2. 在vue中结合render函数渲染指定的组件到容器中

    在runtime-only中渲染组件
    在我之前有一一篇博客中解释了在什么情况下会出现runtime-only
    https://blog.csdn.net/Welkin_qing/article/details/81945353
    就是在main.js中直接引入vue，且没有在webpack.config.js中声明

    1. 这个时候我们需要建一个.vue 的组件（例：login.vue）；这个是由三部分组成的

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      <template>
        <div>
          <h1>这是登录组件，使用 .vue 文件定义出来的 --- {{msg}}</h1>
        </div>
      </template>

      <script>

      </script>

      <style>

      </style>

    2. 在main.js中导入.vue组件

      1
      import login from './login.vue'

    3. 安装第三方包
      默认，webpack 无法打包 .vue 文件，需要安装 相关的loader： 

      1
      cnpm i vue-loader vue-template-compiler -D

      在配置文件中，新增loader配置项 

      1
      { test:/\.vue$/, use: 'vue-loader' }

    4. 使用render渲染，且在页面中使用<login></login>

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      var vm = new Vue({
        el: '#app',
        data: {
          msg: '123'
        },

        //render: c => c(login) 或者使用下面的方法
        render: function (createElements) { 
        // 在 webpack 中，如果想要通过 vue， 把一个组件放到页面中去展示，vm 实例中的 render 函数可以实现
          return createElements(login)
      })

    总结梳理： webpack 中如何使用 vue :

    1. 安装vue的包： cnpm i vue -S
    2. 由于 在 webpack 中，推荐使用 .vue 这个组件模板文件定义组件，所以，需要安装 能解析这种文件的 loader cnpm i vue-loader vue-template-complier -D
    3. 在 main.js 中，导入 vue 模块 import Vue from ‘vue’
    4. 定义一个 .vue 结尾的组件，其中，组件有三部分组成： template script style
    5. 使用 import login from ‘./login.vue’ 导入这个组件
    6. 创建 vm 的实例 var vm = new Vue({ el: ‘#app’, render: c => c(login) })
    7. 在页面中创建一个 id 为 app 的 div 元素，作为我们 vm 实例要控制的区域；

    二、在.vue中定义自己的方法

    1. Node 中向外暴露成员的形式：
      在Node中 使用 var 名称 = require(‘模块标识符’)导入
      使用 module.exports 和 exports 来暴露成员
    1
    module.exports = {}
    1. 在 ES6中，也通过 规范的形式，规定了 ES6 中如何 导入 和 导出 模块
    • ES6中导入模块，使用 import 模块名称 from ‘模块标识符’ import ‘表示路径’
    • 在 ES6 中，使用 export default 和 export 向外暴露成员：

      1. 使用export default

      1
      2
      3
      4
      5
      6
      var info = {
        name: 'zs',
        age: 20
      }

      export default info
    1
    2
    3
    export default {
      address: '北京'
    }

    注意

    1. export default 向外暴露的成员，可以使用任意的变量（自定义变量）来接收
    2. 在一个模块中，export default 只允许向外暴露1次
    3. 在一个模块中，可以同时使用 export default 和 export 向外暴露成员

      2. export

      1
      2
      export var title = '小星星'
      export var content = '哈哈哈'

    注意

    1. 使用 export 向外暴露的成员，只能使用 { } 的形式来接收，这种形式，叫做 【按需导出】
    2. export 可以向外暴露多个成员， 同时，如果某些成员，我们在 import 的时候，不需要，则可以 不在 {} 中定义
    3. 使用 export 导出的成员，必须严格按照 导出时候的名称，来使用 {} 按需接收；
    4. 使用 export 导出的成员，如果 就想 换个 名称来接收，可以使用 as 来起别名；

    接收

    1
    2
    3
    import m222, { title as title123, content } from './test.js'
    console.log(m222)//接收export default
    console.log(title123 + ' --- ' + content)

    Contents
    1. 1. 一、渲染组件
      1. 1.0.1. 1. 在页面中渲染基本组件
      2. 1.0.2. 2. 在vue中结合render函数渲染指定的组件到容器中
  • 2. 二、在.vue中定义自己的方法
    1. 2.0.1. 1. 使用export default
    2. 2.0.2. 2. export