vue.js是什么
vue.js也稱為vue,讀音/vju/
- 是一個構建用戶界面的框架
- 是一個輕量級MVVM(Model-view-viewModel)框架，和angular，react類似，其實就是所謂的資料雙向系結
- 資料驅動+組件化的前端開發(核心思想)
- 通過簡單的API實作回應式的資料系結和組合的視圖組件
為什么要使用VUE？
Vue. js 一直以輕量級，易上手被開發者稱道，
使用Vue，使我們無須再像使用Angular.js 和 React.js時那樣關心DOM的操作，
vue的指令以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是每次洗掉代碼后再重新創建
在 <template> 元素上使用 v-if 條件渲染分組
v-if 是一個指令，所以必須將它添加到一個元素上，
此時可以把一個 <template> 元素當做不可見的包裹元素，并在上面使用 v-if，
最終的渲染結果將不包含 <template> 元素，
<div id="app"> ---- <template v-if="ok"> <h1>標題</h1> <p>段落 1</p> <p>段落 2</p> </template> ---- </div> <script> var vm = new Vue({ el:'#app', data:{ ok: 1 } }); </script>
事件的簡寫
v-on:click點擊事件可簡寫為@click
事件物件$event
包含事件相關資訊，如事件源，事件型別，偏移量
事件冒泡 （往上傳播）
阻止事件冒泡使用 .stop
阻止事件默認行為并執行指定函式.prevent
原生js方式，依賴于事件物件
事件修飾符 只觸發一次 .once
關于鍵盤事件
簡寫 不需要事件物件 按鍵別名或按鍵的值
@keydown.ctrl或@keydown.13
屬性
屬性的系結和簡寫
v-bind:屬性=''簡寫:屬性
例如：
data:{ url:'www.360.com' }
<a :href="url">360首頁</a>
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>
模板語法
文本
資料系結最常見的形式就是使用“Mustache”語法 {{}}(雙大括號) 的文本插值
v-once 指令
能執行一次性地插值，當資料改變時，插值處的內容不會更新，
例如點擊按鈕更改文本內容
data:{ msg:'打打怪', }, methods:{ textH1(){ this.msg = '灰太狼'; } }
<div id="app"> <h1 >{{msg}}</h1> <h1 v-once>{{msg}}</h1>//once值系結一次不會改變 <button type="button" @click="hyyj()">點擊</button> </div>
系結了v-once指令的值未改變
原始 HTML
雙大括號會將資料解釋為普通文本，而非 HTML 代碼，為了輸出真正的 HTML，需要使用v-html指令
data:{ rawHtml: '<span style="color:blue">這里要顯示藍色</span>' },
<h2 >{{rawHtml}}</h2> <h2 v-html="rawHtml"></h2>
結果：
v-bind
渲染一個動態的id這種情況應該使用 v-bind 指令, {{ }} (雙括號)不能作用在 HTML 特性上，
使用JavaScript運算式
對于所有的資料系結，都可以完全使用JavaScript運算式，
例如：
{{ number + 1 }} <!-- 計算 -->
{{ ok ? 'YES' : 'NO' }} <!-- 單運算式選擇 -->
{{ message.split('').reverse().join('') }} <!-- 單運算式運算 -->
<div v-bind:id="'list-' + id"></div> <!-- 字串拼接 -->
這些運算式會在所屬 Vue 實體的資料作用域下作為 JavaScript 被決議，有個限制就是，每個系結都只能包含單個運算式，
再例如：
<span v-bind:class="status == 'fail' ? 'off': 'on'">狀態</span><!-- 當status 等于fail得時候 class樣式為off 否則為on -->
data:{ status:'fail' }
動態引數
從 Vue 2.6.0 開始，可以用方括號括起來的 JavaScript 運算式作為一個指令的引數
例如：
data:{ ename: 'click' }
<a v-bind:[ename]="alert"> ... </a>//屬性表示點擊事件
需要注意的是動態引數需要避免使用大寫字符來命名而且在動態引數運算式里無法使用空格和引號，放在HTML屬性名里是無效的
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/2163.html
標籤：其他
上一篇：Typescript 最佳實踐