一.vue介紹
- 當下最火的三大前端框架當屬vue、react以及angular了
- 爲什麼要學vue，因爲vue有很多優勢
- vue比react、angular更容易上手，vue寫起來更加流暢、方便，vue的優化做的要比react好一些，vue的文檔更加好
- vue是一套用於構建用戶界面的漸進式框架
二.vue的hello版本
1.hello vue
<body>
<div id="a"></div>
<div id="app">{{content}}</div>
<div>{{content}}</div>
<script>
var dom = document.getElementById('a');
dom.innerHTML = "hello vue"
var app = new Vue({
el:"#app",
data:{
content:"hello vue"
}
})
</script>
</body>
- 首先創建了一個vue實例
- el表示實例管理的區域，接管id爲app標籤裏的所有內容
- data爲數據源
- {{}}插值表達式可以調用data裏面的數據
2.加上一個定時器
- 面向dom編程
<div id="a"></div>
<script>
var dom = document.getElementById('a');
dom.innerHTML = "hello vue"
setTimeout(function () {
dom.innerHTML = "hello world"
},2000);
- 面向數據編程
<div id="app">{{content}}</div>
<script>
var app = new Vue({
el:"#app",
data:{
content:"hello vue"
}
})
setTimeout(function () {
app.$data.content = "hello world"
},2000);
</script>
總結:vue要我們只需要關注數據，數據改變，頁面就會跟着發生變化
三.使用vue.js實現簡單todoList
- v-model:數據雙向綁定(input框值發生變化，vue實例中的inputValue也變化，相反也成立)
- v-on:綁定事件(此處綁定點擊事件)
- v-for:遍歷
<body>
<div id="app">
<input type="text" v-model="inputValue">
<button v-on:click="btnClick">提交</button>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
inputValue:'',
list:[]
},
methods:{
btnClick:function () {
this.list.push(this.inputValue)
this.inputValue=''
}
}
})
</script>
</body>
總結:vue沒有操作dom元素 一直都在操作數據
四.MVVM模式
1.傳統模式-MVP模式
-
Model-數據層 Presenter-業務邏輯的控制層 View-視圖層(頁面上的視圖展示)
-
Jquery實現一個todoList
<body>
<div id="app">
<input type="text" id="input">
<button id="btn">添加</button>
<ul id="list">
</ul>
</div>
<script>
function Page() {
}
$.extend(Page.prototype,{
init:function () {
this.bindEvents()
},
bindEvents:function () {
var btn = $('#btn');
btn.on('click',$.proxy(this.handleBtnClick,this))
},
handleBtnClick:function () {
var inputElem = $('#input');
var inputValue = inputElem.val();
var ulElem = $("#list");
ulElem.append('<li>' + inputValue + '</li>');
inputElem.val('');
}
})
var page = new Page();
page.init();
</script>
</body>
- M比較弱 沒有通過ajax獲取遠程數據
- 上面的dom div就是視圖
- 控制器 點擊提交控制器會去執行，控制器可以調模型層 ajax請求 通過dom操作改變視圖，最核心的是presenter 控制器層，大量代碼寫在presenter層中，大量代碼都是做dom操作
2.MVVM模式
- 雖然也有視圖層和模型層，但沒有presenter這層了，ViewModel不需要編寫，vue自帶的，所以只需要關注v和m
- MVVM層中的M層，上面寫的標籤就是MVVM中的V層，數據改變 頁面改變 這個操作時VM層做的
- vue層就是VM層
- M層最重要
- Jquery面向dom編碼，vue面向數據編碼，用vue代碼量大大減少，至少可以減少百分之30，就可以見到vue的強大
五.前端組件化
- 頁面切分成一個一個部分,每個部分都可稱爲一個組件
- 向下面這些一個一個部分，都可以稱爲組件
![在這裏插入圖片描述]()
六.使用組件化思想修改todoList
1.全局組件
- 把li標籤變成一個組件
- v-bind:向子組件傳遞綁定值
- props:從父組件接受內容
<div id="app">
<input type="text" v-model="inputValue">
<button v-on:click="btnClick">提交</button>
<ul>
<todo-item v-bind:content="item" v-for="item in list">${{item}}</todo-item>
</ul>
</div>
<script>
Vue.component("TodoItem",{
props:['content'],
template:'<li>{{content}}</li>'
})
var app = new Vue({
el:"#app",
data:{
inputValue:'',
list:[]
},
methods:{
btnClick:function () {
this.list.push(this.inputValue)
this.inputValue=''
}
}
})
</script>
2.局部組件
- 局部組件就像是創建一個對象
- 然後把這個對象註冊到vue實例中
<div id="app">
<input type="text" v-model="inputValue">
<button v-on:click="btnClick">提交</button>
<ul>
<todo-item v-bind:content="item" v-for="item in list">${{item}}</todo-item>
</ul>
</div>
<script>
var TodoItem = {
props:['content'],
template:'<li>{{content}}</li>'
}
var app = new Vue({
el:"#app",
components:{
TodoItem:TodoItem
},
data:{
inputValue:'',
list:[]
},
methods:{
btnClick:function () {
this.list.push(this.inputValue)
this.inputValue=''
}
}
})
</script>
七.簡單的組件間傳值
-
父組件向子組件傳遞數據v-bind
-
那麼子組件怎麼向父組件傳遞數據呢？(實現點擊每一項能夠刪除自己-下標是關鍵)
- 向外觸發事件，比如delete
- 父組件創建子組件同時監聽delete事件
-
v-on:click簡寫 @click
-
v-bind:index簡寫:index
<body>
<div id="app">
<input type="text" v-model="inputValue">
<button v-on:click="btnClick">提交</button>
<ul>
<todo-item v-bind:content="item" :index="index" v-for="(item,index) in list" @delete="handleItemDelete">${{item}}</todo-item>
</ul>
</div>
<script>
var TodoItem = {
props:['content','index'],
template:'<li @click="handleItemClick">{{content}}</li>',
methods:{
handleItemClick:function () {
this.$emit("delete",this.index)
}
}
}
var app = new Vue({
el:"#app",
components:{
TodoItem:TodoItem
},
data:{
inputValue:'',
list:[]
},
methods:{
btnClick:function () {
this.list.push(this.inputValue)
this.inputValue=''
},
handleItemDelete:function (index) {
this.list.splice(index,1)
}
}
})
</script>
</body>