vue2.0學習

關(guān)于mvvm/mvc/mv*框架的理解:
前端關(guān)于此類框架更加貼近于后端編程模式,使代碼功能清晰,也更便于理解;
此類框架中用戶對View的操作交給了Controller處理,在Controller中響應(yīng)View的事件調(diào)用Model的接口對數(shù)據(jù)進行操作,一旦Model發(fā)生變化便通知相關(guān)視圖進行更新。
對于vue的mvc處理過程:


mvc.png
1.引用

<script src="js/vue2.5.js" type="text/javascript" charset="utf-8"></script>

2.簡單實例

html代碼塊:
<div id="app">{{ msg }}</div>//綁定數(shù)據(jù)用{{}}
js代碼塊:
var vm = new Vue({
el: '#app',//表示new Vue實例所要控制的區(qū)域(代碼生效區(qū)域)
data:{//存放所有用到的數(shù)據(jù)
msg:'vueDemo'//不用操作DOM就可以將數(shù)據(jù)渲染到頁面中,通過vue指令
}
})

3.解決閃爍問題:

html標簽加v-cloak屬性;在css中定義[v-cloak]{display:none}

4.關(guān)于屬性的綁定:

<input type="button" v-bind:value="val">
data:{
val:'按鈕'
}

1.png

簡寫:<input type="button" :value="val">
這里v-bind將val當變量處理,所以可以拼接字符串等 “val + 'aaaa'”
注意:v-bind不能雙向數(shù)據(jù)綁定,想要實現(xiàn)數(shù)據(jù)雙向綁定用‘{{}}’
.......未完待續(xù)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 前提 前提條件:JS/HTML/CSS基礎(chǔ)扎實。凡事欲速則不達,要穩(wěn)扎穩(wěn)打,步步為營。 起步 1.先擼一遍官方基礎(chǔ)...
    Blacker丶Boom閱讀 845評論 0 0
  • 轉(zhuǎn)摘:http://www.linuxidc.com/Linux/2015-10/124622.htm 前言 做客...
    帥氣的歐巴閱讀 15,704評論 7 92
  • 老黑是村里出了名的光棍漢,父母死的早,老黑從十二歲就是一個人過了。老黑年齡并不大,今年正好三十歲,只是人長得太黑了...
    太行客閱讀 645評論 0 3
  • 白天,似醒似夢的過著。 黑夜,似夢似醒的睡著。 今天,一切憂傷與歡樂,一切榮耀與卑微。 在明天,都是夢幻。
    一桿U閱讀 219評論 3 0
  • 2月7日,炳碩和他姐姐及他姐姐的幾個同學,一起去參加了一個志愿活動。活動的名稱是:暖冬行動,情暖環(huán)衛(wèi)工送溫暖...
    劉志紅123閱讀 308評論 0 2

友情鏈接更多精彩內(nèi)容