大話vue.js數據渲染——談笑間幫你走出vue的迷霧

Vue姿勢解鎖

vue的初次使用姿勢如下,引入vue.js,開闢一個html DOM,實例化vue.js。


大話vue.js數據渲染——談笑間幫你走出vue的迷霧

(一)簡單渲染

大話vue.js數據渲染——談笑間幫你走出vue的迷霧

el: #DOM的id

data:{鍵名:鍵值,鍵名:鍵值……}

鍵名就通過{{ 鍵名 }}渲染進DOM裡!

大話vue.js數據渲染——談笑間幫你走出vue的迷霧

(二)bind綁定

大話vue.js數據渲染——談笑間幫你走出vue的迷霧

通過v-bind:屬性來綁定,值既可以是數組(假如好多的css),也可以是字符串,數字……

大話vue.js數據渲染——談笑間幫你走出vue的迷霧

相當於style="color: red"

(三)v-if綁定

大話vue.js數據渲染——談笑間幫你走出vue的迷霧

大話vue.js數據渲染——談笑間幫你走出vue的迷霧

看到顯示了嘛

大話vue.js數據渲染——談笑間幫你走出vue的迷霧

大話vue.js數據渲染——談笑間幫你走出vue的迷霧

空白一片。v-if對選擇性顯示很有幫助!!!如登陸前後的顯示。

(四)v-for

大話vue.js數據渲染——談笑間幫你走出vue的迷霧

語法:v-for=“條目 in 數組”

大話vue.js數據渲染——談笑間幫你走出vue的迷霧

(五)事件監聽

大話vue.js數據渲染——談笑間幫你走出vue的迷霧

v-on:click=“方法”

通過methods裡的方法名:方法調用

大話vue.js數據渲染——談笑間幫你走出vue的迷霧

(六)雙向綁定

大話vue.js數據渲染——談笑間幫你走出vue的迷霧

很簡單,v-model=‘名’

大話vue.js數據渲染——談笑間幫你走出vue的迷霧

發現了嘛?vue數據渲染裡,只有v-bind和v-on相似。

牢記這些案例,恭喜!vue渲染您已經掌握了。

交流

大話vue.js數據渲染——談笑間幫你走出vue的迷霧


分享到:


相關文章: