精华内容
下载资源
问答
  • 组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。这篇文章通过实例代码给大家介绍了Vue加载组件、动态加载组件的几种方式,需要的朋友参考下吧
  • Vue加载组件的几种方式

    千次阅读 2018-08-29 20:41:50
    //正常加载 import index from '../pages/index.vue' import view from '../pages/view.vue' //懒加载 const index = resolve => require(['../pages/index.vue'], resolve) const view = resolve => ...
    //正常加载
    import index from '../pages/index.vue'
    import view from '../pages/view.vue'
    //懒加载
    const index = resolve => require(['../pages/index.vue'], resolve)
    const view = resolve => require(['../pages/view.vue'], resolve)
    //懒加载 - 按组
    const index = r => require.ensure([], () => r(require('../pages/index.vue')), 'group-index')
    const view = r => require.ensure([], () => r(require('../pages/view.vue')), 'group-view')
    // 懒加载 - 按组 import,基于ES6 import的特性
    const index = () => import('../pages/index.vue')
    const view = () => import('../pages/view.vue')
    展开全文
  • 今天就给大家分享2个超不错的Vue加载微调器组件。1、Epic-Spinners一系列精美的 vue+css3 花样动画加载效果集合组件。star高达3.3K+。安装$ npm i epic-spinners -S使用组件 ... 优秀的产品总有它独特之处,针对...

    在前端项目开发中,经常用到loading加载提示功能。今天就给大家分享2个超不错的Vue加载微调器组件。

    86be121722a420d47573db116b82e598.png

    1、Epic-Spinners

    一系列精美的 vue+css3 花样动画加载效果集合组件。star高达3.3K+

    安装

    $ npm i epic-spinners -S

    使用组件

    ...
    f65328c2f32aaf6809ae5d3f29b457e4.png
    7b9532e3ed82dc53ae56e6f3fbc1ec94.png
    963c177099fd390b059e75472efa3966.png
    74c1ddf3d7285a737287cc552ad9c200.png

    优秀的产品总有它独特之处,针对react和angular,也有相应的版本。

    • react版本
    https://github.com/bondz/react-epic-spinners
    • angular版本
    https://github.com/hackafro/angular-epic-spinners

    如果觉得还可以的话,不要错过哈~

    # demo地址https://epic-spinners.epicmax.co/# 实例应用https://vuestic.epicmax.co/admin/ui/spinners# 仓库地址https://github.com/epicmaxco/epic-spinners

    2、Vue-Element-Loading

    一个基于vue.js的元素loading加载效果组件。

    393c271fe27a9d7e19432b3f15051fb8.gif

    安装

    $ npm i vue-element-loading -S

    使用组件

    This is my content.

    目前带有8个加载微调器

    • 微调器 spinner
    • 迷你旋转器 mini-spinner
    • 环 ring
    • 线波 line-wave
    • 线刻度 line-scale
    • 线下 line-down
    • 淡入淡出 bar-fade
    • 淡入淡出规模 bar-fade-scale
    13ccc7bf97372d76d5415bf19c4a5ebc.png

    全屏设置

    设置提示语及样式

    大小及动画速度设置

    43fd1a0e9e43e1c11b51b0efaa6fad6e.png

    局部加载

    d4fafbc8719bb3b23ecec962d21e6867.png

    加载类型

    2bce18820d799fc4b830ce23553244cb.png

    全屏加载

    # 示例地址https://vue-element-loading.netlify.app/# 仓库地址https://github.com/biigpongsatorn/vue-element-loading

    ok,就分享到这里。如果大家有其它Vue加载器,欢迎一起交流讨论!

    展开全文
  • vue组件加载组件 棋盘 (vue-chessboard) Chessboard vue component to load positions, create positions and see threats. 棋盘Vue组件加载位置,创建位置并查看威胁。 It uses chess.js for chess ...

    vue父组件加载子组件

    棋盘 (vue-chessboard)

    Chessboard vue component to load positions, create positions and see threats.

    棋盘Vue组件可加载位置,创建位置并查看威胁。

    • It uses chess.js for chess movements and validations

      它使用Chess.js进行国际象棋移动和验证

    • It uses chessground for chessboard UI chessground

      它使用国际象棋棋盘UI国际象棋棋盘

    安装 (Installation)

    npm install --save vue-chessboard

    默认组件导入 (Default component import)

    import {chessboard} from 'vue-chessboard'
    import 'vue-chessboard/dist/vue-chessboard.css'

    Then use it in your template

    然后在模板中使用它

    <chessboard/>

    浏览器 (Browser)

    <div id="app">
      <chessboard></chessboard>
    </div>
    
    <link rel="stylesheet" href="vue-chessboard/dist/vue-chessboard.css"/>
    
    <script src="vue.js"></script>
    <script src="vue-chessboard/dist/vue-chessboard.browser.js"></script>
    
    <script>
    new Vue({
      el: '#app',
      components: {
        VueChessboard
      }
    });
    </script>

    例子 (Examples)

    Check live examples: http://vitomd.com/vue-chessboard-examples/

    查看实时示例: http : //vitomd.com/vue-chessboard-examples/

    Check live examples repository: https://github.com/vitogit/vue-chessboard-examples

    检查实时示例存储库: https : //github.com/vitogit/vue-chessboard-examples

    Check full application using the component: Chess Guardian

    使用以下组件检查完整的应用程序: Chess Guardian

    简单的棋盘与法律动作 (Simple Chessboard with legal moves)

    <chessboard/>

    简单的棋盘,自由移动 (Simple Chessboard with free moves)

    <chessboard :free="true"/>

    简单的棋盘,显示对当前位置和玩家的威胁 (Simple Chessboard that shows threats for current position and player)

    <chessboard :showThreats="true"/>

    芬绑定到棋盘(单击新位置时的加载位置) (Fen binded to the chessboard (load position when click on a new position))

    <chessboard :fen="currentFen"/>
      <button class="button is-light" @click="loadFen(fen)" v-for="fen in fens">
        {{fen}}
      </button>

    带有onmove回调的棋盘。 每次移动后返回位置信息{“ legal_black”:20,“ checks_black”:0,“ threat_black”:0,“ turn”:“ black”}。 (Chessboard with onmove callback. Returns positional info { "legal_black": 20, "checks_black": 0, "threat_black": 0, "turn": "black" } after each move.)

    It also returns the fen and the history data.

    它还返回fen和历史数据。

    <chessboard @onMove="showInfo"/>
      <div>
        {{this.positionInfo}}
      </div>
    showInfo(data) {
      this.positionInfo = data
    }

    带有onpromote回调的棋盘 (Chessboard with onpromote callback)

    When there is a promotion it will execute the callback. Just return the first letter of the piece: q:Queen, r:Rook, k:Knight, b:Bishop

    有促销时,它将执行回调。 只需返回该乐曲的首字母即可:q:Queen,r:Rook,k:Knight,b:Bishop

    <chessboard :onPromotion="promote"/>
    promote() {
      return 'r' // This will promote to a rook
    }


    翻译自: https://vuejsexamples.com/chessboard-vue-component-to-load-positions/

    vue父组件加载子组件

    展开全文
  • Vue 异步加载组件

    2019-07-17 15:17:02
    VUE2组件加载浅析 VUE+Webpack 实现懒加载的三种方式 路由懒加载 Vue官方写法 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export function createRouter () { return new Router({...

    文章参考

    1. VUE2组件懒加载浅析
    2. VUE+Webpack 实现懒加载的三种方式
    3. 路由懒加载

    问题描述

    在工作中,要实现一个‘打印’的功能,结果打印内容显示出来大概需要40秒。
    由于我是做的单页面,代码打包之后大概有8M左右的样子,因此浏览器会先加载这8M的代码,然后根据逻辑和CSS渲染出需要打印的页面,对浏览器来说非常耗资源(CPU和内存),因此,采取的优化方式是对组件采用异步加载的方式

    Vue异步加载组件API

    Vue.component('async-example', function (resolve, reject) {
      setTimeout(function () {
        // 向 `resolve` 回调传递组件定义
        resolve({
          template: '<div>I am async!</div>'
        })
      }, 1000)
    })
    

    全局注册加载组件 AMD规范

    Vue.component('async-webpack-example', function (resolve) {
      // 这个特殊的 `require` 语法将会告诉 webpack
      // 自动将你的构建代码切割成多个包,这些包
      // 会通过 Ajax 请求加载
      require(['./my-async-component'], resolve)
    })
    

    全局注册加载组件 commonjs(CMD)写法

    Vue.component(
      'async-webpack-example',
      // 这个 `import` 函数会返回一个 `Promise` 对象。
      () => import('./my-async-component')
    )
    

    局部注册加载组件

    new Vue({
      // ...
      components: {
        'my-component': () => import('./my-async-component')
      }
    })
    

    Vue官方写法

    import Vue from 'vue'
    import Router from 'vue-router'
    Vue.use(Router)
    export function createRouter () {
      return new Router({
        mode: 'history',
        routes: [
          { path: '/', component: () => import('./components/Home.vue') },
          { path: '/item/:id', component: () => import('./components/Item.vue') }
        ]
      })
    }
    

    commonjs写法

    import Vue from 'vue'
    import Router from 'vue-router'
    Vue.use(Router)
    export function createRouter () {
      return new Router({
        mode: 'history',
        routes: [
          { path: '/', component: resolve => require(['./components/Home.vue'],resolve) },
          { path: '/item/:id', component: resolve => require(['./components/Item.vue'],resolve) }
        ]
      })
    }
    

    使用建议

    建议使用Vue官方推荐的使用方法,如果对第二种commonJS写法不理解,就需要了解Nodejs中require的用法

    展开全文
  • 1. 需求描述 最近开发的一个项目,涉及到这样一个需求:随着项目的不断推进,后台管理...Vue加载组件主要有正常加载和懒加载,示例代码如下: //正常加载 import index from '../pages/index.vue' import view from '
  • Vue SSR 组件加载问题

    2020-08-27 14:53:48
    主要介绍了Vue SSR 组件加载问题,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • vue动态加载组件

    2020-05-12 15:50:17
    vue动态加载组件 < component > 我的应用场景是: 点击播放图标,文件传入红色方框的播放器中进行播放 代码实现为下: 父组件: html is的属性值决定要显示的组件,所以将is的属性值设置为data中的值,以便于动态...
  • vue 鼠标滚动 加载组件 Vue-scroll-loader (vue-scroll-loader) A scroll loading component for vue.js. vue.js的滚动加载组件。 View demo 查看演示 Download Source 下载源 安装 (Install) NPM npm install ...
  • vue 远程js 组件加载 提示加载 (vue-... 一个vuejs加载组件。 View demo 查看演示 Download Source 下载源 安装 (Install) npm i @nulldreams/vue-loading npm i @nulldreams/vue-loading 如何使用 (How ...
  • vue加载天气组件

    千次阅读 2020-07-07 18:32:21
    vue中使用 首先我们进入中国天气网生成一段代码 根据需要设置天气样式 复制并修改生成的这段代码到vue中 将script引入 修改为vue的动态引入方法 <template> <div id="weater"> <div id=...
  • vue异步加载组件

    2019-07-23 17:30:12
    1、通常我们这样加载组件, import JobNumInformation from "@/components/views/order-center/orderlist/JobNumInformation" 然后在components中注册下,这样我们就可以在当前页面使用这个组件了 components{ ...
  • vue异步组件加载

    2018-07-06 09:53:00
    vue异步组件加载 转载于:https://www.cnblogs.com/jeffweb/p/9271998.html
  • 今天给大家分享一个超极致的Vue.js图片延迟加载组件VueLazyload。vue-lazyload 基于Vue封装的图片懒加载组件。github ★ 高达6.4K+,完美支持主流浏览器,流畅的加载速度和减轻服务器负载。安装$ npm i vue-lazyload...
  • vue 异步组件加载

    2018-10-10 22:58:39
    异步组件加载vue打包后会生成app.js这里包含了所有的组件和业务逻辑,会在app运行时同步加载所有组件,而一些大型项目有很多组件和复杂的业务逻辑,此时就可以使用异步组件加载的方式,需要哪个组件加载哪个组件...
  • vue-单文件Vue组件及webpack配置vue组件加载器 目录 文章目录1、vue单文件组件1.1、传统组件问题和解决方案1.1.1、问题1.1.2、解决方案2、vue单文件组件的基本用法3、vue单文件示例4、webpack中配置vue组件加载器*...
  • 有时我们在mouted方法中想通过id读取到一个dom元素,虽然官方并不推荐这种方法来...所以用document.getelementId 是无法获取到该元素的解决方法在vue文档中 关于的自定义指示器中有这么一段话通过自定义指示器的ins...
  • Vue组件分割 动态加载组件

    千次阅读 2018-05-22 11:54:30
    vue官网有异步加载组件,我在laravel里面试了下,没成功,可能是laravel的webpack配置问题。laravel的webpack配置太长不看。(可以的话laravel+vue的项目,可以考虑不用laravel自带的vue配置,自己重新弄个vue的前端...
  • vue 根据组件地址动态加载异步组件

    千次阅读 2019-05-05 18:15:48
    要求:根据列表中配置的组件地址,动态加载组件(webpart) vue 根据组件地址动态加载异步组件目录结构index.htmlcomponents/component1components/component2components/component3 目录结构 index.html components...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,855
精华内容 2,342
关键字:

vue加载组件

vue 订阅