學(xué)習(xí)Vue框架中必掌握的重點(diǎn)知識
一、什么是vue
vue是一套用于構(gòu)建用戶頁面的漸進(jìn)式框架。與其它大型框架不同的是,Vue 被設(shè)計為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層,不僅易于上手,還便于與第三方庫或既有項目整合。另一方面,當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時,Vue 也完全能夠為復(fù)雜的單頁應(yīng)用提供驅(qū)動。
二、與原生JS的區(qū)別
我們可以通過一個小案例來演示
案例:把輸入框中的信息實時顯示在span標(biāo)簽中
原生JS
<body> <input id='txt' type="text"> <span id='con'></span> </body> <script> document.querySelector('#txt').addEventListener('keyup', function () { document.querySelector('#con').innerHTML = this.value }) </script>
Vue
<body> <div id="app"> <input id='txt' type="text" v-model="msg"> <span id='con'>{{msg}}</span> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let app = new Vue({ el: "#app", data: { msg: "" } }) </script>
區(qū)別:其中明顯的區(qū)別就是省去了對DOM元素的操作
總結(jié):
- 創(chuàng)建DOM元素,使其成為Vue實例的掛載點(diǎn),Vue實例中的所有數(shù)據(jù)這能在掛載點(diǎn)中使用
<div id=app> </div>
- 通過
new Vue
來創(chuàng)建實例對象 el
屬性指定當(dāng)前Vue實例的掛載點(diǎn)data
中是模型數(shù)據(jù),這些數(shù)據(jù)依賴于當(dāng)前Vue的實例,可以通過控制臺輸入app.msg
來查看數(shù)據(jù)- 可以通過插值表達(dá)式使用data中的數(shù)據(jù)
三、數(shù)據(jù)綁定
數(shù)據(jù)綁定就是將Vue實例中的data屬性中的數(shù)據(jù)顯示在掛載點(diǎn)中
1、內(nèi)容綁定
將data中的數(shù)據(jù)顯示成內(nèi)容
<div id='app'> <p>{{msg}}</p> </div>
若想顯示html標(biāo)簽只要是標(biāo)簽中用v-html
即可
<div id='app'> <p v-html>{{msg}}</p> </div>
2、屬性綁定
將data中的數(shù)據(jù)作為某個元素的屬性值
使用v-bind
即可,屬性可以是內(nèi)置的,也可以自定義的,簡寫方式:
<p v-bind:id="id" :class="class">{{msg}}</p>
3、表單標(biāo)簽的值
可以使用v-model
指令在表單標(biāo)簽中使用雙向數(shù)據(jù)綁定。它會根據(jù)控件類型自動選取正確的方法來更新元素
1、文本框和文本域
<input type:'text' v-model="msg"></input> <textarea v-model:'msg'><textarea>
2、復(fù)選框
<div id='app'> <lable for:'swim'><lable> <input type='checkbox' id=swim v-model='isSwim'/> <label for="read">閱讀</label> <input type="checkbox" id="read" v-model="isRead"> <label for="play">游戲</label> <input type="checkbox" id="play" v-model="isPlay"> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let app = new Vue({ el:"#app", data:{ isSwim:true, isRead:true, isPlay:false } }) </script>
單選框
<div id="app"> <label for="man">男</label> <input type="radio" id="man" value="man" v-model="gender"> <label for="women">女</label> <input type="radio" id="women" value="women" v-model="gender"> {{gender}} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let app = new Vue({ el:"#app", data:{ gender:'' } }) </script>
下拉框
<div id="app"> <select v-model="city"> <option disabled value="">請選擇</option> <option value="bj">北京</option> <option value="sh">上海</option> </select> {{city}} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let app = new Vue({ el:"#app", data:{ city:"" } }) </script>
傳遞參數(shù)
<div id='app'> <button v-on:click="showInfo('hello')">按鈕</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let app = new Vue({ el:"#app", data:{ title:"元旦" }, methods:{ showInfo:function(message){ console.log(message) } } }) </script>
四、事件處理
可以用 v-on
指令監(jiān)聽 DOM 事件,并在觸發(fā)時運(yùn)行一些 JavaScript 代碼。
<div id=app> <button v-on:click='greet'></button> </div>
var app = new Vue({ el:'#app', data:{ name:'holle Vue' }, //在 methods 中定義方法 methods:{ greet:function(event){ //this在方法中指向Vue實例 alert(this.name + '!') if (event) { alert(event.target.tagName) } } })
五、列表渲染
我們可以用 v-for
指令基于一個數(shù)組來渲染一個列表。v-for
指令需要使用 item in items
形式的特殊語法,其中 items
是源數(shù)據(jù)數(shù)組,而 item
則是被迭代的數(shù)組元素的別名。
<div id='app'> <ul> <li v-for="blog in blogs">{{blog}}</li> </ul> <ul> <li v-for="stu in stus">姓名:{{stu.name}} 年齡:{{stu.age}}</li> </ul> </div>
var app = new Vue({ el:"#app", data:{ blogs:['三國演習(xí)','西游記','老夫子'], stus:[ {name:'小明',age:18}, {name:'小張',age:11}, {name:'小王',age:12} ] } })
從服務(wù)器中獲取數(shù)據(jù)
<body> <div id="app"> <ul> <li v-for="item in books">{{item.title}}</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let app = new Vue({ el: '#app', data: { books: [], }, created: function () { fetch('data.json') .then((res) => { return res.json() }) .then((res) => { this.books = res }) }, }) </script>
六、條件渲染
1、v-if
指令用于條件性的渲染一塊內(nèi)容
<div v-if=true>hello Vue</div>
2、也可以使用v-else
添加一個else塊
<div v-if=false>hello Vue</div> <div v-else>hello world</div>
3、在<template>
元素上使用v-if
條件渲染分組
當(dāng)需要切換多個元素的時候可以把v-if
添加到template
內(nèi),因為<template>
元素是一個不可見元素,渲染的結(jié)果將不包含<template>
元素
<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template>
4、v-if-else
顧名思義就是充當(dāng)v-if
的else if塊,可連續(xù)使用
<div v-if="score==100"> 滿分 </div> <div v-else-if="score>=80 && score<100"> 良好 </div> <div v-else-if="score>=70 && score<=60"> 及格 </div> <div v-else-if="score<60"> 不及格 </div> <div v-else> 請輸入正確的成績 </div>
5、v-show
同樣是根據(jù)條件展示元素
<div v-show="ok">hello</div>
與v-if
不同的是v-show
的元素會始終被渲染并保留在DOM中。
一般來說,
v-if
有更高的切換開銷,而v-show
有更高的初始渲染開銷。因此,如果需要非常頻繁地切換,則使用v-show
較好;如果在運(yùn)行時條件很少改變,則使用v-if
較好。
七、Class與Style綁定
我們可以使用v-bind
來綁定類名或內(nèi)聯(lián)樣式
綁定class,以動態(tài)的切換class,也可以與普通的class共存
<div class="static" v-bind:class="{active:isActive,'text-danger:hasError'}"></div>
data{ isActive:true hasError:false }
渲染結(jié)果為:
<div class='static active'></div>
綁定內(nèi)斂級樣式
語法v-bind:style
<div v-bind:style='{color:activeColor,fontSize:fontSize+'px'}'></div>
data:{ activeColor:"red", fontSzie:13 }
也可以直接綁定到一個樣式對象中,這樣會使模板更清晰
<div v-bind:style="active"></div>
data:{ active:{ color:'red', fontSize:'30px' } }
八、計算屬性
當(dāng)我們需要計算模板中的值時可以使用計算屬性(computed)
<div id="#app"> <p>{{message}}</p> <p>{{reverseMessage}}</p> </div>
var app = new Vue({ el:"#app", data:{ message:"Hello" }, computed:{ reverMessage(){ return this.message.split('').reverse().join('') } } })
九、偵聽器
偵聽器可以觀察和響應(yīng)Vue實例上的數(shù)據(jù)變動
<div id="app"> <div> 問題:<input v-model="question"> </div> <div>{{answer}}</div> </div>
var app = new Vue({ el: "#app", data: { question: "", answer: [], }, watch: { question(newValue) { this.getAnswer() } }, methods: { getAnswer: function () { let that = this axios.get('http://localhost:3000/answer.php?q=' + this.question) .then(function (response) { that.answer = response.data }) } } })
php代碼
<?php $question = $_GET['q']; $answer=[]; switch($question){ case "小": $answer=['小孩子','小姐姐','小鮮肉']; break; case "小鮮肉": $answer=['小鮮肉是什么','小鮮肉有什么用','小鮮肉可以吃嗎']; break; case "小鮮肉演戲": $answer=["小鮮肉演戲太假","小鮮肉被封殺","小鮮肉不會做演員"]; break; } echo json_encode($answer); ?>
演示
nswer = response.data
php代碼 ```php <?php $question = $_GET['q']; $answer=[]; switch($question){ case "小": $answer=['小孩子','小姐姐','小鮮肉']; break; case "小鮮肉": $answer=['小鮮肉是什么','小鮮肉有什么用','小鮮肉可以吃嗎']; break; case "小鮮肉演戲": $answer=["小鮮肉演戲太假","小鮮肉被封殺","小鮮肉不會做演員"]; break; } echo json_encode($answer); ?>
演示
十、插槽
插槽內(nèi)容
var el_div = { template: <div><slot></slot></div> }
<div id=app> <el-div> <span>插槽內(nèi)容</span> </el-div> </div>
當(dāng)組件渲染時,slot
會被替換為<span>插槽內(nèi)容</span>
。插槽內(nèi)可以包含任何模板代碼
后備內(nèi)容
有時為一個插槽設(shè)置具體的后備 (也就是默認(rèn)的) 內(nèi)容是很有用的,它只會在沒有提供內(nèi)容的時候被渲染。例如在一個 <submit-button>
組件中:
<button type="submit"> <slot></slot> </button>
我們可能希望這個 <button>
內(nèi)絕大多數(shù)情況下都渲染文本“Submit”。為了將“Submit”作為后備內(nèi)容,我們可以將它放在 <slot>
標(biāo)簽內(nèi):
<button type="submit"> <slot>Submit</slot> </button>
現(xiàn)在當(dāng)我在一個父級組件中使用 <submit-button>
并且不提供任何插槽內(nèi)容時:
<submit-button></submit-button>
后備內(nèi)容“Submit”將會被渲染:
<button type="submit"> Submit </button>
但是如果我們提供內(nèi)容:
<submit-button> Save </submit-button>
則這個提供的內(nèi)容將會被渲染從而取代后備內(nèi)容:
<button type="submit"> Save </button>
具名插槽
有時我們需要多個插槽。例如對于一個帶有如下模板的 <base-layout>
組件:
<div class="container"> <header> <!-- 我們希望把頁頭放這里 --> </header> <main> <!-- 我們希望把主要內(nèi)容放這里 --> </main> <footer> <!-- 我們希望把頁腳放這里 --> </footer> </div>
對于這樣的情況,<slot>
元素有一個特殊的 attribute:name
。這個 attribute 可以用來定義額外的插槽:
<div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div>
一個不帶 name
的 <slot>
出口會帶有隱含的名字“default”。
在向具名插槽提供內(nèi)容的時候,我們可以在一個 <template>
元素上使用 v-slot
指令,并以 v-slot
的參數(shù)的形式提供其名稱:
<base-layout> <template v-slot:header> <h1>Here might be a page title</h1> </template> <p>A paragraph for the main content.</p> <p>And another one.</p> <template v-slot:footer> <p>Here's some contact info</p> </template> </base-layout>
現(xiàn)在 <template>
元素中的所有內(nèi)容都將會被傳入相應(yīng)的插槽。任何沒有被包裹在帶有 v-slot
的 <template>
中的內(nèi)容都會被視為默認(rèn)插槽的內(nèi)容。
然而,如果你希望更明確一些,仍然可以在一個 <template>
中包裹默認(rèn)插槽的內(nèi)容:
<base-layout> <template v-slot:header> <h1>Here might be a page title</h1> </template> <template v-slot:default> <p>A paragraph for the main content.</p> <p>And another one.</p> </template> <template v-slot:footer> <p>Here's some contact info</p> </template> </base-layout>
任何一種寫法都會渲染出:
<div class="container"> <header> <h1>Here might be a page title</h1> </header> <main> <p>A paragraph for the main content.</p> <p>And another one.</p> </main> <footer> <p>Here's some contact info</p> </footer> </div>
以上就是學(xué)習(xí)Vue中必掌握的重點(diǎn)知識的詳細(xì)內(nèi)容,更多關(guān)于Vue重點(diǎn)知識的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
如何在Vue 3中擴(kuò)展Vue Router鏈接詳解
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁面應(yīng)用,這篇文章主要給大家介紹了關(guān)于如何在Vue 3中擴(kuò)展Vue Router鏈接的相關(guān)資料,需要的朋友可以參考下2021-06-06VueJs監(jiān)聽window.resize方法示例
本篇文章主要介紹了VueJs監(jiān)聽window.resize方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-01-01