如何在vue中引入第三方jquery,swiper等庫(一)
以前習慣性是引用jQuery,bootstrap。。。庫,但是不會引用,怎麼辦?
npm install swiper--save-dev (或者 npm install jquery -D)
一 .引入swiper(全域性,區域性)
- 方法一:全域性引入,也是最暴力的,但是也是有好處壞處(同時載入,但是不能保證同時下載)
<link href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js" ></script>
元件中可以直接使用的swiper了
_initSwiper() {
const container = this.$refs.swiper;
const config = {
effect: 'coverflow',
slidesPerView: 'auto',
centeredSlides: true,
initialSlide: this.activeIndex,
loop: true,
autoplay: 1000 ,
speed: 1000,
coverflow: {
rotate: 0,
stretch: -30,
depth: 100,
modifier: 0.7,
slideShadows: false,
},
};
this.mySwiper = new Swiper(container, config);
}
2.方法二:main.js 中
import '../node_modules/swiper/dist/css/swiper.min.css' ;
import 'swiper';
執行上面的_initSwiper()的方法 即可
3.方法三:區域性的引入的,有時只想的單個元件中使用某一個的庫,方法如下
<section ref="swiper" class="swiper-container">
<div class="swiper-wrapper">
<div class="demo swiper-slide" v-for="item in colorList" :style="`backgroundColor:${item}`"></div>
</div>
</section>
<script>
let swiperAsync = import('swiper') //引入的swiper.js(node_modules)的方法
export default {
data(){
return {
colorList: ['red', 'yellow', 'gray', 'pink']
}
},
methods: {
async _initSwiper() {
let Swiper = await swiperAsync; //非同步載入的
const container = this.$refs.swiper; //ref='swiper'
const config = { //swiper的引數配置
effect: 'coverflow',
slidesPerView: 'auto',
centeredSlides: true,
initialSlide: this.activeIndex,
loop: true,
autoplay: 1000,
speed: 1000,
coverflow: {
rotate: 0,
stretch: -30,
depth: 100,
modifier: 0.7,
slideShadows: false,
},
};
this.mySwiper = new Swiper(container, config);
},
},
mounted(){
this._initSwiper();
}
}
</script>
<style lang="scss" scoped>
/*@import '../assets/styles/swiper.min.css'; !*靜態資源的檔案*!*/
@import '../../node_modules/swiper/dist/css/swiper.min.css';
</style>
二 引入的jquery的方法
- 全域性的方法
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
元件中可以直接使用的 ‘$’的方法
- 區域性的方法:
npm install jquery -D
需要使用的元件中引入
import $ from 'jquery'
相關推薦
如何在vue中引入第三方jquery,swiper等庫(一)
以前習慣性是引用jQuery,bootstrap。。。庫,但是不會引用,怎麼辦? npm install swiper--save-dev (或者 npm install jquery -D) 一 .引入swiper(全域性,區域性) 方法一:全
詳解vue中的元件通訊的幾種方式(一)
在另一篇文章我們會談及祖父孫三級之間的通訊,傳送門:vue元件通訊的方式(二) 1.父元件向子元件傳值(繫結屬性): 首先我們定義一個父元件father.vue: <template> <div> <h1>父元件</h1
VUE中引入第三方JS
OS 對象 oca 騰訊 地圖 assets 引入 vue bsp 1、若第三方中的對象或者方法,已經暴露出來(export),則可以直接引用,比如: import ‘../../../common/geolocation.min.js‘; // 引入騰訊地圖前端定位組
vue中給buttion按鈕添加鍵盤回車(enter)事件
key pan created date() tel pre prim nts add 一、給button按鈕綁定@keyup.enter <div class="btn"> <Button type="primary" @click="
vue中mixins的使用方法和注意點(詳)
mixins基礎概況 vue中的解釋是這樣的,如果覺得語言枯燥的可以自行跳過嘿~ 混入 (mixins): 是一種分發 Vue 元件中可複用功能的非常靈活的方式。混入物件可以包含任意元件選項。當元件使用混入物件時,所有混入物件的選項將被混入該元件本身的選項。 怎麼用? 舉個栗子: 定義一個混入
Jquery選擇器遍歷後代等相關(一)
找到表單中所有的 input 元素 HTML 程式碼: <form> <label>Name:</label> <input name="name" /> <fieldset> <label&g
QML State型別,實現狀態切換,圖片切換等效果(一)
QML中所有基於Item的物件都有一個state屬性,依賴於狀態驅動的情況下,都可以用State型別的一組屬性設定: 1. 顯示一些元件而隱藏其他元件; 2. 為使用者呈現不同的動作; 3. 開始、停止或者暫停動畫; 4. 執行一些需要在新的狀態
程式設計中的冪等性(一):http冪等性
一、什麼是冪等性?什麼是冪等操作?冪等:是一個數學概念,表示N次變換和1次變換的結果相同。冪等操作:其特點是任意多次執行所產生的影響均與一次執行的影響相同(不會改變資源狀態,對資料沒有副作用)。冪等性:一系列操作都是冪等操作。冪等介面:冪等介面認為,外部呼叫者會存在多次呼叫的
關於 Vue 中 我對中央事線管理器(enentBus)的誤解
由於這段時間公司比較閒,就對vue 中的一些模糊的點做了一些加強,突然就想到了常掛在嘴邊兄弟元件傳值 我理解的兄弟元件的傳值是可以路由由傳值的,比如我從http://localhost:8080/login 裡面的值可以傳遞到 http://localhost:8080/home 這個頁面
項目中遇到的某些問題及解決辦法(一)
sql () 輸入 包含 查看 定位 管理器 顯示 分布式開發 簡介 該博文記錄了一些平時在工作中遇到的問題及解決辦法,某些問題有解決辦法,某些問題暫時沒有解決辦法,如果有大神知道的,請多多指點。 如果某些問題有更好的解決辦法,也請指教。 正文 1、在一個方
php ,字符串(一)
換行符 字符串連接 回車符 substr 還原 dds ash 結果 操作 1.字符串定義: 字符串是指由0個或多個符合構成的一個集合,這裏所說的字符主要包含以下幾種類型: 數字類型:如 1,2,3,等 字母類型:如a,b,c,d等 特殊字符:如#,$,%,^,&等
數據庫(一),範式
兩個 direct alt 反範式 還需 二維 查詢 block 表拆分 範式 為什麽要用範式 我們在學習關系型數據庫的時候一定有感覺,關系數據庫不就是一個二維表格嗎,那麽數據庫有什麽用? 數據庫看上去像一個表格,其實不然,比如如下的訂單表,一個訂單號X2001對應一個用戶
Vue+Websocket實現多人在線王者飛機(一)
Vue requestAnimationFra 飛機大戰 WebSocket 看了Vue官方教程(貌似和自己寫的框架差別不大,聽前前端同事一直吹Vue,於是學習了一下,和自己寫的框架好像也沒強哪裏去嘛,就是要傲嬌哈哈),等有空也整理自己的框架,開源好了),想找個項目練練手(沒找到好的),就寫個
解析Java中的String、StringBuilder、StringBuffer類(一)
world! index ret ofb body 理解 rgs private 引入 引言 String 類及其相關的StringBuilder、StringBuffer 類在 Java 中的使用相當的多,在各個公司的面試中也是必不可少的。因此,在本周,我打算花費一些時間
輕松了解Spring中的控制反轉和依賴註入(一)
xml文件 span 做到 添加 resource exce http 實的 name 原文轉自:https://www.cnblogs.com/xxzhuang/p/5948902.html 我們回顧一下計算機的發展史,從最初第一臺計算機的占地面積達170平方米,重達
運維工作中經常用到的一些知識總結(一)
Linux Docker MFS在日常運維工作中,會有一些知識使用頻率較高,以下為個人在工作中常用的一些操作,沒有做詳細的分類,排版比較淩亂。有需要的同學們可以參考,希望能有所幫助。 1、查看當前系統所以變量 sysctl -a 2、修改Centos7 網卡為eth install centos 7 按 ta
專案中常用的讀取配置檔案的方式(一)
package com.bjpowernode.demo01; import java.util.ResourceBundle; /** ResourceBundle讀取配置檔案 @author Administrator */ public clas
想高效開發小程式,mpvue瞭解下(一)
序言 小程式一定是今年熱門話題之一,對於我們開發者來講,開發小程式也是屬於我們的技能之一了。從去年我也玩過小程式,但當時處於內測的階段,各種反人類的設計都有,連es6都不支援,只能說瞎折騰了。到了如今,小程式迎來春天,友好度提高了不少,wepy、taro與mpvue的出現也帶來更高的開發
vue.js+element實現簡單的後臺管理系統(一)
最近公司趕專案,要求做一個後臺管理系統,靜態半天,介面一天,測試一天。 看了一下需求,10個頁面,16+介面,雖說調取資料的比較多,實際寫起來感覺東西還是蠻多的,也在網上查閱了很多資料,感覺都是一些開箱即用的後臺管理系統,一開始我也是想拿來修改一下就好,結果看了好幾個github上面的,感覺並不是很貼合需求
【Spark核心原始碼】內建的RPC框架,Spark的通訊兵(一)
目錄 RPC上下文TransportContext RPC配置TransportConf RPC客戶端工廠TransprotClientFactory RPC服務端TransportServer 作為一個分散式計算引擎,既然是分散式,那麼網路通訊是肯定少不了的,在Spark中