vue里的指令

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然后把它引入到文件里

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內容,還有我對于 Vue 1.0 印象不深的內容。關于...
    云之外閱讀 5,074評論 0 29
  • Vue 實例 屬性和方法 每個 Vue 實例都會代理其 data 對象里所有的屬性:var data = { a:...
    云之外閱讀 2,241評論 0 6
  • 1.安裝 可以簡單地在頁面引入Vue.js作為獨立版本,Vue即被注冊為全局變量,可以在頁面使用了。 如果希望搭建...
    Awey閱讀 11,074評論 4 129
  • 作者:任玉敏 十二月,是個多情的季節,風夜,讓書頁里的詞章和故事彌漫著潮濕的氣息。清晨,當第一縷陽光射進溫床,葉子...
    濰科WK閱讀 202評論 0 0
  • 遁入沙門中,冬色醉良宵。 粥香細細品,臘味日月長。 一一一長安天行健隨筆 原創作品,轉載請注明出處和作者姓名。
    長安天行健閱讀 230評論 0 1