學習Vue框架中必掌握的重點知識

更新時間：2021年04月07日 17:24:43 作者：寒酥丶

這篇文章主要介紹了學習Vue中必掌握的重點知識，想了解vue的同學可以參考下

一、什么是vue

vue是一套用于構(gòu)建用戶頁面的漸進式框架。與其它大型框架不同的是，Vue 被設(shè)計為可以自底向上逐層應用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，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元素的操作

總結(jié)：

創(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>元素是一個不可見元素，渲染的結(jié)果將不包含<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
}

渲染結(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'
 }
}

八、計算屬性

當我們需要計算模板中的值時可以使用計算屬性（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)容

有時為一個插槽設(shè)置具體的后備 (也就是默認的) 內(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)容，更多關(guān)于Vue重點知識的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

vue
框架

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

學習Vue框架中必掌握的重點知識

一、什么是vue

二、與原生JS的區(qū)別

三、數(shù)據(jù)綁定

1、內(nèi)容綁定

2、屬性綁定

3、表單標簽的值

四、事件處理

五、列表渲染

六、條件渲染

1、`v-if`指令用于條件性的渲染一塊內(nèi)容

2、也可以使用`v-else`添加一個else塊

3、在`<template>`元素上使用`v-if`條件渲染分組

4、`v-if-else`顧名思義就是充當`v-if`的else if塊，可連續(xù)使用

5、`v-show`同樣是根據(jù)條件展示元素

七、Class與Style綁定

八、計算屬性

九、偵聽器

十、插槽

插槽內(nèi)容

后備內(nèi)容

具名插槽

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

學習Vue框架中必掌握的重點知識

一、什么是vue

二、與原生JS的區(qū)別

三、數(shù)據(jù)綁定

1、內(nèi)容綁定

2、屬性綁定

3、表單標簽的值

四、事件處理

五、列表渲染

六、條件渲染

1、v-if指令用于條件性的渲染一塊內(nèi)容

2、也可以使用v-else添加一個else塊

3、在<template>元素上使用v-if條件渲染分組

4、v-if-else顧名思義就是充當v-if的else if塊，可連續(xù)使用

5、v-show同樣是根據(jù)條件展示元素

七、Class與Style綁定

八、計算屬性

九、偵聽器

十、插槽

插槽內(nèi)容

后備內(nèi)容

具名插槽

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

一、什么是vue

二、與原生JS的區(qū)別

三、數(shù)據(jù)綁定

2、屬性綁定

四、事件處理

五、列表渲染

六、條件渲染

1、`v-if`指令用于條件性的渲染一塊內(nèi)容

2、也可以使用`v-else`添加一個else塊

3、在`<template>`元素上使用`v-if`條件渲染分組

4、`v-if-else`顧名思義就是充當`v-if`的else if塊，可連續(xù)使用

5、`v-show`同樣是根據(jù)條件展示元素

七、Class與Style綁定

八、計算屬性

九、偵聽器

十、插槽