前端笔记-Vue框架的基本认识
生活随笔
收集整理的這篇文章主要介紹了
前端笔记-Vue框架的基本认识
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
?
?
基本概念
div與vue實例綁定
掛載點，模板，實例之間的關系
插入頁面的其他寫法
模板指令
Vue中的屬性綁定和雙向數據綁定
Vue中的計算屬性和偵聽器
v-if，v-show，v-for指令
TodoList功能開發
TodoList中組建的拆分
TodoList的刪除
?
基本概念
目前有個功能，要使用到前端，本來是用Bootstrap的，但領導要求要用vue框架來做，本來還有的情緒，但在繼續學習spring boot開發，使用前端的時候，發現大家都是使用vue，而且一般后端發送json數據，vue來解析，這的確是非常方便，比Bootstrap好了很多倍。今天特意花一天時間來初步學習下vue這個創建。
?
div與vue實例綁定
程序運行截圖如下：
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue入門</title><script src="https://cdn.jsdelivr.net/npm/vue"></script> <head><body><div id="root">{{msg}}</div><script>new Vue({el: "#root",data: {msg: "How old are you"}})</script> </body></html>這里是創建vue實例與html上的元素進行綁定
el：讓vue的實例接管哪一個element，上面的代碼是接管root；
data：為vue實例里面的數據。
?
掛載點，模板，實例之間的關系
如下代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue入門</title><script src="https://cdn.jsdelivr.net/npm/vue"></script> <head><body><div id="root"></div><script>new Vue({el: "#root",template: '<h1>Hello! {{msg}} The number is {{number}}</h1>',data: {msg: "How old are you",number: 10086}})</script> </body></html>運行截圖如下：
掛載點：就是html中的div的那個root就為掛載點；
實例：script中new Vue就是一個實例；
模板：掛載點內部的內容都稱之為模板，如上面的template。
掛載點用于顯示數據，實例用于存儲數據和其他綁定，模板用于提供數據。
?
插入頁面的其他寫法
插值法：{{}}
代碼就是上面的那些！
v-text顯示
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue入門</title><script src="https://cdn.jsdelivr.net/npm/vue"></script> <head><body><div id="root" v-text="msg"></div><script>new Vue({el: "#root",//template: '<h1>Hello! {{msg}} The number is {{number}}</h1>',data: {msg: "How old are you",number: 10086}})</script> </body></html>運行截圖如下：
v-html顯示
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue入門</title><script src="https://cdn.jsdelivr.net/npm/vue"></script> <head><body><div id="root" v-html="content"></div><script>new Vue({el: "#root",//template: '<h1>Hello! {{msg}} The number is {{number}}</h1>',data: {msg: "How old are you",content: "<h1>How are you<h1>"number: 10086}})</script> </body></html>運行截圖如下：
這里v-html主要用與當有<h1>這種修飾的。
?
模板指令
如果有這樣的一種功能，點擊源碼中的<h1>標簽內容，然后變成How old are you
使用v-on來綁定點擊事件：
點擊后：
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue入門</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <head><body><div id="root"><div v-on:click="handleClick"><h1>{{content}}</h1></div></div><script>new Vue({el: "#root",data: {content: "How are you"},methods: {handleClick: function(){this.content = "How old are you"}}})</script> </body></html>這里可以簡寫把v-on簡寫成@
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue入門</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <head><body><div id="root"><div @click="handleClick"><h1>{{content}}</h1></div></div><script>new Vue({el: "#root",data: {content: "How are you"},methods: {handleClick: function(){this.content = "How old are you"}}})</script> </body></html>?
Vue中的屬性綁定和雙向數據綁定
html中有個title，當鼠標移動上去會有tip顯示：
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue入門</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <head><body><div id="root"><div title="hehehehehehehda"><h1>呵呵</h1></div></div><script>new Vue({el: "#root"})</script> </body></html>v-bind指XXX屬性和什么數據項綁定
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue入門</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <head><body><div id="root"><div v-bind:title="title"><h1>呵呵</h1></div></div><script>new Vue({el: "#root",data: {title: "呵呵呵額和"}})</script> </body></html>用一個input框，輸入數據后修改h1標簽的內容 這樣進行雙向數據綁定。
其中v-bind:可以簡寫為 : 這個符號
使用v-model可以實現雙向綁定
下面代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue入門</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <head><body><div id="root"><input v-model="content" /><div><h1>{{content}}</h1></div></div><script>new Vue({el: "#root",data: {title: "呵呵呵",content: "mmp"}})</script> </body></html>運行截圖如下：
?
Vue中的計算屬性和偵聽器
先構造如下頁面，輸入姓名后，會在上面顯示：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue入門</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <head><body><div id="root">姓：<input v-model="firstName" />名：<input v-model="lastName" /><div><h1>{{firstName}}{{lastName}}</h1></div></div><script>new Vue({el: "#root",data: {firstName: '',lastName: ''}})</script> </body></html>運行截圖如下：
還可以通過這種方式：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue入門</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <head><body><div id="root">姓：<input v-model="firstName" />名：<input v-model="lastName" /><div><h1>{{fullName}}</h1></div></div><script>new Vue({el: "#root",data: {firstName: '',lastName: ''},computed: {fullName: function(){return this.firstName + this.lastName}}})</script> </body></html>下面說下偵聽器，當修改了input后，Vue中的count屬性會加1
使用watch關鍵字！
運行截圖如下：
代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue入門</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <head><body><div id="root">姓：<input v-model="firstName" />名：<input v-model="lastName" /><div><h1>{{fullName}}</h1></div><div><h1>{{count}}</h1></div></div><script>new Vue({el: "#root",data: {firstName: '',lastName: '',count: 0},computed: {fullName: function(){return this.firstName + this.lastName}},watch:{fullName: function(){this.count ++}}})</script> </body></html>?
v-if，v-show，v-for指令
如果有下面這個需求，點擊按鈕text就影藏，再點擊就顯示！
如下源碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue入門</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <head><body><div id="root"><div v-if="show"><h1>Hello world</h1></div><button @click="handleClick">toggle</button></div><script>new Vue({el: "#root",data: {show: true},methods: {handleClick: function(){this.show =! this.show;}}})</script> </body></html>運行截圖如下：
點擊后：
同樣，使用這種方式也是可以的，至少看起來是一樣的
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue入門</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <head><body><div id="root"><div v-show="show"><h1>Hello world</h1></div><button @click="handleClick">toggle</button></div><script>new Vue({el: "#root",data: {show: true},methods: {handleClick: function(){this.show =! this.show;}}})</script> </body></html>使用v-show，實際上并沒有從dom樹上刪除，而是加了一個display:?none的屬性值。
從性能上面來說，v-show的確要高些，因為他不用被銷毀。
下面來看看v-for，做一個循環展示：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue入門</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <head><body><div id="root"><ul><li v-for="item of list">{{item}}</li></ul></div><script>new Vue({el: "#root",data: {list: [1, 2, 3]}})</script> </body></html>運行截圖如下：
這里有個小技巧，輸入:key可以提升每一個item的渲染性能，并且添加index會得到下標：
代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue入門</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <head><body><div id="root"><ul><li v-for="(item, index) of list" :key="item">{{item}} {{index}}</li></ul></div><script>new Vue({el: "#root",data: {list: ['球球', '腿腿', '米線']}})</script> </body></html>運行截圖如下：
?
TodoList功能開發
要做一個功能，一個輸入框一個提交，點擊提交，數據就會在列表中；
運行截圖如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue入門</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <head><body><div id="root"><input v-model="inputValue"/><button @click="handleSubmit">提交</button><ul><li v-for="(item, index) of list" :key="index">{{item}}</li></ul></div><script>new Vue({el: "#root",data: {inputValue: "Hello",list: []},methods:{handleSubmit: function(){this.list.push(this.inputValue)this.inputValue = ""}}})</script> </body></html>?
TodoList中組建的拆分
組建：頁面上的某一個部分。
通過組建，但項目比較大的時候，一般企業都應該采用的方式；
把上面的TodoList改成組建的形式：
使用Vue.component進行組建的注冊，這個組建是一個全局的組建。
使用 var TodoItem = {
? ? ? ? ? template: '<li>item</li>'
}
這種是局部組建，需要在vue中做一個聲明
components:{
}
如下的全局組建：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue入門</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <head><body><div id="root"><input v-model="inputValue"/><button @click="handleSubmit">提交</button><ul><todo-item></todo-item></ul></div><script>Vue.component('todo-item', {template: '<li>呵呵</li>'})new Vue({el: "#root",data: {inputValue: '',list: []},methods:{handleSubmit: function(){this.list.push(this.inputValue)this.inputValue = ""}}})</script> </body></html>運行截圖如下：
局部組建：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue入門</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <head><body><div id="root"><input v-model="inputValue"/><button @click="handleSubmit">提交</button><ul><todo-item></todo-item></ul></div><script>//Vue.component('todo-item', {// template: '<li>呵呵</li>'//})var TodoItem = { template: '<li>item</li>' }new Vue({el: "#root",components: {'todo-item': TodoItem},data: {inputValue: '',list: []},methods:{handleSubmit: function(){this.list.push(this.inputValue)this.inputValue = ""}}})</script> </body></html>接收從外部傳來的content屬性：
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue入門</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <head><body><div id="root"><input v-model="inputValue"/><button @click="handleSubmit">提交</button><ul><todo-item v-for="(item, index) of list" :key="index" :content="item"></todo-item></ul></div><script>Vue.component('todo-item', {props: ['content'],template: '<li>{{content}}</li>'})new Vue({el: "#root",data: {inputValue: '',list: []},methods:{handleSubmit: function(){this.list.push(this.inputValue)this.inputValue = ""}}})</script> </body></html>注意，在Vue中每一個組建都是Vue的實例。
?
TodoList的刪除
使用handleSubmit實現刪除的功能：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue入門</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <head><body><div id="root"><input v-model="inputValue"/><button @click="handleSubmit">提交</button><ul><todo-item v-for="(item, index) of list" :key="index" :content="item":index="index" @delete="handleDelete"></todo-item></ul></div><script>Vue.component('todo-item', {props: ['content', 'index'],template: '<li @click="handleClick">{{content}}</li>',methods:{handleClick: function(){//觸發后發送事件this.$emit('delete', this.index)}}})new Vue({el: "#root",data: {inputValue: '',list: []},methods:{handleSubmit: function(){this.list.push(this.inputValue)this.inputValue = ""},handleDelete: function(index){this.list.splice(index, 1)}}})</script> </body></html>這種套路和Qt有點像，今天的基本認識就到這里了，這個筆記真的豐富啊
總結
以上是生活随笔為你收集整理的前端笔记-Vue框架的基本认识的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 初窥自定义注解
- 下一篇： 前端笔记-vue cli中使用route