美文网首页
vue.js 核心知识点七

vue.js 核心知识点七

作者: 我跟你蒋 | 来源:发表于2019-02-15 15:17 被阅读11次

    目录

    - 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
})

    相关文章

      网友评论

          本文标题：vue.js 核心知识点七

          本文链接：https://www.haomeiwen.com/subject/kckpeqtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|vue.js 核心知识点七|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！