整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
Vue.js中，`:class` 和 `:style` 是用于動態設置HTML元素的class和style屬性的指令。它們用于根據數據綁定在模板中設置元素的樣式和類。
1. class` 指令：
`:class` 指令用于動態綁定元素的class。你可以使用一個對象、數組、或計算屬性來設置元素的class。它的基本用法如下：
<template>
<div :class="{ active: isActive, error: hasError }">Dynamic Class</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
hasError: false,
};
},
};
</script>在上述示例中，`:class` 指令會根據`isActive`和`hasError`的值來動態設置元素的class，如果`isActive`為true，元素會有`active` class，如果`hasError`為true，元素會有`error` class。
2 :style` 指令
`:style` 指令用于動態設置元素的內聯CSS樣式。你可以使用一個對象或計算屬性來設置元素的style。它的基本用法如下：
<template>
<div :style="{ color: textColor, fontSize: fontSize + 'px' }">Dynamic Style</div>
</template>
<script>
export default {
data() {
return {
textColor: 'red',
fontSize: 16,
};
},
};
</script>在上述示例中，`:style` 指令會根據`textColor`和`fontSize`的值來動態設置元素的顏色和字體大小。
區別：
- `:class` 用于設置元素的class屬性，可以根據條件來切換類。
- `:style` 用于設置元素的內聯樣式，可以動態設置CSS屬性的值。
- `:class` 可以接受一個對象、數組、或計算屬性來設置類，而 `:style` 只能接受一個對象。
- `:class` 常用于切換不同的樣式類，而 `:style` 常用于動態更改單個或多個CSS屬性的值。
你可以根據具體的需求選擇使用哪個指令來管理元素的樣式。通常，`:class` 用于切換類，而 `:style` 用于處理更具體的樣式設置。
功的意義不在于你取得多大的成就，也不在于你有多么的偉大。因為，成功總會與努力過的人握手，只要享受了努力的過程，我們就不是失敗者。
命名
通常，使用 functionNamesLikeThis, variableNamesLikeThis, ClassNamesLikeThis, EnumNamesLikeThis, methodNamesLikeThis 和 SYMBOLIC_CONSTANTS_LIKE_THIS 。具體如下：
屬性和方法
文件或類中的私有屬性，變量和方法名應該以下劃線 "_" 開頭；
保護屬性, 變量和方法名不需要下劃線開頭，和公共變量名一樣。
方法和函數參數
可選參數以 opt_ 開頭；
函數的參數個數不固定時，應該添加最后一個參數 var_args 為參數的個數。你也可以不設置 var_args 而取代使用 arguments；
可選和可變參數應該在 @param 標記中說明清楚。
雖然這兩個規定對編譯器沒有任何影響，但還是請盡量遵守。
Getters 和 Setters
Getters 和 setters 并不是必要的。但只要使用它們了，就請將 getters 命名成 getFoo() 形式，將 setters 命名成 setFoo(value) 形式。(對于布爾類型的 getters，使用 isFoo() 也可。)
命名空間
JavaScript 不支持包和命名空間。
不容易發現和調試全局命名的沖突，多個系統集成時還可能因為命名沖突導致很嚴重的問題。為了提高 JavaScript 代碼復用率，我們遵循下面的約定以避免沖突。
為全局代碼使用命名空間
在全局作用域上，使用一個唯一的，與工程/庫相關的名字作為前綴標識。比如：你的工程是 "Project Sloth", 那么命名空間前綴可取為 sloth.* 。
var sloth = {};
sloth.sleep = function() {
...
};
明確命名空間所有權
當選擇了一個子命名空間，請確保父命名空間的負責人知道你在用哪個子命名空間。比如說, 你為工程 'sloths' 創建一個 'hats' 子命名空間, 那確保 Sloth 團隊人員知道你在使用 sloth.hats.
外部代碼和內部代碼使用不同的命名空間
"外部代碼" 是指來自于你代碼體系的外部，可以獨立編譯。內外部命名應該嚴格保持獨立。如果你使用了外部庫，他的所有對象都在 foo.hats.* 下，那么你自己的代碼不能在 foo.hats.* 下命名，因為很有可能其他團隊也在其中命名。
重命名那些名字很長的變量，提高可讀性
主要是為了提高可讀性。局部空間中的變量別名只需要取原名字的最后部分。
/**
* @constructor
*/
some.long.namespace.MyClass = function() {
};
/**
* @param {some.long.namespace.MyClass} a
*/
some.long.namespace.MyClass.staticHelper = function(a) {
...
};
myapp.main = function() {
var MyClass = some.long.namespace.MyClass;
var staticHelper = some.long.namespace.MyClass.staticHelper;
staticHelper(new MyClass());
};
不要對命名空間創建別名
myapp.main = function() {
var namespace = some.long.namespace;
namespace.MyClass.staticHelper(new namespace.MyClass());
};
不要在全局范圍內創建別名，而僅在函數塊作用域中使用。
myapp.main = function() {
var MyClass = some.long.namespace.MyClass;
MyClass.staticHelper(null);
};
文件名
文件名應該使用小寫字符，以避免在有些系統平臺上不識別大小寫的命名方式。文件名以 .js 結尾，不要包含除 - 和 _ 外的標點符號(使用 - 優于 _)。
自定義 toString() 方法
可自定義 toString() 方法，但確保你的實現方法滿足：（1）總是成功；（2）沒有其他負面影響。如果不滿足這兩個條件，那么可能會導致嚴重的問題。比如：如果 toString() 調用了包含 assert 的函數，assert 輸出導致失敗的對象，這在 toString() 也會被調用。
延遲初始化
可以延遲變量的初始化，沒有必要在每次聲明變量時就將其初始化。
明確作用域
任何時候都要明確作用域，以提高可移植性和清晰度。
例如，不要依賴于作用域鏈中的 window 對象。可能在其他應用中，你函數中的 window 不是指之前的那個窗口對象。
代碼格式化
大括號
分號會被隱式插入到代碼中，所以你務必在同一行上插入大括號。例如：
if (something) {
// ...
} else {
// ...
}
數組和對象的初始化
如果初始值不是很長，就保持寫在單行上：
var arr = [1, 2, 3]; // No space after [ or before ].
var obj = {a: 1, b: 2, c: 3}; // No space after { or before }.
初始值占用多行時，縮進2個空格：
// Object initializer.
var inset = {
top: 10,
right: 20,
bottom: 15,
left: 12
};
// Array initializer.
this.rows_ = [
'"Slartibartfast" ',
'"Zaphod Beeblebrox" ',
'"Ford Prefect" ',
'"Arthur Dent" ',
'"Marvin the Paranoid Android" ',
'the.mice@magrathea.com'
];
// Used in a method call.
goog.dom.createDom(goog.dom.TagName.DIV, {
id: 'foo',
className: 'some-css-class',
style: 'display:none'
}, 'Hello, world!');
比較長的標識符或者數值，不要為了讓代碼好看些而手工對齊：
CORRECT_Object.prototype = {
a: 0,
b: 1,
lengthyName: 2
};
//不要這樣做
WRONG_Object.prototype = {
a : 0,
b : 1,
lengthyName: 2
};
函數參數
盡量讓函數參數在同一行上。如果一行超過 80 字符，每個參數獨占一行，并以4個空格縮進，或者與括號對齊，以提高可讀性。盡可能不要讓每行超過80個字符。
// Four-space, wrap at 80. Works with very long function names, survives
// renaming without reindenting, low on space.
goog.foo.bar.doThingThatIsVeryDifficultToExplain = function(
veryDescriptiveArgumentNumberOne, veryDescriptiveArgumentTwo,
tableModelEventHandlerProxy, artichokeDescriptorAdapterIterator) {
// ...
};
// Four-space, one argument per line. Works with long function names,
// survives renaming, and emphasizes each argument.
goog.foo.bar.doThingThatIsVeryDifficultToExplain = function(
veryDescriptiveArgumentNumberOne,
veryDescriptiveArgumentTwo,
tableModelEventHandlerProxy,
artichokeDescriptorAdapterIterator) {
// ...
};
// Parenthesis-aligned indentation, wrap at 80. Visually groups arguments,
// low on space.
function foo(veryDescriptiveArgumentNumberOne, veryDescriptiveArgumentTwo,
tableModelEventHandlerProxy, artichokeDescriptorAdapterIterator) {
// ...
}
// Parenthesis-aligned, one argument per line. Emphasizes each
// individual argument.
function bar(veryDescriptiveArgumentNumberOne,
veryDescriptiveArgumentTwo,
tableModelEventHandlerProxy,
artichokeDescriptorAdapterIterator) {
// ...
}
傳遞匿名函數
如果參數中有匿名函數，函數體從調用該函數的左邊開始縮進2個空格，而不是從 function 這個關鍵字開始。這讓匿名函數更加易讀 (不要增加很多沒必要的縮進讓函數體顯示在屏幕的右側)。
var names = items.map(function(item) {
return item.name;
});
prefix.something.reallyLongFunctionName('whatever', function(a1, a2) {
if (a1.equals(a2)) {
someOtherLongFunctionName(a1);
} else {
andNowForSomethingCompletelyDifferent(a2.parrot);
}
});
更多的縮進
事實上，除了初始化數組和對象，和傳遞匿名函數外，所有被拆開的多行文本要么選擇與之前的表達式左對齊，要么以4個(而不是2個)空格作為一縮進層次。
someWonderfulHtml = '' +
getEvenMoreHtml(someReallyInterestingValues, moreValues,
evenMoreParams, 'a duck', true, 72,
slightlyMoreMonkeys(0xfff)) +
'';
thisIsAVeryLongVariableName =
hereIsAnEvenLongerOtherFunctionNameThatWillNotFitOnPrevLine();
thisIsAVeryLongVariableName = siblingOne + siblingTwo + siblingThree +
siblingFour + siblingFive + siblingSix + siblingSeven +
moreSiblingExpressions + allAtTheSameIndentationLevel;
thisIsAVeryLongVariableName = operandOne + operandTwo + operandThree +
operandFour + operandFive * (
aNestedChildExpression + shouldBeIndentedMore);
someValue = this.foo(
shortArg,
'Some really long string arg - this is a pretty common case, actually.',
shorty2,
this.bar());
if (searchableCollection(allYourStuff).contains(theStuffYouWant) &&
!ambientNotification.isActive() && (client.isAmbientSupported() ||
client.alwaysTryAmbientAnyways())) {
ambientNotification.activate();
}
空行
使用空行來劃分一組邏輯上相關聯的代碼片段。
doSomethingTo(x);
doSomethingElseTo(x);
andThen(x);
nowDoSomethingWith(y);
andNowWith(z);
二元和三元操作符
操作符始終跟隨著前行，這樣就不用顧慮分號的隱式插入問題。如果一行實在放不下，還是按照上述的縮進風格來換行。
var x = a ? b : c; // All on one line if it will fit.
// Indentation +4 is OK.
var y = a ?
longButSimpleOperandB : longButSimpleOperandC;
// Indenting to the line position of the first operand is also OK.
var z = a ?
moreComplicatedB :
moreComplicatedC;
括號
括號只在需要的時候使用。
不要濫用括號，只在必要的時候使用它。
對于一元操作符(如 delete, typeof 和 void )，或是在某些關鍵詞(如 return, throw, case, new )之后，不要使用括號。
字符串
使用 單引號(') 優于 雙引號(") 。
var msg = 'This is some HTML';
可見性
用 @private 和 @protected 來指名類、函數、屬性的可見性。
標記為 @private 的全局變量和函數，表示他們只能在當前文件中訪問。
標記為 @private 的構造函數，表示該類只能在當前文件或是其靜態/普通成員中實例化。私有構造函數的公共靜態屬性在當前文件的任何地方都可訪問，通過 instanceof 操作符也可。
永遠不要為全局變量，函數，構造器加 @protected 標記。
// File 1.
// AA_PrivateClass_ and AA_init_ are accessible because they are global
// and in the same file.
/**
* @private
* @constructor
*/
AA_PrivateClass_ = function() {
};
/** @private */
function AA_init_() {
return new AA_PrivateClass_();
}
AA_init_();
標記為 @private 的屬性，在當前文件中可訪問它。如果是類屬性私有，"擁有"該屬性的類的所有靜態/普通成員也可訪問，但它們不能被不同文件中的子類訪問或覆蓋。
標記為 @protected 的屬性，在當前文件中可訪問它。如果是類屬性私有，那么"擁有"該屬性的類及其子類中的所有靜態/普通成員也可訪問。
// File 1.
/** @constructor */
AA_PublicClass = function() {
};
/** @private */
AA_PublicClass.staticPrivateProp_ = 1;
/** @private */
AA_PublicClass.prototype.privateProp_ = 2;
/** @protected */
AA_PublicClass.staticProtectedProp = 31;
/** @protected */
AA_PublicClass.prototype.protectedProp = 4;
// File 2.
/**
* @return {number} The number of ducks we've arranged in a row.
*/
AA_PublicClass.prototype.method = function() {
// Legal accesses of these two properties.
return this.privateProp_ + AA_PublicClass.staticPrivateProp_;
};
// File 3.
/**
* @constructor
* @extends {AA_PublicClass}
*/
AA_SubClass = function() {
// Legal access of a protected static property.
AA_PublicClass.staticProtectedProp = this.method();
};
goog.inherits(AA_SubClass, AA_PublicClass);
/**
* @return {number} The number of ducks we've arranged in a row.
*/
AA_SubClass.prototype.method = function() {
// Legal access of a protected instance property.
return this.protectedProp;
};
這是小編的一部分總結，有想看下面的內容點播關注哦，等待小編的更新，有想學習前端的伙伴可以私信我！
tyle 屬性用于改變 HTML 元素的樣式。
<html>
<body style="background-color:PowderBlue;">
<h1>Look! Styles and colors</h1>
<p style="font-family:verdana;color:red">
This text is in Verdana and red</p>
<p style="font-family:times;color:green">
This text is in Times and green</p>
<p style="font-size:30px">This text is 30 pixels high</p>
</body>
</html>
HTML 的 style 屬性
style 屬性的作用：
提供了一種改變所有 HTML 元素的樣式的通用方法。
樣式是 HTML 4 引入的，它是一種新的首選的改變 HTML 元素樣式的方式。通過 HTML 樣式，能夠通過使用 style 屬性直接將樣式添加到 HTML 元素，或者間接地在獨立的樣式表中（CSS 文件）進行定義。
不贊成使用的標簽和屬性
在 HTML 4 中，有若干的標簽和屬性是被廢棄的。被廢棄（Deprecated）的意思是在未來版本的 HTML 和 XHTML 中將不支持這些標簽和屬性。
這里傳達的信息很明確：請避免使用這些被廢棄的標簽和屬性！
應該避免使用下面這些標簽和屬性：
HTML 樣式實例 - 背景顏色
background-color 屬性為元素定義了背景顏色：
<html> <body style="background-color:yellow"> <h2 style="background-color:red">This is a heading</h2> <p style="background-color:green">This is a paragraph.</p> </body> </html>
HTML 樣式實例 - 字體、顏色和尺寸
font-family、color 以及 font-size 屬性分別定義元素中文本的字體系列、顏色和字體尺寸：
<html> <body> <h1 style="font-family:verdana">A heading</h1> <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> </body> </html>
HTML 樣式實例 - 文本對齊
text-align 屬性規定了元素中文本的水平對齊方式：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
