學習Vue框架中必掌握的重點知識
更新時間：2021年04月07日 17:24:43 作者：寒酥丶
這篇文章主要介紹了學習Vue中必掌握的重點知識，想了解vue的同學可以參考下
一、什么是vue
vue是一套用于構建用戶頁面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現(xiàn)代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅(qū)動。
二、與原生JS的區(qū)別
我們可以通過一個小案例來演示
案例：把輸入框中的信息實時顯示在span標簽中
原生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元素的操作
總結：
- 創(chuàng)建DOM元素，使其成為Vue實例的掛載點，Vue實例中的所有數(shù)據(jù)這能在掛載點中使用
<div id=app> </div>
- 通過
new Vue來創(chuàng)建實例對象 el屬性指定當前Vue實例的掛載點data中是模型數(shù)據(jù)，這些數(shù)據(jù)依賴于當前Vue的實例，可以通過控制臺輸入app.msg來查看數(shù)據(jù)- 可以通過插值表達式使用data中的數(shù)據(jù)
三、數(shù)據(jù)綁定
數(shù)據(jù)綁定就是將Vue實例中的data屬性中的數(shù)據(jù)顯示在掛載點中
1、內(nèi)容綁定
將data中的數(shù)據(jù)顯示成內(nèi)容
<div id='app'>
<p>{{msg}}</p>
</div>
若想顯示html標簽只要是標簽中用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、表單標簽的值
可以使用v-model指令在表單標簽中使用雙向數(shù)據(jù)綁定。它會根據(jù)控件類型自動選取正確的方法來更新元素
1、文本框和文本域
<input type:'text' v-model="msg"></input> <textarea v-model:'msg'><textarea>
2、復選框
<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ā)時運行一些 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:['三國演習','西游記','老夫子'],
stus:[
{name:'小明',age:18},
{name:'小張',age:11},
{name:'小王',age:12}
]
}
})
從服務器中獲取數(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條件渲染分組
當需要切換多個元素的時候可以把v-if添加到template內(nèi)，因為<template>元素是一個不可見元素，渲染的結果將不包含<template>元素
<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template>
4、v-if-else顧名思義就是充當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較好；如果在運行時條件很少改變，則使用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
}
渲染結果為：
<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'
}
}
八、計算屬性
當我們需要計算模板中的值時可以使用計算屬性（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('')
}
}
})
九、偵聽器
偵聽器可以觀察和響應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>
當組件渲染時，slot會被替換為<span>插槽內(nèi)容</span>。插槽內(nèi)可以包含任何模板代碼
后備內(nèi)容
有時為一個插槽設置具體的后備 (也就是默認的) 內(nèi)容是很有用的，它只會在沒有提供內(nèi)容的時候被渲染。例如在一個 <submit-button> 組件中：
<button type="submit"> <slot></slot> </button>
我們可能希望這個 <button> 內(nèi)絕大多數(shù)情況下都渲染文本“Submit”。為了將“Submit”作為后備內(nèi)容，我們可以將它放在 <slot> 標簽內(nèi)：
<button type="submit"> <slot>Submit</slot> </button>
現(xiàn)在當我在一個父級組件中使用 <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)容都將會被傳入相應的插槽。任何沒有被包裹在帶有 v-slot 的 <template> 中的內(nèi)容都會被視為默認插槽的內(nèi)容。
然而，如果你希望更明確一些，仍然可以在一個 <template> 中包裹默認插槽的內(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>
以上就是學習Vue中必掌握的重點知識的詳細內(nèi)容，更多關于Vue重點知識的資料請關注腳本之家其它相關文章！
相關文章
better scroll可以實現(xiàn)輪播圖和頁面滾動，是移動端滾動插件，這篇文章主要介紹了vue better scroll 無法滾動的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
這篇文章主要為大家詳細介紹了Vue的生命周期，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構建單頁面應用,這篇文章主要給大家介紹了關于如何在Vue 3中擴展Vue Router鏈接的相關資料,需要的朋友可以參考下2021-06-06
這篇文章主要介紹了Vue 如何import服務器上的js配置文件，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-04-04
下面小編就為大家分享一篇vue編譯打包本地查看index文件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
本篇文章主要介紹了Nuxt.js踩坑總結分享，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
VueJs監(jiān)聽window.resize方法示例
本篇文章主要介紹了VueJs監(jiān)聽window.resize方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了vue中使用swiper5方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了Vue精簡版風格指南的相關資料，包括組件名稱，指令及特征,需要的朋友可以參考下2018-01-01
在Vue應用中，有時我們需要實現(xiàn)文件預覽和打印的功能，比如，我們可能需要預覽并打印PDF文件、圖片文件等，本文將介紹如何在Vue中實現(xiàn)文件預覽和打印的功能，并提供相應的代碼示例2023-06-06