當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

第二天：Vue基础语法

發布時間：2023/11/28 生活经验 35 豆豆

生活随笔收集整理的這篇文章主要介紹了第二天：Vue基础语法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1、計算屬性的setter和getter

每個計算屬性都有setter和getter

一般來說用到setter較少，都不希望數據被改動，所以只用getter時也有縮寫

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><h2>{{fullName}}</h2>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {firstName: 'Lebron',lastName: 'James'},computed: {fullName: {set: function (newValue) {const names = newValue.split(' ');this.firstName = names[0];this.lastName = names[1];},get: function () {return this.firstName + ' ' + this.lastName;}}}})
</script>
</body>
</html>

不用setter方法時，便可使用縮寫，如下：

fullName: function () {return this.firstName + ' ' + this.lastName;}

計算屬性和methods的對比

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><!--1、直接拼接：語法過于繁瑣--><h2>{{firstName}} {{lastName}}</h2><!--2、使用methods方法--><h2>{{getFullName()}}</h2><h2>{{getFullName()}}</h2><h2>{{getFullName()}}</h2><h2>{{getFullName()}}</h2><!--3、通過computed--><h2>{{fullName}}</h2><h2>{{fullName}}</h2><h2>{{fullName}}</h2><h2>{{fullName}}</h2>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {firstName: 'Lebron',lastName: 'James'},computed: {fullName: function () {return this.firstName + ' ' + this.lastName;}},methods: {getFullName: function () {return this.firstName + ' ' + this.lastName;}}})
</script>
</body>
</html>

在上述代碼中，getFullName()方法被調用了四次，而fullName只被調用了一次。
計算屬性會進行緩存，如果多次使用只會調用一次。
在多次使用的情況下，使用計算屬性的性能更高。

2、v-on的基本使用

作用：綁定事件監聽器
縮寫：@
這里我們用一個監聽按鈕的點擊事件，來簡單看看v-on的使用

  <button v-on:click="counter++">+</button><button @click="counter--">-</button>

v-on參數傳遞問題

當通過methods中定義方法，以供@click調用時，需要注意參數問題：
情況一：如果該方法不需要額外參數，那么方法后的()可以不添加
但是注意：如果方法本身中有一個參數，那么會默認將原生事件event參數傳遞進去。
情況二：如果需要同時傳入某個參數，同時需要event時，可以通過$event傳入事件。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><!--1、事件調用的方法沒有參數--><button @click="btn1Click()">按鈕1</button><button @click="btn1Click">按鈕1</button><!--2、在事件定義時，寫函數時省略了小括號，但是方法本身是需要參數的--><button @click="btn2Click(123)">按鈕2</button><button @click="btn2Click">按鈕2</button><!--3、在方法定義時，我們需要event對象，同時又需要其他參數--><button @click="btn3Click">按鈕3</button><button @click="btn3Click(123,$event)">按鈕3</button>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {counter: 0,EVENT: 'whyCode'},methods: {btn1Click() {console.log('btn1Click');},btn2Click(abc) {console.log(abc,'--------');},btn3Click(abc,event){console.log('++++++',abc,event);}}})
</script>
</body>
</html>

v-on的修飾符

在某些情況下，我們拿到event的目的可能是進行一些事件處理。
Vue提供了修飾符來幫助我們方便的處理一些事件：
1、.stop:調用了event.stopPropagation().
2、.prevent:調用了event.preventDefault().
3、.{keyCode|keyAlias}:只當事件是從特定鍵觸發時才能觸發回調.
4、.native:監聽組件根元素的原生事件.
5、.once:只觸發一次回調.

3、條件判斷

v-if、v-else-if、v-else

這三個指令與JavaScript的條件語句if、else、else if類似。
Vue的條件指令可以根據表達式的值在DOM中渲染或銷毀元素或組件。

v-if后面的條件為false時，對應的元素以及其子元素不會渲染。也就是根本不會有對應的標簽出現在DOM中。

案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><h2 v-if="score>=90">優秀</h2><h2 v-else-if="score>=80">良好</h2><h2 v-else-if="score>=60">及格</h2><h2 v-else>不及格</h2><h1>{{result}}</h1>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {score: 99},computed: {result() {let showMessage = '';if (this.score >= 90) {showMessage = '優秀';}else if (this.score >= 80){showMessage = '良好';}else if (this.score >= 60){showMessage = '及格';}else{showMessage = '不及格';}return showMessage;}}})
</script>
</body>
</html>

4、v-show的基本使用

<div id="app"><h2 v-if="isShow" id="aaa">{{message}}</h2><h2 v-show="isShow" id="bbb">{{message}}</h2>
</div>

v-if和v-show的區別

v-if:當條件為false時，包含v-if指令的元素根本就不會存在于DOM中，而v-show只是給我們的元素添加了一個行內樣式：display:none

開發中如何選擇

當需要在顯示與隱藏之間切片很頻繁時，使用v-show；當只有一次切換時，通過使用v-if。開發中，使用v-if中更多。

5、v-for遍歷數組及對象

遍歷數組

1）在遍歷的過程中，沒有使用索引值（下標值）

<ul><li v-for="item in names">{{item}}</li></ul>

2）在遍歷的過程中，獲取索引值

<ul><li v-for="(item,index) in names">{{index+1}}.{{item}}</li></ul>

遍歷對象

1）在遍歷對象的過程中，如果只是獲取一個值，那么獲取到的是value

 <ul><li v-for="item in info">{{item}}</li></ul>

2）獲取key和value的值

  <ul><li v-for="(value,key) in info">{{key}}-{{value}}</li></ul>

3）獲取key、value和index的值

   <ul><li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index}}</li></ul>

6、v-model的基本使用和原理

表單控件在實際開發中是非常常見的。特別是對于用戶信息的提交，需要大量的表單。
Vue中使用v-model指令來實現表單元素和數據的雙向綁定。

v-model原理

v-model其實是一個語法糖，它的背后本質上是包含兩個操作：
1、v-bind綁定一個value屬性
2、v-on指令給當前元素綁定input事件。

<input type="text" v-model="message">
等同于
<input type="text" :value="message" @input="message = $event.target.value">

v-model與常見標簽的案例

下面是v-model與radio結合的案例：

<body>
<div id="app"><label for="male"><input type="radio" id="male" name="sex" value="男" v-model="sex">男</label><label for="female"><input type="radio" id="female" name="sex" value="女" v-model="sex">女</label><h2>您選擇的性別是：{{sex}}</h2>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',sex: ''}})
</script>
</body>

下面是v-model和checkbox結合的案例：

<body>
<div id="app"><!--1、checkbox單選框--><label for="agree"><input type="checkbox" id="agree" v-model="isAgree">同意協議<h2>您選擇的是:{{isAgree}}</h2><button :disabled="!isAgree"></button></label><!--2、checkbox多選框--><input type="checkbox" value="籃球" v-model="hobbies">籃球<input type="checkbox" value="足球" v-model="hobbies">足球<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球<h2>您的愛好是：{{hobbies}}</h2>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',isAgree: true, //對應單選框hobbies: []  //對應多選框}})
</script>
</body>

下面是v-model和select結合的案例：

<body>
<div id="app"><!--選擇單個--><select name="abc" v-model="fruit"><option value="蘋果">蘋果</option><option value="香蕉">香蕉</option><option value="哈密瓜">哈密瓜</option><option value="火龍果">火龍果</option><option value="車厘子">車厘子</option></select><h2>您選擇的水果是：{{fruit}}</h2><!--選擇多個--><select name="abc" v-model="fruits" multiple><option value="蘋果">蘋果</option><option value="香蕉">香蕉</option><option value="哈密瓜">哈密瓜</option><option value="火龍果">火龍果</option><option value="車厘子">車厘子</option></select><h2>您選擇的水果是：{{fruits}}</h2>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',fruit: '蘋果',fruits: []}})
</script>
</body>

v-model的修飾符

lazy修飾符

默認情況下，v-model默認是在input事件中同步輸入框的數據。一旦數據發生改變對應的data中的數據就會自動發生改變。lazy修飾符可以讓數據在失去叫點或者回車時才會更新。

number修飾符

默認情況下，在輸入框中，無論我們輸入的是字母還是數字，都會被當做字符串類型進行處理，但是如果我們希望處理的是數字類型，那么最好直接將內容當做數字處理。number修飾符可以讓在輸入框中輸入的內容自動轉化成數字類型。

trim修飾符

如果輸入的內容收尾有很多空格，通常我們希望將其取出，trim修飾符可以過濾內容左右兩邊的空格。

總結

以上是生活随笔為你收集整理的第二天：Vue基础语法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。