Zephon Blog
0%

第十六天

发表于 更新于 分类于
本文字数： 5.5k 阅读时长 ≈ 5 分钟

第十六天

在页面中使用render函数渲染组件

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
37
<!DOCTYPE html>
<html lang="zh-CN">

    <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>在页面中使用render函数渲染组件</title>
        <script src="./js/vue.js"></script>
        <script src=""></script>
    </head>

    <body>

        <div id="app">

        </div>

        <script>
            var login = {
                template: '<h1>这是登录组件</h1>'
            }
            var vm = new Vue({
                el: "#app",
                data: {},
                methods: {},
                render: function (createElement) {
                    // creteElement 是一个方法，调用它能将指定的组件模板渲染为HTML结构
                    return createElement(login);
                    // 注意：这里return 的结果会替换页面中el对应的容器
                }
            });
        </script>

    </body>

</html>

在webpack中使用vue

main.js

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
37
38
39
40
41
42
43
// 如何在webpack构建的文件中，使用Vue进行开发
// 1. 装包 npm i vue -S
// 2. 由于在webpack中，推荐使用.vue这个组件模板文件定义组件，所以需要安装能解析这种文件的loader npm i -D vue-loader vue-template-compiler
// 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实例要控制的区域

// 在webpack中使用import导入的Vue构造函数功能不完整，只提供了runtime-only方式，并没有提供像网页中那种形式
import Vue from "vue"
// 如果想像网页中那样可以有以下方法
// import Vue from '../node_modules/vue/dist/vue.js'
// 或 在webpack.config.js module.exports中添加
// resolve: {
//     alias: {
//         // 修改vue被导入时包的路径
//         "vue$": "vue/dist/vue.js"
//     }
// }
// 包的查找规则：
// 1. 找项目根目录中有没有node_modules的文件夹
// 2. 在node_modules中根据包名，找对应的vue文件夹
// 3. 在vue文件夹中找一个叫package.json的包配置文件
// 4. 在package.json文件中，找一个main属性【main属性指定了这个包在被加载时的入口文件】

// 导入login组件
import login from './login.vue'
// 默认webpack无法打包.vue文件，需要安装vue-loader vue-template-compiler
// npm i -D vue-loader vue-template-compiler
// 在配置文件中新增loader配置项(包括rule和plugin)

var vm = new Vue({
    el: "#app",
    data: {
        msg: '123'
    },
    // 在webpack中，如果想通过vue将一个组件放到页面中去展示，vm实例中的render函数可以实现
    // render: function (createElement) {
    //     return createElement(login);
    // }
    render: c => c(login) //简写
})

webpack.config.js

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
// 配置文件
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

const {
    VueLoaderPlugin
} = require('vue-loader')

module.exports = {
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new htmlWebpackPlugin({
            template: path.join(__dirname, './src/index.html'),
            filename: 'index.html'
        }),
        new VueLoaderPlugin()
    ],
    module: {
        rules: [{
            test: /\.vue$/,
            use: "vue-loader"
        }]
        // ,
        // resolve: {
        //     alias: {
        //         // 修改vue被导入时包的路径
        //         "vue$": "vue/dist/vue.js"
        //     }
        // }
    }
}

export和export default

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
<template>
  <div>
    <h1>这是登录组件，使用.vue文件定义出来的---{{msg}}</h1>
  </div>
</template>
<script>
// ES6中规定了导入导出模块的方式
// 导入：import 模块名称 from '模块标识符' import '表示路径'
// 导出：export default 和 export 向外暴露成员
// 注意：export default向外暴露的成员，可以通过任意变量接收
// 注意：在一个模块中，export default只允许向外暴露一次
// export var title = 'abc' --> import {title} from ''
// 通过export形式向外暴露的只能使用{ }的形式来接收(即按需导出)
// 使用export导出的成员，必须严格使用导出时的名称(或者 import {title as t} from '' 来起别名)
// export var a = 'a' export var b = 'b' -->import{a,b} from ''
// export可以向外暴露多个成员，同时，如果某些成员，在import时不需要则可以不在{}中定义
// 在一个模块中，可以同时使用export 和 export default向外暴露
export default {
  data () { // 注意：组件中的data必须是function
    return {
      msg: '123'
    }
  },
  methods: {
    show () {
      console.log("调用了login.vue中的show()方法");
    }
  }
}
</script>
<style>
</style>

webpack中使用vue-router

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
37
38
39
40
41
42
43
44
import Vue from 'vue';

// 1. 导入vue-router包
import VueRouter from 'vue-router';
import account from './main/account.vue';
import goodslist from './main/goodslist.vue';

import login from './subcom/login.vue';
import register from './subcom/register.vue';
// 2. 手动安装 VueRouter
Vue.use(VueRouter);

// 3. 创建路由对象
var router = new VueRouter({
    routes: [
        // account goodslist
        {
            path: '/account',
            component: account,
            children: [{
                    path: 'login',
                    component: login
                },
                {
                    path: 'register',
                    component: register
                }
            ]
        },
        {
            path: '/goodslist',
            component: goodslist
        }
    ]
})
import app from './app.vue';
var vm = new Vue({
    el: '#app',
    render: c => c(app), // render会将el指定的容器，所有内容都清空覆盖，所以不将router-view和router-link放到该容器中
    router // 4. 将路由对象挂在到vm上
})

// 注意：App这个组件，是通过VM实例render函数渲染出来的，render函数如果要渲染组件，渲染出来的组件，只能放到el:'#app'所指定的元素中
// Account和goodslist组件，是通过路由匹配监听到的，所以，这两个组件只能展示到属于路由的<router-view></router-view>中去

组件中的style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <div>
    <h1>这是account的登录子组件</h1>
  </div>
</template>
<script>
export default {

}
</script>
<style scoped>
/* 普通的style标签只支持普通的样式，如果要启用scss 或 less需要为style元素设置lang属性 */
/* 使用scoped使style中的样式只是该组件使用,一般在.vue中都推荐打开scoped */
div {
  color: red;
}
</style>