vue基礎用法
阿新 • • 發佈:2019-12-30
vue.js是什麼
vue.js也稱為vue,讀音/vju/
- 是一個構建使用者介面的框架
- 是一個輕量級MVVM(Model-view-viewModel)框架,和angular,react類似,其實就是所謂的資料雙向繫結
- 資料驅動+元件化的前端開發(核心思想)
- 通過簡單的API實現響應式的資料繫結和組合的檢視元件
指令以v-xxx開頭
vue2.0和1.0相比,最大的變化是引入了Virtual DOM(虛擬DOM),頁面更新效率更高,速度更快。
先瞅一瞅vue例項
var vm=new Vue({ //建立一個vue的例項傳入json el:'#box',//指定關聯的選擇器 data:{//物件儲存資料 sjd:'holle world', name:'tom' } });
<div id="box"> {{sjd}}<!-- 兩隊大括號稱為模板 --> </div>
雙向資料繫結
v-model 一般用於表單元素
使用者名稱:<input type="text" v-model="name" /> <br> <p>我叫{{name}}</p>
vue data中的name為空:且表單輸入什麼 p標籤顯示什麼
常用的指令
v-for 對陣列進行迴圈
new Vue({ el:'#angs', data:{ arr:[1,21,14,45,54], user:{id:12345,name:'秋香',age:25} } })
<li v-for="value in arr">{{value}}</li><!-- 迴圈陣列 -->
迴圈user陣列
<li v-for="value in user">{{value}}</li><!-- 只是迴圈了值,物件的索引key沒有
鍵值迴圈
<li v-for="(v,k) in user">{{k}}={{v}}</li>
迴圈包含重複資料的集合 可以通過指定:key屬性繫結唯一key,當更新元素可以重用元素,提高效率。
arr2:[12,21,14,45,54,12]
<li v-for="(v,k) in arr2" :key='k'>{{v}}</li>
迴圈物件陣列。
users:[//物件陣列 {id:1111,name:'唐伯虎',age:25}, {id:2222,name:'老鱉',age:22}, {id:3333,name:'奧力給',age:23} ]
<li v-for="user in users">{{user.id}},{{user.name}},{{user.age}}</li><!-- 迴圈物件陣列 -->
如果想要索引
<!-- user加上一個索引,index從0開始 --> <li v-for="(user,index) in users">{{index+1}},{{user.id}},{{user.name}},{{user.age}}</li>
v-on:事件名稱
用來繫結事件的用法 可以用@代表來簡寫
例如:
點選按鈕時向陣列中新增一個元素
new Vue({ el:'#itany', data:{ //儲存資料 arr:[12,21,215,46], }, methods:{ //儲存方法 add(){ // arr.push(666);預設不能直接訪問 this.arr.push(666);//使用this訪問當前例項中的成員 this.fname(); } } })
<button type="button" v-on:click="add()">向陣列中新增一個元素</button>
v-show/v-if
用來顯示或者隱藏元素,v-show是通過display實現,v-if是每次刪除後再重新建立
例如:
點選按鈕隱藏div
methods:{ change(){ this.flag=!this.flag; } }
<button type="button" v-on:click="change()">隱藏div</button> <hr > <div class="" style="width: 100px; height: 100px; background-color: red;" v-show="flag"> </div>
v-show是通過display設定none屬性實現隱藏
<button type="button" v-on:click="change()">隱藏div</button> <hr > <div class="" style="width: 100px; height: 100px; background-color: red;" v-if="flag"> </div>
v-if是每次刪除程式碼後再重新建立
事件的簡寫
v-on:click點選事件可簡寫為@click
事件物件$event
包含事件相關資訊,如事件源,事件型別,偏移量
事件冒泡 (往上傳播)
阻止事件冒泡使用 .stop
阻止事件預設行為.prevent
原生js方式,依賴於事件物件
事件修飾符 只觸發一次 .once
關於鍵盤事件
簡寫 不需要事件物件 按鍵別名或按鍵的值
@keydown.ctrl或@keydown.13
屬性
屬性的繫結和簡寫
v-bind:屬性='' 簡寫:src
v-bind可以直接訪問vue中的資料,不需要使用{{}}
例如:
let vm = new Vue({ el:'#box1', data:{ src1:'//atts.w3cschool.cn/attachments/cover/cover_erlang.png?imageView2/1/w/64/h/64&t=1542019173', w:'200px',//寬度 h:'100px',//高度 }, methods:{ } });
src1為連結
<img :src="src1" :width="w" :height="h"><!-- 簡寫直接加上: -->
class和style屬性
<style type="text/css"> .aa{ background: #0062CC;/* 背景色 */ } .bb{ color: red;/* 字型顏色 */ font-size: 20px;/* 字型大小 */ } .vv{ font-family: "宋體";/* 字型樣式 */ text-align: center;/* 居中 */ } </style>
繫結單個樣式 若要用多個樣式,則用陣列形式
<p :class="cc">我的世界</p>
陣列形式繫結多個樣式
在vue的data中給樣式賦值別名
let vm = new Vue({ el:'#box1', data:{ w:'200px',//寬度 h:'100px',//高度 cc:'aa', dd:'bb', ss:'vv', }, methods:{ } });
<p :class="[cc,dd,ss]">我的世界</p>
json形式繫結
data:{ flag:true, num:-1, }
<p :class="{aa:true,bb:flag}">我的世界</p> <p :class="{aa:num>0}">我的世界</p><!-- 大於零為true -->
變數引用json
data:{ holle:{aa:true,bb:true,vv:true} }
<p :class="holle">引用變數json</p>
&n