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