Vue.js学习总结第七天

淡淡的烟草味﹌ 2021-12-10 02:51 300阅读 0赞

# Vue.js学习总结第七天 #

## 一、使用vue实例的render方法渲染组件 ##

在讲render方法之前，先引入一个例子 ,如下面代码部分：

运行结果截图：

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMDU3MzIucG5n][]

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMDU3NDkucG5n][]

以上是使用components的效果，再div里面使用<login引用组件，不会对div标签有影响（没有让div标签消失）

再看一下render方法的使用代码, 在vue实例里面写render属性

<html>
        <head>
            <meta charset='utf-8'>
            <title></title>
            
            <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
        </head>
        <body>
            <div id='app'>              
               <p>123456</p>
            </div>    
        </body>
        <script> var login={ template:'<h1>这是登录组件</h1>' } //创建Vue实例 var vm=new Vue({ el:"#app", data:{ }, methods:{ }, //下面的function(createElements)中createElements是形参，它是一个方法，调用该方法可以把传入的组件模板（本例为login组件）渲染为html，然后替换本vue实例中el所代表的div元素， render:function(createElements){ return createElements(login) } }) </script>
    </html>

解释：在本例中render方法的作用就是说把<div id='app’这个模块连带着div标签删掉，然后再把login组件放到<div id='app’的位置，相当于是进行了替换，

运行效果截图： 可以看到虽然在div标签里面写了"" <p123456</p"" 但是最终没有显示，从下面第2张图中可以看到，div标签已经消失了，说明了login组件完全代替div标签里的内容（包括div标签在内一起被删除了），整体替换了

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMDU4MTAucG5n][]

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMDU4MjMucG5n][]

## 二、在webpack中导入Vue包 ##

我们在普通html页面导入时很简单，直接写下面一行代码完事了

但是如果在webpack中使用Vue.js，按如下步骤即可，

**第一步：** 在项目根目录下cmd控制台执行npm i vue -s 来安装vue的包

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMDU4NTAucG5n][]

**第二步：** 在main.js中使用import Vue from 'vue’从node\_modules文件夹（该文件夹是使用webpack工具之后生成的）中导入安装的vue包

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMDU5MDUucG5n][]

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMDU5MjcucG5n][]

但是这样是有问题的，引入的vue包不是完整的，而是vue包的一部分，我们可以按上图中说的去找node\_modules包下的vue文件夹，然后找vue文件夹下的package.json配置文件，然后找到main属性，发现main属性是dist/vue.runtime.common.js，意思就是说“当我们使用import Vue from 'vue’的时候，实质上是导入的/node\_modules/vue/dist/vue.runtime.common.js”

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMDU5NDYucG5n][]

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTAwMDIucG5n][]

所以我们的解决办法很简单，第一种是 直接在mian.js里导入具体文件

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTAwMTkucG5n][]

第二种是在webpack.config.js里添加resolve节点进行如下配置

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTAwMzYucG5n][]

然后在main.js里面不做任何修改，直接按原来的import Vue form 'vue’写就好

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTAwNTAucG5n][]

记得修改完以后要重新启动项目

## 三、webpack中vue-loader的使用 ##

我们一般把components组件代码写在html页面里面，但是如果我们想把这些components组件代码抽取出来单独形成一个文件，文件的后缀名是以.vue结尾的，比如下图，以login.vue为例，以.vue结尾的文件里面只能有三部分，分别是<template,<script,<style，这三部分里面都是写跟components有关的配置，共同组成了一个完整的组件component模块(\*\*解释：\*\*我们这里的一个以.vue结尾的文件，就相当于我们平时经常在new vue对象时在vue对象里面写component属性绑定的一个组件)

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTEwNDEucG5n][]

然后在main.js中通过下面代码引入该文件

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTAxMzAucG5n][]

默认webpack无法直接打包.vue文件，需要安装相应的loader：到项目根路径下进入cmd控制台然后输入下面代码

npm i vue-loader vue-template-compiler -D

然后在webpack.config.js中，在module节点下的rules数组中，添加一个新的匹配规则，匹配.vue结尾的文件

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

但是就这样去配置了以后，重启webpack,运行之后还是报错

这个时候我们只能使用另一种方法了，使用render函数

先在main.js里面导入我们写的login.vue文件，然后写vue实例对象，并在实例对象里面写render方法，然后在index.html里面导入bundle.js(mian.js被webpack打包后的文件)，之后启动webpack运行访问index.html就可以看到运行结果正是我们期望的，

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTAxNTUucG5n][]

总结一点：在webpack中，如果想要通过vue，把一个组件放到页面中去展示，可以通过vue中的render方法去实现

梳理：webpack中如何使用vue

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTAyMTQucG5n][]

## 四、export default和export的使用方式 ##

export-default和export都是向外暴露的作用

先说export-default吧，看下例子，我们新建一个test.js文件，然后在文件里面定义info对象，然后使用export-default info来暴露该对象

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTAyMzEucG5n][]

这个时候我们在main.js中使用import导入该test.js文件，用m222变量接收test.js中export default暴露的对象

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTAyNDcucG5n][]

然后使用webpack打包部署运行，main.js中的console.log(m222)能够在浏览器端打印出来，如下图所示：

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTAyNTkucG5n][]

\*\*注意：\*\*不能在一个test.js中写多个export default 暴露多个对象，只运行写一次export default

虽然我们不能写多个export default ，但是我们可以写多个export呀，如下图，暴露多个变量

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTAzMTYucG5n][]

然后在main.js里面做接收

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTAzMzEucG5n][]

运行结果： 可以看到main.js里面的两行console.log()都能够正常地打印出来了

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTAzNDMucG5n][]

## 五、在webpack中使用vue-router ##

首先在项目的根目录下cmd进入控制台，然后执行命令

npm i vue-router -s

安装vue-router包到node-modules文件夹下

然后在main.js中头部写下面3行代码，从node-modules文件夹中导入Vue包和VueRouter包，然后把Vue和VueRouter关联起来

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTA0MDEucG5n][]

然后就可以直接使用vue-router路由了

## 六、以.vue结尾的文件中的style标签中的lang属性和scoped属性 ##

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTA0MTgucG5n][]

[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMDU3MzIucG5n]: /images/20211209/faf8cc2ef16642e5aafb61b3ea17d499.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMDU3NDkucG5n]: /images/20211209/001c24828775432a9b5929f7c661e66f.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMDU4MTAucG5n]: /images/20211209/f2539e14f7c946dfb83cdbe22372ec4c.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMDU4MjMucG5n]: /images/20211209/d039fa45cb0b453ca283bf3493af6ce8.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMDU4NTAucG5n]: /images/20211209/7caf73c185794a0a946ebd58cc2fa1b0.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMDU5MDUucG5n]: /images/20211209/e9d0dceaa3ea4feca549cbe4cbffa0d5.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMDU5MjcucG5n]: /images/20211209/86fe832166454ba0a4d4b60812e520c4.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMDU5NDYucG5n]: /images/20211209/6e89f34eb50740febb57e5f74b27477c.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTAwMDIucG5n]: /images/20211209/0e46761c50094e1b8273c595d7b7ee3e.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTAwMTkucG5n]: /images/20211209/213d72c602dc4096821abce294ca7ea2.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTAwMzYucG5n]: /images/20211209/8a7be3e8ffc14c41816b4467e12bbac6.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTAwNTAucG5n]: /images/20211209/a9b5879c2d244182a58621c03402f3ac.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTEwNDEucG5n]: /images/20211209/f5459af96ef94b5595bd6c9685a028b6.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTAxMzAucG5n]: /images/20211209/4ac996fc30d7475da31329476755f98e.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTAxNTUucG5n]: /images/20211209/44c8c039b2ef4c6ba05c6fdfafdf460d.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTAyMTQucG5n]: /images/20211209/ecb54900239149f7b7cd8577e2763fe4.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTAyMzEucG5n]: /images/20211209/6b6b328ddd834286afabfee3ea288fe6.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTAyNDcucG5n]: /images/20211209/146b05fffad34f94a47811f96b9b91b3.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTAyNTkucG5n]: /images/20211209/7bc1adbb34a545b791f33d607658e237.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTAzMTYucG5n]: /images/20211209/9f380135ef704206bb5578cf65dd56b2.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTAzMzEucG5n]: /images/20211209/e52ae30aec2b47a09e5636975c1f8b88.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTAzNDMucG5n]: /images/20211209/193d282256854e91bbccaf7ebc1e6ed9.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTA0MDEucG5n]: /images/20211209/ff8e8b2a4c3e443396a5734e67b4f43e.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTA0MTgucG5n]: /images/20211209/61727f6d85ac4b0e950cf97dde233601.png