vuejs如何使用css（vue怎麼寫js）

本文目錄一覽：

• 1、vue.js怎麼實現css樣式表按需載入
• 2、Vue如何引入外鏈css和js
• 3、js中用cssText設置css樣式的簡單方法
• 4、09《Vue 入門教程》Vue 過渡 amp; 動畫
• 5、vue.js怎麼動態設置css

vue.js怎麼實現css樣式表按需載入

按需載入，可樣式是寫在.vue模板中的，訪問另一個頁面樣式就會追加到head標籤中，訪問的越多head標籤的style標籤也就越多，即便style標籤加入scoped可以避免樣式衝突:

後來我查了下有使用extract-text-webpack-plugin將css提取合併的。

這個代碼：

import ‘xx.css’ or require(‘xx.css’)

Vue如何引入外鏈css和js

直接在主頁面裡面引入就行，但要注意class名和ID名不要出現重複，因為Vue是單頁面，就是把所有組件都添加到主頁面上進行顯示的，所以引入的路徑也要寫關於主頁面的相對路徑

js中用cssText設置css樣式的簡單方法

如果網頁中一個

id為「no」的標籤，暫且當div標籤來tell；

想要在js中設置這個div的css樣式，很一般的做法是：

var

obj

=

document.getElementByIdx_x_x(‘no’);

obj.style.width

=

‘400px’;

obj.style.height

=

‘300px’;

如果要設置一堆又一堆的css樣式呢，太麻煩了把、

一般情況下都會結合css來添加className或者改變className達到想要的效果，但是如果你create一個元素，難道還想這樣簡單點？那就要想別的辦法了~

於是大家就寫了一個又一個的函數，經典的兩個是：

var

obj

=

document.getElementByIdx_x_x(‘no’);

function

setStyle(obj,

css)

{

for(var

attr

in

obj){

obj.style[attr]

=

css[attr];

}

}

setStyle(obj,{width:”400px”,height:”300px”});

當然還有更簡單的，cssText：

var

obj

=

document.getElementByIdx_x_x(‘no’);

obj.style.cssText

=

“width:400px;

height:300px;”;

當然這種方法對於create的元素初始化css樣式來說很簡單很方便。

以上就是小編為大家帶來的js中用cssText設置css樣式的簡單方法的全部內容了，希望對大家有所幫助，多多支持腳本之家~

09《Vue 入門教程》Vue 過渡 amp; 動畫

本章節我們主要介紹 Vue.js 的過渡效果與動畫效果。包括如何編寫自定義 CSS 動畫、如何配合第三方 CSS 動畫庫、過渡鉤子函數的使用、如何使用第三方 JavaScript 動畫庫。本小節的內容相對之前有些難度，同學們在閱讀一遍之後如果不能完全掌握，建議反覆閱讀，並把本小節的所有案例自己實現一遍，相信通過多次的練習一定可以掌握。

Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果。 包括以下工具： 1、在 CSS 過渡和動畫中自動應用 class； 2、配合使用第三方 CSS 動畫庫，如 Animate.css； 3、在過渡鉤子函數中使用 JavaScript 直接操作 DOM； 4、配合使用第三方 JavaScript 動畫庫，如 Velocity.js。

使用 transition 組件包裹需要使用過渡效果的 DOM 元素。例如：

接下來讓我們先看一個淡入淡出效果的實現代碼：

實例演示

運行案例點擊 “運行案例” 可查看在線運行效果

代碼解釋：

那麼，transition 組件是如何做到這樣的過渡效果的呢？

我想，同學們肯定猜想到當元素切換狀態的時候，我們定義的樣式會作用於標籤元素

。那麼，到底是不是這樣呢？

打開控制台，檢索到

標籤上，我們可以清晰地看到：

實際上 Vue 在元素顯示與隱藏的過渡中，提供了 6 個 class 來切換：

對於這些在過渡中切換的類名來說，如果你使用一個沒有名字的 ，則 v- 是這些類名的默認前綴。如果你使用了 ，那麼 v 會替換為 test-transition。例如：test-transition-enter、test-transition-enter-active、test-transition-leave…

在日常開發中，我們經常會使用 CSS 過渡來實現一些簡單的動畫效果。接下來我們用一個示例來學習如何使用：

實例演示

“運行案例” 可查看在線運行效果

代碼解釋：

同樣，我們可以使用 CSS 動畫來實現元素的過渡效果。CSS 動畫用法類似 CSS 過渡，在過渡的不同階段對應的 Class 會作用於元素。但是在動畫中 v-enter 類名在節點插入 DOM 後不會立即刪除，而是在 animationend 事件觸發時刪除。 相信同學們在日常業務開發中一定使用過 Dialog，接下來我們就使用 CSS 動畫來實現它的過渡效果：

實例演示

“運行案例” 可查看在線運行效果

代碼解釋：

在之前的兩個案例中，我們通過給 transition 設置 name 屬性來指定元素在不同階段的樣式類名，但有時候希望使用自定義的過渡類名，我們可以通過給 transition 設置以下屬性來達到需求：

自定義過渡的類名優先順序高於普通的類名，這樣就能很好地與第三方（如：animate.css）的動畫庫結合使用。

在很多情況下，Vue 可以自動得出過渡效果的完成時機。默認情況下，Vue 會等待其在過渡效果的根元素的第一個 transitionend 或 animationend 事件。然而也可以不這樣設定 —— 比如，我們可以擁有一個精心編排的一系列過渡效果，其中一些嵌套的內部元素相比於過渡效果的根元素有延遲的或更長的過渡效果。

在這種情況下你可以用 組件上的 duration 屬性定製一個顯性的過渡持續時間 (以毫秒計)：

你也可以定製進入和移出的持續時間：

transition 組件在過渡的不同階段會觸發相應的鉤子函數：

這些鉤子函數可以結合 CSS transitions/animations 使用，也可以單獨使用。

當只用 JavaScript 過渡的時候，在 enter 和 leave 中必須使用 done 進行回調。否則，它們將被同步調用，過渡會立即完成。

推薦對於僅使用 JavaScript 過渡的元素添加 v-bind:css=”false” ，Vue 會跳過 CSS 的檢測。這也可以避免過渡過程中 CSS 的影響。

接下來我們來看一個使用鉤子函數和 Velocity.js 實現過渡動畫的例子：

實例演示

“運行案例” 可查看在線運行效果

代碼解釋：

有時候我們希望給元素設置初始渲染的過渡效果，可以通過給 transition 設置 appear 的 attribute ：

這裡默認和進入 / 離開過渡一樣，同樣也可以自定義 CSS 類名：

同樣地，可以使用自定義 JavaScript 鉤子：

接下來我們看一個完整的示例：

實例演示

“運行案例” 可查看在線運行效果

代碼解釋：

本小節我們介紹了如何使用 transition 實現過渡和動畫效果，主要包括以下知識點：

vue.js怎麼動態設置css

template

ul

li v-for=”tab in tabs” :class=”{ ‘is-active’: tab.isSelected}”

a :href=”tab.href” @click=”selectTab(tab)”{{tab.name}}/a

/li

/ul

script

selectTab(selectedTab) {

this.tabs.forEach(tab = {

tab.isSelected = (tab.name == selectedTab.name);

})

}

給每個a標籤綁定一個方法，並傳入當前對象作為參數

當點擊時遍歷所有a標籤，比較當前遍歷對象的某個屬性（例子中的name)與傳入對象的某個屬性

比例結果賦值給一個flag（例子中的isSelected屬性）,由這個flag去控制：class

從而實現數據驅動樣式