前端主流框架vue學習筆記第一篇
vue應該是前端主流框架中的集大成者，它吸取了knockout，angular，react設置avalon的經(jīng)驗，支持各種模式寫法，入門很簡單，從本章開始，會記錄學習vue中的點點滴滴，以筆記的形式形成博文。
1、Hello World
和任何框架一樣，使用前必先引入，我們這里直接使用cdn資源,創(chuàng)建index.html,編寫如下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo1</title>
<script src="https://cdn.bootcss.com/vue/2.4.1/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
new Vue({
el:'#app',
data:{
message:'hello world'
}
})
</script>
</body>
</html>
雙擊文件運行：
咱們分析一下上述代碼，一句簡單的{{message}}，就把數(shù)據(jù)綁定到到了dom中，我不會說好神奇，因為我熟悉angular，我知道angular也是簡單一個指令就可以做到，這里和angular在使用上做一個類比，可以看到，在當前的代碼中創(chuàng)建Vue對象的時候，傳遞的參數(shù){el:'#id',data:{message:'hellow'}},其中el是vue掛載的元素，也就是作用的范圍和anglar中ng-app的概念類似，都是創(chuàng)建一個根作用域，data對象可以類比angular中的$scope,$scope對象在angular中是連接controller和view的橋梁，那么data對象就是代理vue對象中數(shù)據(jù)和template的橋梁。
2、TODO LIST
由于有angular的經(jīng)驗，不會按部就班的過vue的文檔，那樣也沒什么意思，這里以todolist作為Hello world的延伸，由于和angular類似的數(shù)據(jù)驅動的特點，我們不需要關注如何操作dom，我們只要設計viewmode即可，todolist，首先我們要有todo item ，所以
var todoItem=function(title,desc){
this.title=title;
this.desc=desc;
}
另外todolist 是包含CURD的，所以我們需要一個表單，用來新增todoItem，基于此修改index.html,添加表單部分：
<div id="app">
<form>
<input type="text" v-model="title"> <br>
<input type="text" v-model="desc"> <br/>
<input type="button" value="add todo item" v-on:click="addItem()" />
</form>
</div>
對上述代碼做一下簡單說明：v-model類似angular中ng-model，實現(xiàn)雙向數(shù)據(jù)綁定，當然這里都是語法糖，vue內(nèi)部做了很多工作，和angular2+中的[(ngModel)]類似，通過屬性和事件實現(xiàn)了雙向綁定效果，v-on:click="addItem()" ,其中v-on:是事件綁定指令，后面click是參數(shù)，可以縮寫為@click="addItem()" ,可以類比angular中ng-click。
接下來，繼續(xù)完善我們的viewmodel，todoitem已經(jīng)設計完成，現(xiàn)在我們增加todolist結構，todolist中包含多個todoitem，是todoitem集合，在javascript中，體現(xiàn)為Array，基于此修改我們的代碼，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo1</title>
<script src="https://cdn.bootcss.com/vue/2.4.1/vue.js"></script>
</head>
<body>
<div id="app">
<form>
title:<input type="text" v-model="title"> <br>
desc:<input type="text" v-model="desc"> <br/>
<input type="button" value="add todo item" v-on:click="addItem()" />
</form>
</div>
<script>
var TodoItem = function (title, desc) {
this.title = title;
this.desc = desc;
}
new Vue({
el: '#app',
data: {
todolist:[],
title:'',
desc:''
},
methods:{
addItem:function(){
this.todolist.push(new TodoItem(this.title,this.desc))
this.title=this.desc='';
console.log(JSON.stringify(this.todolist));
}
}
})
</script>
</body>
</html>
上述代碼中出現(xiàn)了新的屬性methods，和angular中不同，angular中事件也是綁定在$scope對象中的，只不過值是function而已，在vue中，對事件綁定和屬性綁定進行了區(qū)分，分別使用data和methods代理，這樣也在邏輯上更清晰，指責上更單一，所以事件綁定的回調(diào)函數(shù)都代理在methods中。
刷新頁面，輸入表單項，打開控制臺可以看到輸出項，運行結果入下圖所示：
結果和我們預期的一樣，接著我們把結果以列表的形式渲染出來，在angular中，我們一般通過ng-repeat指令，實現(xiàn)列表渲染，那么在vue中，有沒有類似的指令呢，查文檔發(fā)現(xiàn)的確有一指令叫做v-for，用法和作用都和ng-repeat類似，基于ng-repeat經(jīng)驗，我們使用v-for對todolist進行渲染，修改代碼如下：
<table style="width:300px;border-collapse:collapse" border="1">
<tr>
<th>title</th>
<th>desc</th>
</tr>
<tr v-for="todoItem in todolist">
<td>{{todoItem.title}}</td>
<td>{{todoItem.desc}}</td>
</tr>
</table>
刷新運行，在表單中輸入后，點擊add todo item，向數(shù)組添加元素，及動態(tài)刷新了列表：
有添加就有刪除，接下來，我們列表中，增加刪除操作，和所有mvvm框架一樣，我們考慮的出發(fā)點一定要規(guī)避dom，一定要從數(shù)據(jù)驅動UI的方式來思考，如果刪掉UI項，那么根據(jù)數(shù)據(jù)驅動UI的理念那么就是刪掉數(shù)組項，框架會自動幫我們處理dom，基于此修改代碼如下：
<table style="width:300px;border-collapse:collapse" border="1">
<tr>
<th>title</th>
<th>desc</th>
<th></th>
</tr>
<tr v-for="(todoItem,index) in todolist">
<td>{{todoItem.title}}</td>
<td>{{todoItem.desc}}</td>
<td><input type="button" value="remove" @click="remove(index)" /></td>
</tr>
</table>
如果按照我們以前angular的使用經(jīng)驗，這里增加的方式有些區(qū)別，angular在ng-repeat中有內(nèi)置變量$index,所以在事件處理上，我們就會通過$index作為數(shù)組項索引，事件綁定也會類似ng-click="remove($index)",在vue中就有些區(qū)別了，但是卻符合數(shù)組遍歷的方式，大家應該知道數(shù)組方法，比如map等，參數(shù)是一個function，其中包含兩個參數(shù)，第一個參數(shù)是value，第二個參數(shù)是index是一個道理，從這一點上說，這樣寫很符合道理，因為這本身就是一個循環(huán)遍歷，同樣vue對象methods中添加remove方法。
new Vue({
el: '#app',
data: {
todolist:[],
title:'',
desc:''
},
methods:{
addItem:function(){
this.todolist.push(new TodoItem(this.title,this.desc))
this.title=this.desc='';
},
remove:function(index){
this.todolist.splice(index,1);
}
}
})
刷新運行頁面：
完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo1</title>
<script src="https://cdn.bootcss.com/vue/2.4.1/vue.js"></script>
<style>
table{
margin-top: 5px;
width:300px;
border-collapse: collapse;
border: 1px solid #ccc;
}
table > tr>th,table>tr>td{
height: 25px;
line-height: 25px;
}
</style>
</head>
<body>
<div id="app">
<form>
title:<input type="text" v-model="title"> <br>
desc:<input type="text" v-model="desc"> <br/>
<input type="button" value="add todo item" v-on:click="addItem()" />
</form>
<table style="width:300px;border-collapse:collapse" border="1">
<tr>
<th>title</th>
<th>desc</th>
<th></th>
</tr>
<tr v-for="(todoItem,index) in todolist">
<td>{{todoItem.title}}</td>
<td>{{todoItem.desc}}</td>
<td><input type="button" value="remove" @click="remove(index)" /></td>
</tr>
</table>
</div>
<script>
var TodoItem = function (title, desc) {
this.title = title;
this.desc = desc;
}
new Vue({
el: '#app',
data: {
todolist:[],
title:'',
desc:''
},
methods:{
addItem:function(){
this.todolist.push(new TodoItem(this.title,this.desc))
this.title=this.desc='';
},
remove:function(index){
this.todolist.splice(index,1);
}
}
})
</script>
</body>
</html>
今天就先到這里，增刪改查，查詢和修改還沒有，放在（二）中進行添加吧，敬請期待。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue+Vue Router多級側導航切換路由(頁面)的實現(xiàn)代碼
這篇文章主要介紹了vue+Vue Router多級側導航切換路由(頁面)的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了關于el-tooltip使用\n換行的情況顯示,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
使用provide/inject實現(xiàn)跨組件通信的方法
在 Vue 應用中,組件間通信是構建復雜應用時的一個常見需求,Vue3.x 提供了provide和inject API,讓跨組件通信變得更加簡潔和高效,本文將深入探討如何使用provide和inject在Vue3.x中實現(xiàn)跨組件通信,并通過示例代碼一步步進行說明,需要的朋友可以參考下2024-03-03
圖片壓縮是一種比較便捷的壓縮方式,本文主要介紹了vue3中實現(xiàn)圖片壓縮的示例代碼,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧2024-02-02
vue3中emit('update:modelValue')使用簡單示例
這篇文章主要給大家介紹了關于vue3中emit('update:modelValue')使用的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-09-09
vue自定義加載指令v-loading占位圖指令v-showimg
這篇文章主要為大家介紹了vue自定義加載指令和v-loading占位圖指令v-showimg的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
在vue項目中,輸入框只允許輸入數(shù)字,現(xiàn)將自己使用的一種方法記錄,本文結合實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧2023-11-11
這篇文章主要介紹了詳解Vue結合后臺的增刪改案例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡單圖片切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
目前項目中比較常用的第三方支付無非就是支付寶支付和微信支付。下面介紹一下Vue中H5頁面如何使用支付寶支付。這篇文章主要介紹了Vue的H5頁面喚起支付寶支付,需要的朋友可以參考下2019-04-04