vue.js 核心知识点七

目录

- 7.1 vue项目中，定义全局函数 全局变量

- 7.2 Vue axios 给开发环境和生产环境配置不同的接口地址

- 7.3 VNode是什么？虚拟 DOM是什么？

- 7.4 为什么避免 v-if 和 v-for 用在一起

- 7.5 为什么使用key？

- 7.6 vue-loader是什么？使用它的用途有哪些？

- 7.7 scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？

- 7.8 vue按需加载

- 7.1 vue项目中，定义全局函数 全局变量

定义全局变量

设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用export default 暴露出去，在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时，引入该模块便可。

全局变量模块文件：
Global.vue

<script>
const serverSrc='www.google.com';
const token='fdfeeDERVDFffff';
const hasLogin=false;
const userSite="192.168.9.100.456";
  export default
  {
    userSite,//用户地址
    token,//用户token身份
    serverSrc,//服务器地址
    hasLogin,//用户登录状态
  }
</script>
  • 使用方式1：
    在需要的地方引用进全局变量模块文件，然后通过文件里面的变量名字获取全局变量参数值。
<template>
    <div>{{ token }}</div>
</template>

<script>
import global_ from '../../components/Global'//引用模块进来
export default {
 name: 'text',
data () {
    return {
         token:global_.token,//将全局变量赋值到data里面，也可以直接使用global_.token
        }
    }
}
</script>
<style lang="scss" scoped>

</style>
  • 使用方式2：
    在程序入口的main.js文件里面，将上面那个Global.vue文件挂载到Vue.prototype。
import global_ from './components/Global'//引用文件
 Vue.prototype.GLOBAL = global_//挂载到Vue实例上面

接着在整个项目中不需要再通过引用Global.vue模块文件，直接通过this就可以直接访问Global文件里面定义的全局变量。

<template>
    <div>{{ token }}</div>
</template>

<script>
export default {
 name: 'text',
data () {
    return {
         token:this.GLOBAL.token,//直接通过this访问全局变量。
        }
    }
}
</script>
<style lang="scss" scoped>
</style>

Vuex也可以设置全局变量

定义全局函数
新建一个模块文件，然后在main.js里面通过Vue.prototype将函数挂载到Vue实例上面，通过this.函数名，来运行函数。

    1. 在main.js里面直接写函数

简单的函数可以直接在main.js里面直接写

Vue.prototype.changeData = function (){//changeData是函数名
  alert('执行成功');
}

组件中调用：

this.changeData();//直接通过this运行函数
    1. 写一个模块文件，挂载到main.js上面。
      base.js文件，文件位置可以放在跟main.js同一级，方便引用
Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象
export default{
  install(Vue,options)
  {
    Vue.prototype.getData = function () {
      console.log('我是插件中的方法');
    }
  }
}
或者
exports.install = function (Vue, options) {
   Vue.prototype.text1 = function (){//全局函数1
    alert('执行成功1');
    };
    Vue.prototype.text2 = function (){//全局函数2
    alert('执行成功2');
    };
};

main.js入口文件：

import base from './base'//引用
Vue.use(base);//将全局函数当做插件来进行注册

组件里面调用：

this.text1();
this.text2();

附工具函数使用方法，变量和类的使用方法一样
写一个公共的 util.js export出去，然后到处require

//type1
        //util.js
        
        export function square(n){
            return n*n;
        }
        
        //main.js
        
        import {square} from './utils.js'
        console.log(square(2)) 
        
        //type2
        //util.js
        
        export function square(n){
            return n*n;
        }
        
        //main.js
        
        import {square as calcSquare} from './utils.js'
        console.log(calcSquare(2)) 
        
        //type3
        //util.js
        
        export default function square(n){
            return n*n;
        }
        
        //main.js
        
        import square from './utils.js'
        console.log(square(2))

- 7.2 Vue axios 给开发环境和生产环境配置不同的接口地址

  • 1.为什么
    由于我在开发过程中，前端请求访问的是我本机启动的后台服务，此时涉及到跨域（因为端口不一样），所以就在config/index.js文件中配置了代理，如下：
    image

    意思就是说凡是以api开头的请求，会帮我转到8089端口去获取数据。所以前端的请求都统一写成'api'+'接口名'

但是在生产环境下，我们不需要在接口前面加api发送请求，所以我们需要判断开发环境和生产环境，然后写相应接口

  • 2.具体配置
    在项目中找到以下两个文件：

config/dev.env.js 和 config/prod.env.js

  • 2.1 在config/dev.env.js文件中加入一行代码：API_ROOT: ' "//localhost:8080/api" '

    image

  • 2.2 在config/dev.env.js文件中加入一行代码： API_ROOT: ' "" '

    image

    3.在src/main.js文件中配置全局变量（挂在vue原型上）
    process.env是一个全局变量，能够判断当前环境。

    image

    所以在axios请求的时候，可以直接用this.baseURL+api :

    image
const service = axios.create({
  baseURL: process.env.BASE_API,//自己定义一个baseURL，这里我写在了实例里面
})

axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? 'http://192.168.1.48:8080/LeyePlatform' : 'htt
p://leye.hoyar.com.cn';

其中，this.http是因为我在main.js中将axios挂到vue的原型上（Vue.prototype.http = axios; ），这样就不用每次在用axios之前都要引入axios了；

原文：https://blog.csdn.net/u014054437/article/details/82970725

- 7.3 VNode是什么？虚拟 DOM是什么？

Vue在 页面上渲染的节点，及其子节点称为“虚拟节点 (Virtual Node)”，简写为“VNode”。“虚拟 DOM”是由 Vue 组件树建立起来的整个 VNode 树的称呼。

- 7.4 为什么避免 v-if 和 v-for 用在一起

当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，通过v-if 移动到容器元素，不会再重复遍历列表中的每个值。取而代之的是，我们只检查它一次，且不会在 v-if 为否的时候运算 v-for。

- 7.5 为什么使用key？

当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。

- 7.6 vue-loader是什么？使用它的用途有哪些？

解析.vue文件的一个加载器。
用途：js可以写es6、style样式可以scss或less、template可以加jade等

- 7.7 scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？

答：css的预编译。
使用步骤：
第一步：先装css-loader、node-loader、sass-loader等加载器模块
第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss
第三步：在同一个文件，配置一个module属性
第四步：然后在组件的style标签加上lang属性 ，例如：lang=”scss”
特性:

可以用变量，例如（$变量名称=值）；
可以用混合器，例如（）
可以嵌套

- 7.8 vue懒加载 按需加载

懒加载

（1）定义：懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。

（2）异步加载的三种表示方法：

  1. vue异步组件技术
    这种情况下一个组件生成一个js文件。
 {
            path: '/promisedemo',
            name: 'PromiseDemo',
            component: resolve => require(['../components/PromiseDemo'], resolve)
        }
  1. es提案的import()
// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1')
const ImportFuncDemo2 = () => import('../components/ImportFuncDemo2')
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
// const ImportFuncDemo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo')
// const ImportFuncDemo2 = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo2')
export default new Router({
    routes: [
        {
            path: '/importfuncdemo1',
            name: 'ImportFuncDemo1',
            component: ImportFuncDemo1
        },
        {
            path: '/importfuncdemo2',
            name: 'ImportFuncDemo2',
            component: ImportFuncDemo2
        }
    ]
})
  1. webpack提供的require.ensure()
  • vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。
    这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。
    举例如下：
        {
            path: '/promisedemo',
            name: 'PromiseDemo',
            component: resolve => require.ensure([], () => resolve(require('../components/PromiseDemo')), 'demo')
        },
        {
            path: '/hello',
            name: 'Hello',
            // component: Hello
            component: resolve => require.ensure([], () => resolve(require('../components/Hello')), 'demo')
        }

    1.  resolve => require([URL], resolve),支持性好
    2.  () => system.import(URL) , webpack2官网上已经声明将逐渐废除,不推荐使用 
    3.  () => import(URL), webpack2官网推荐使用,属于es7范畴,需要配合babel的syntax-dynamic-

import插件使用。

（3）vue中懒加载的流程：
（4）Vue中懒加载的各种使用地方：

1.路由懒加载：

export default new Router({
  routes:[
    {
     path: '/my',
     name: 'my',
      //懒加载
     component: resolve => require(['../page/my/my.vue'], resolve),
    },
  ]
})

2.组件懒加载：

components: {
  historyTab:resolve => {
  require(['../../component/historyTab/historyTab.vue'],resolve)
  },   
},
  1. 全局懒加载：
Vue.component('mideaHeader', () => {
System.import('./component/header/header.vue')
})

按需加载

（1）按需加载原因：首屏优化，第三方组件库依赖过大,会给首屏加载带来很大的压力，一般解决方式是按需求引入组件。

（2）element-ui按需加载

element-ui 根据官方说明，先需要引入babel-plugin-component插件，做相关配置，然后直接在组件目录，注册全局组件。

  1. 安装babel-plugin-component插件：
npm install babel-plugin-component –D
  1. 配置插件，将 .babelrc修改为：
{
"presets": [
  ["es2015", { "modules": false }]
 ],
"plugins": [["component", [
   {
    "libraryName": "element-ui",
    "styleLibraryName": "theme-default"
   }
 ]]]
}

3.引入部分组件，比如 Button和 Select，那么需要在 main.js中写入以下内容：

1.  import Vue from 'vue'
2.  import { Button, Select } from 'element-ui'
3.  import App from './App.vue'</code>


Vue.component(Button.name, Button)
Vue.component(Select.name, Select) /* 或写为 *Vue.use(Button) *Vue.use(Select) */

（3）iView按需求加载：

import Checkbox from'iview/src/components/checkbox';

特别提醒:

1.按需引用仍然需要导入样式，即在 main.js 或根组件执行 import 'iview/dist/styles/iview.css';
2.按需引用是直接引用的组件库源代码，需要借助 babel进行编译，以 webpack为例：

module: {
  rules: [
       {test: /iview.src.*?js$/, loader: 'babel' },
       {test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
   ]
}

如下例子中:
//懒加载路由

const routes = [
  {          //当首次进入页面时，页面没有显示任何组件；让页面一加载进来就默认显示first页面
    path:'/',   //重定向，就是给它重新指定一个方向，加载一个组件；
    component:resolve => require(['@/components/First'],resolve)
  },
  {
    path:'/first',
    component:resolve => require(['@/components/First'],resolve)
  },
  {
    path:'/second',
    component: resolve => require(['@/components/Second'],resolve)
  }
//这里require组件路径根据自己的配置引入
]
//最后创建router 对路由进行管理，它是由构造函数 new vueRouter() 创建，接受routes 参数。

 const router = new VueRouter({
 routes
})
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,189评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,577评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,857评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,703评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,705评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,620评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,995评论 3赞 396
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,656评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,898评论 1赞 298
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,395评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,982评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2赞 342