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