.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>
Data包長度限制
很多朋友在寫socket或者mqtt的時候都會存在乙個比較蛋疼菊緊的問題.那就是傳送data包的資料轉換問題,網上可以查到很多資料型別轉換的文章,如nsstring nsdata,byte nsdata,uiimage nsdata等等.但是把nsinteger轉成data的文章卻很少,也很不實用....
Vue自定義指令實現input限制輸入正整數
種一棵樹最好的時間是十年前，其次是現在。誰說的不重要。在做表單時，我們經常會遇到各種input輸入框，例如在設計填寫個數時，要求輸入正整數。如果只是個別輸入框，那麼我們完全可以檢測input的keyup事件，在該事件裡對keyup事件進行操作即可 type text v model value ke...
Vue框架 Vue指令
v cloak 避免螢幕閃爍 class屬性 重點 style屬性 了解 案例 123 data methods 12 3 事件處理 3 v if有家族 v if v else if v else if控制顯隱 你是第1個p 你是第2個p 你是第3個p 案例綠 藍 注意 v for遍歷要依賴於乙個所...