emmm,斷斷續(xù)續(xù)學(xué)了一點vue，所有又到此來更新了。我是最近把官網(wǎng)文檔基本看了一遍，上面的代碼也跟著敲了一些。做了一些小例子，下面寫一點自己學(xué)到的一些東西。
先講一些模版語法吧
1.v-bind指令
一些指令能夠接收一個“參數(shù)”，在指令名稱之后以冒號表示。例如，v-bind 指令可以用于響應(yīng)式地更新 HTML 屬性：
<a v-bind:herf="url">....</a>? 這個可以縮寫為<a :href="url">...</a>
在這里 href 是參數(shù)，告知 v-bind 指令將該元素的 href 屬性與表達(dá)式 url 的值綁定
另一個例子是 v-on 指令，它用于監(jiān)聽 DOM 事件：
<a v-on:click="doSomething">...</a> 這個可以縮寫為<a @click="doSomething">...</a>
2.v-if指令
<p v-if="seen">現(xiàn)在你看到我了<p>
這里，v-if 指令將根據(jù)表達(dá)式 seen 的值的真假來插入/移除 <p>元素
v-show 跟v-if差不多也是通過后面的值的真假來看是否顯示這個標(biāo)簽
3.v-model指令
在 input 輸入框中我們可以使用 v-model 指令來實現(xiàn)雙向數(shù)據(jù)綁定：
<input type="text" v-model="message" placeholder="Hello Vue">
<p>{{message}}</p>
4.class屬性綁定
我們可以為v-bind:class設(shè)置一個對象，從而動態(tài)的切換class
<div v-bind:class="{active: isActive}"></div>,active在style中設(shè)定屬性，根據(jù)vue里面data中的isActive的真假決定是否用active這個樣式
5.v-for
接下來講一下比較麻煩的列表渲染吧
v-for指令需要使用 item in items 形式的特殊語法，items 是源數(shù)據(jù)數(shù)組并且 item 是數(shù)組元素迭代的別名。它可以對數(shù)組，對象，和模版進(jìn)行渲染，展示一個數(shù)組的吧
結(jié)果是
后面根據(jù)前面那些語法綜合寫了一個小demo，一個留言板
這里可以看見最上面兩個input用v-model將數(shù)據(jù)綁定，然后我在data里面是放了一個數(shù)組，用來存輸入的數(shù)據(jù)，添加那個按鈕通過@click=“add”，然后在vue的methods里寫入add這個方法
一點擊，就會把數(shù)據(jù)存在myData這個數(shù)組中，然后下面是寫了一個表格，將數(shù)組中的數(shù)據(jù)渲染到表格中
最后來講講動畫吧，因為看著比較好玩，就學(xué)了一下
6.動畫
<transition name="fade">運動的東西</transition>
class定義：
.fade-enter{}//初始狀態(tài)? .fade-enter-active{}//變化成什么樣—> 當(dāng)元素出來顯示
.fade{}? ? .fade-leave-active{}//變成什么樣 —>當(dāng)元素離開消失
由于自己寫的動畫不好看，官網(wǎng)也推薦了可以用animate.css，所以我就去官網(wǎng)下來animate然后把它引入到文件里
