vue 指令 data命名限制

.vue檔案中template內模板語法 1、只能存在單行語句(不能是函式if-else等) } (1)不能解析字串中的標籤 (2)不能放在標籤上 2、v-once指令確保標籤中的內容只計算一次,然後快取下來 (1)只能渲染一次,相當於const (2)直接在標籤中使用 ...2.5、v-text指令標籤中有內容腳手架環境會報錯 3、v-html指令 (1)解析html標籤,scoped的樣式不會應用在v-html內部,因為那部分html沒有被vue的模板編譯器處理 (2)標籤中有內容腳手架環境會報錯 4、v-bind特性 v-bind:屬性="值" (1)簡寫:將v-bind直接換成: (2)在"值中可通過+內容"或"值+'內容'";拼接字串 (3)修飾符 .camel 將kebab-case attribute名轉換為camelcase。 5、v-pre指令跳過這個元素和它的子元素的編譯過程,即不會去解析變數等,非保留格式的pre標籤 ...6、v-cloak指令這個指令保持在元素上直到關聯元件例項結束編譯當和css一起使用時,可以用來隱藏未編譯的mustache標籤直到元件例項準備完畢。如:[v-cloak] }7、v-is指令解除模板受原生html解析規則的約束,類似於動態2.x中 :is的繫結如:、、和等,對哪些元素可以出現在它們內部有限制,而某些元素(如:、和只能出現在某些其他元素中。條件渲染: 1、v-if指令 v-if='xx' (1)根據條件銷毀或重建 2、v-else指令 (1)在標籤中直接新增v-else (2)搭配v-if使用 3、v-else-if指令 v-else-if='x' (1)配合v-if指令使用 (2)語法和if-else-if相同 4、v-show v-show='x' (1)當值為真時,顯示標籤,切換元素的display (4)同v-if的區別: 1、v-if 是「真正」的條件渲染，因為它會確保在切換過程中條件塊內的事件***和子元件適當地被銷毀和重建。 2、v-if 也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。 3、相比之下，v-show 就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 css 進行切換。一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在執行時條件很少改變，則使用 v-if 較好。列表渲染: 1、v-for v-for='x in 陣列/物件/map/set' v-for='(value,index) in 陣列/物件/map/set' v-for='(value,key,index) in 陣列/物件/map/set' (1)給遍歷的標籤使用v-bind繫結唯一的key,元素復用 :key='唯一值' (2)v-if的優先順序比v-for更高,這意味著v-if將沒有許可權訪問v-for裡的變數 this will throw an error because property "todo" is not defined on instance }修正: this will throw an error because property "todo" is not defined on instance }data命名限制: 以 _ 或 $ 開頭的屬性名不會被元件例項**(即無響應式),因為它們可能和vue內建的property、api方法衝突。可以使用例如vm.$data._property的方式訪問這些 property。 data變成箭頭函式: 如果你為data使用了箭頭函式,則this不會指向這個元件的例項,不過你仍然可以將其實例作為函式的第乙個引數來訪問。

data: vm => ()

**示例：


="hello"
>
}}<
/p>
}'hello'
>
<
/div>
"url"
>
}<
/a>
class
="divclass"
>容器<
/div>
class
="divclass"
>容器2
<
/p>
"flag"
>jeff<
/div>
else
>mike<
/div>
"val==='b'"
>b<
/div>
else-if
="val==='a'"
>a<
/div>
else
>c<
/div>
'flag2'
>tom<
/p>
for=
"name in obj"
>
}<
/li>
<
/ul>
for=
"(item,index) in obj"
>}-
>
}<
/li>
<
/ul>
for=
"(value,key,index) in obj"
>}-
>}-
>
}<
/li>
<
/ul>
<
/div>
<
/template>
export
default
,      arr:}}
}<
/script>
<
!-- add "scoped" attribute to limit css to this component only --
>
h1, h2 
ul li 
a <
/style>

vue 指令 data命名限制

Data包長度限制

Vue自定義指令實現input限制輸入正整數

Vue框架 Vue指令

vue 指令 data命名限制

Data包長度限制

Vue自定義指令實現input限制輸入正整數

Vue框架 Vue指令

相關推薦