vue介紹 ~ 之官網(wǎng) (這個需要整合對應的vue基礎等重疊內(nèi)容)

Vue.js(讀音 /vju?/, 類似于 view) 是一套構建用戶界面的 漸進式框架

(1)Vue 采用自底向上增量開發(fā)的設計 ; 何為:自底向上???
Vue 的核心庫只關注視圖層,并且非常容易學習,非常容易與其它庫或已有項目整合。
(2)Vue 完全有能力驅動采用單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫開發(fā)的復雜單頁應用。
https://github.com/vuejs/awesome-vue#libraries--plugins vue 生態(tài)系統(tǒng)支持的庫
http://cn.vuejs.org/v2/guide/single-file-components.html 單文件(vue教程主頁)

Vue.js 的目標:通過盡可能簡單的 API 實現(xiàn)響應的數(shù)據(jù)綁定和組合的視圖組件.
實現(xiàn)了view+model的綁定
[和其他框架的對比](http://cn.vuejs.org/v2/guide/comparison.html vue)

引入vue.js
<script src="https://unpkg.com/vue/dist/vue.js"></script>

vue 學習的前提知識:html+css + javascript
安裝可以參考:
http://www.itdecent.cn/p/eda22fa7b12a
http://www.itdecent.cn/p/82eaeda8adcf

PS: 不推薦新手直接使用 vue-cli,尤其是對 Node.js 構建工具不夠了解的同學。
那么新手應該是怎么創(chuàng)建呢???

1、 聲明式渲染
Vue.js 的核心是一個允許你采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進 DOM 的系統(tǒng):
(也就是:通過模板將數(shù)據(jù)渲染到html的dom系統(tǒng)中)


將下面的app渲染到上面的id="app"中

上面看起來單單渲染一個字符串模板非常類似,但是vue.js 在背后做了大量工作。
這樣,數(shù)據(jù)和dom已經(jīng)被綁定在一起,所有的元素都是響應式的。
(過瀏覽器打開,修改app.message)

官網(wǎng)解釋修改,還是沒有修改成功

除了綁定插入的文本內(nèi)容,我們還可以采用這樣的方式綁定 DOM 元素屬性:


VM綁定數(shù)據(jù)

這里的 v-bind 屬性被稱為 “指令”;
指令帶有前綴 v- ,表示它們是Vue.js提供的特殊屬性;它們會在渲染過得dom上應用特殊的相應行為。簡單含義是:將這個元素節(jié)點的title屬性和Vue實例的message屬性綁定到一起。
***打開瀏覽器的控制臺輸入 app2.message = 'some new message',你就會再一次看到這個綁定了title屬性的HTML已經(jīng)進行了更新。
這個沒有實驗到。/(ㄒoㄒ)/~~

里面的div兩個同時并列會出現(xiàn)錯誤

顯示結果,所以只能夠有一個div開頭

&&&####
數(shù)據(jù)綁定沒有成功;需要進一步進行研究/(ㄒoㄒ)/~~

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

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

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