開始吧...
這一節(jié)簡(jiǎn)單的介紹了vue的一個(gè)基本概念.
- 學(xué)習(xí)vue需要的基礎(chǔ)知識(shí)是一些模塊化的思想和ES6的一些語法.
優(yōu)點(diǎn)
- 數(shù)據(jù)驅(qū)動(dòng)
- 組件化
我們根據(jù)官網(wǎng)的教程來寫得一個(gè)第一個(gè)案例就可以發(fā)現(xiàn)vuejs作為MVVM框架他的使用很簡(jiǎn)單,很容易上手.
<body>
<div id="element">
<!--插值--> {{helloWorld}}
<br/>
<input type="text" v-model="helloWorld"/>
</div>
<!--導(dǎo)入vue的框架-->
<script src="http://cdn.bootcss.com/vue/1.0.25/vue.js"></script>
<script type="text/javascript">
//創(chuàng)建一個(gè)vue.js的實(shí)例對(duì)象
new Vue({
el:"#element",
data:{
helloWorld:"Hello！World!",
}
});
</script>
</body>
代碼分析:
創(chuàng)建了一個(gè)vue的實(shí)例,然后通過el屬性來綁定DOM元素,限定該實(shí)例的一個(gè)作用范圍.data屬性來作為數(shù)據(jù)model.通過{{}}(插值)來將數(shù)據(jù)模型渲染到Dom上(也就是View層).通過表單元素的指令v-model來將是圖層的DOM節(jié)點(diǎn)和數(shù)據(jù)模型進(jìn)行綁定,
2.vue的一個(gè)組件
上面我們講了VUE的核心思想就是數(shù)據(jù)驅(qū)動(dòng)和組件化.任何一個(gè)頁面都可以被抽象成由多個(gè)組件組合而成的一個(gè)東西.這里我們學(xué)習(xí)一下vue.js的組件的基本構(gòu)成,見下圖所示:
一個(gè)vue.js的組件構(gòu)成.png
很容易知道
<template></template>是組件的模板,<script></script>是組件的邏輯.<style></style>是組件的樣式.這樣將模板,樣式,邏輯寫在一個(gè).vue后綴文件里面的東西就叫做vue的一個(gè)組件.
小節(jié)總結(jié)
上面我們簡(jiǎn)單的學(xué)習(xí)了vue.js的一個(gè)寫法,他的核心思想:數(shù)據(jù)驅(qū)動(dòng)和組件開發(fā)模式.都是很有意思的改變.讓前端開發(fā)更加的迅速,更加的敏捷.
