Vue學習筆記——Vue基礎語法

視頻資源來自：b站coderwhy王紅元老師——最全最新Vue、Vuejs教程，從入門到精通
文件僅為個人觀看視頻后的學習心得筆記，用于個人查看和記錄保存。文中定有疏漏錯誤之處，懇請指正。

Vue基礎語法

插值操作

Mustache

[胡須]雙大括號

{{firstName + ' ' + lastName}}

mustache語法中，不僅可以直接寫變量，也可以寫簡單的表達式

{{counter * 2}}

v-once

只用一次，后臺數據變了，{{}}里的不變

v-html

新的超鏈接寫法

image-20210714194134612

image-20210714194232544

v-text

<h2 v-text="message">，YY</h2>

運行后，原本標簽里的文字（，YY）會被覆蓋

v-pre

<h2 v-pre>{{message}}</h2>

表示直接顯示大括號（轉義）

v-cloak

防止閃爍

在vue解析之前，div中有一個屬性v-cloak

在vue解析之后，div中沒有一個屬性v-cloak

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    [v-cloak]{
      display: none;
    }
  </style>
</head>
<body>
<div id="app" v-cloak>
  {{message}}
</div>
<script src="../js/vue.js"></script>
<script>
  setTimeout(function () {
    const app=new Vue({
      el: '#app',
      data: {
        message: '你好啊'
      }
    })
  },1000)
</script>

↑設置了延時

動態綁定屬性v-bind

動態決定某些屬性

語法糖 :

<div id="app">
  <img v-bind:src="imgURL" alt="">
  <a v-bind:href="aHref">百度一下</a>
  <img :src="imgURL" alt="">
  <a :href="aHref">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      imgURL: 'https://www.baidu.com/img/540x258_2179d1243e6c5320a8dcbecd834a025d.png',
      aHref: 'http://www.baidu.com'
    }
  })
</script>

v-bind動態綁定class

用：class時，都是整合疊加，不是覆蓋

對象語法：

<div id="app">
  <h2 class="active">{{message}}</h2>
  <h2 :class="active11">{{message}}</h2>
 <!-- <h2 v-bind:class="{類名1:boolean,類名2:boolean}}">{{message}}</h2>-->
  <h2 class="title" :class="getClass()">{{message}}</h2>
  <button v-on:click= "btnClick" >按鈕</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      active11: 'active',
      isActive: 'true',
      isLine: 'false'
    },
    methods: {
      btnClick: function () {
        this.isActive = !this.isActive
      },
      getClass: function () {
        return {active: this.isActive, line: this.isLine}
      }
    }
  })
</script>

image-20210714200013510

數組語法：

<div id="app">
  <h2 class="title" :class="['active','line']">{{message}}</h2>
  <h2 class="title" :class="[active,line]">{{message}}</h2>
  <h2 class="title" :class="getClasses()">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      active: 'aaa',
      line: 'bbb'
    },
    methods: {
      getClasses: function () {
        return [this.active,this.line]
      }
    }
  })
</script>

image-20210714195510198

v-bind綁定style

對象語法：

如：

<h2 :style="{frontSize:'50px'}"

在css中，50px不用加單引號、字符串也不用。但在vue語法中，不加單引號會把50px當作一個變量。

<h2 :style="{finalSize + '50px'}"

其中，frontSize: '100'，是個變量

數組語法：

<div id="app">
  <h2 :style="[backStyle,backStyle1]">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      backStyle: {backgroundColor: 'green'},
      backStyle1: {fontSize: '80px'}
    }
  })
</script>

計算屬性

<div id="app">
  <h2>總價格：{{totalPrice}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      books: [
        {id:110, name: '老鼠愛大米', price:119},
        {id:111, name: '白夜行', price:80},
        {id:112, name: '算法筆記', price:112},
      ]
    },
    computed: {
      totalPrice: function () {
        let result=0
        for(let i=0; i<this.books.length;i++)
          result+=this.books[i].price
        return result
      }
    }
  })
</script>

因為在computed計算屬性中，調用函數時后面不用加括號()

計算屬性的setter和getter

image-20210714201403890

計算屬性一般沒有set方法，只讀屬性

get這一行也可以刪

字符串分割

computed 效率比methods高

ES6補充

塊級作用域：ES5之前，因為if和for都沒有塊級作用域的概念，所以在很多時候，我們必須借助function的作用域來解決應用外面變量的問題

ES6語法：let/var ←全局變量，不受限制會造成變量污染

1.塊級作用域：變量在十米范圍內是可用的

2.沒有塊級作用域引起的問題：if的塊級

3.沒有塊級作用域引起的問題：for的塊級

const的使用：在ES6開發中，優先使用const，只有需要改變某一個標識符的時候才使用let

1.注意一：一旦給const修飾的標識符被賦值之后，不能修改

2.注意二：在使用const定義修飾符，必須進行賦值

3.注意三：常量的含義是指向的對象（保存的是對象的內存地址，const不能變，地址里的內容可以變）不能修改，但是可以改變對象內部的屬性

對象字面量增強寫法

1.屬性的增強寫法

2.函數的增強寫法

事件監聽

v-on的基本使用和語法糖

事件監聽
語法糖 v-on: @
click 鼠標點
keyup 鍵盤彈起

v-on的參數傳遞問題

①事件調用的方法沒有參數
情況一：如果方法不需要額外參數，那么方法后的（）可以不添加

②在事件定義時，寫出函數時省略了小括號，但是方法本身是需要一個參數的，這個時候，Vue會默認將瀏覽器產生的event事件對象作為參數傳入方法
（如果函數需要參數，但沒有傳，那么形參為undefine）

情況三：③方法定義時，我們需要event對象，又需要傳參數
btnClick（123， $event）不能去$ ，不然會把它當成變量/方法
在調用方法時，手動獲取到瀏覽器的event對象：$event

v-on修飾符使用

1 .stop修飾符的使用 - 調用 event.stopPropagation()。

<div @click="divClick">aaa
  <button @click.stop="btnClick">按鈕</button>
</div>

image-20210722092356922

2 .prevent - 調用 event.preventDefault()。
阻止自動向服務器提交，自己提交

<input type="submit" value=提交 @click.prevent="submitClick">

3 .{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回調。
監聽某個鍵盤鍵的點擊

<input type="text" @keyup ="keyUp">
<input type="text" @keyup.enter ="enterUp">

4 .native - 監聽組件根元素的原生事件。

5 .once - 只觸發一次回調。

條件判斷

v-if 和 v-else-if 和 v-else 的使用

<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>
</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      score: 99
    }
  })
</script>

登陸切換小案例——key

<div id="app">
  <span v-if="isUser">
    <label for="userName">用戶賬戶</label>
    <input type="text" id="userName" placeholder="用戶賬戶">
  </span>
  <span v-else>
    <label for="userEmail">用戶郵箱</label>
    <input type="text" id="userEmail" placeholder="用戶郵箱">
  </span>

  <button @click="isUser=!isUser">切換類型</button>
</div>

for的作用：單記label文字，也能在userName文本框里出光標，相當于單擊文本框

vue中，切換時，要進行對比后再修改?！鲜?可能造成單擊切換后不顯示的問題，可以增加一個key屬性。key = "uerName"，key不一樣時，就不會復用

v-show

<h2 v-show="isShow" id="aaa">{{message}}</h2>

v-if當條件為false時，壓根不會有對應的元素在DOM中。
v-show當條件為false時，僅僅是將元素的display屬性設置為none而已。

當需要在顯示和隱藏之間切換很頻繁時，用v-show，不頻繁用v-if

循環遍歷

v-for遍歷數組和對象

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

在編歷過程中，如果只是獲取一個值，那么獲取到的是value

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

v-for綁定和非綁定key的區別

app.letters.splice(2,3)
//letters是數組。從低2個位置開始，刪除第3個元素
app.letters.splice(2,0,'F')
//從第2個位置后面插入一個'F'

沒有key綁定時，在中間插入元素時間復雜度為O(n)
:key = 'm' 其中元素字符串需要唯一，時，時間復雜度為O(1)

掌握數組中哪些方法是響應式的

1.push方法

this.letters.push('Y','PP','CC')

2.pop() 刪除數組中最后一個元素

3.shift() 刪除數組中第一個元素

4.unshift() 在數組最前面添加元素

this.letters.unshift（'YY','PP'）

function sum(...num){
  console.log.(num);
}
sum(20,30,40,50,60,33)

...表示可以傳入多個值

5.splice() 刪除元素/插入元素/替換元素
刪除元素：第二個參數表示刪除幾個元素（如果不寫，就刪除參數一后面所有元素）
splice(1,3,'m','n','1')←替換
刪1后面3個元素，再在這加3個元素

6.reserve() 反轉數組內容

*7.set(要修改的對象，索引值，修改后的值)

Vue.set(this.letters,0,'Y')

非響應式：

通過索引值修改數組中的元素

this.letters[0]='YY'

=== 三個等于，既比較值又比較類型

購物車案例

過濾器

<h2>總價格:{{totalPrice|finalPrice}}</h2>

在js中

filters: {
  finalPrice(price){
    return '￥'+price.toFixed(2);
  }
},

把所有元素都經過一遍filters，得到固定2位小數的價格。

按鈕有個屬性為disabled

1.for循環

for(let i=0;i<this.books.length;i++)
  
for(let i in this.books)
  
for(let item of this.books){
  totalPrice += item.price * item.count
}

JavaScript高階函數的使用

編程范式：命令式編程/聲明式編程

編程范式：面向對象編程/函數式編程
第一公民：對象函數

1.filter函數的使用

filter中的回調函數必須返回一個boolean值
true：函數內部會自動將這次回調的n加入到新的數組中
false：函數內部過濾掉這次的n

let newNums = nums.filter(function(n){
  return n<100
})

2.map函數的使用

let newNums = nums.map(function(n){
  return n*2
})

3.reduce的使用對數組中所有的內容進行匯總

let total = newNums.reduce(function(preValue,n){
  return preValue + n
},0)

連著寫

let total = nums.filter(function(n){
  return n<100
}).map(function(n){
  return n*2
}).reduce(function(preValue,n){
  return preValue + n
},0)

let total = nums.filter(n => n<100
}).map(n => n*2
}).reduce((preValue,n) => preValue + n
},0)

v-model

v-model原理

input和message雙向綁定，修改文本框中的數據后，message也會改變

<div id="app">
  <input type="text" v-model="message">
  <input type="text" :value="message" @input="valueChange">
  <input type="text" :value="message" @input="message = $event.target.value">
  <h2>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    methods:{
      valueChange(event){
        this.message = event.target.value;
      }
    }
  })
</script>

image-20210722112314498

input 輸入事件

v-model:radio

<label for="male">
  <input type="radio" id="male" name="sex">男
</label>
<label for="female">
  <input type="radio" id="female" name="sex">女
</label>

↑相同name，只能提交一個，實現互斥

↓不用name，用v-model也能實現互斥

<div id="app">
  <label for="male">
    <input type="radio" id="male" value="男" v-model="sex">男
  </label>
  <label for="female">
    <input type="radio" id="female" 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>

sex 開始默認選男。如果為空''，默認不選

v-model：checkbox

單選框

  <label for="license">
    <input type="checkbox" id="license" v-model="isAgree">同意協議
  </label>
  <h2>您選擇的是：{{isAgree}}</h2>
  <button :disabled="!isAgree">下一步</button>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      isAgree: false,
    }
  })
</script>

多選框，綁定數組

<div id="app">
  <input type="checkbox" value="籃球" v-model="hobbies">籃球
  <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
  <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
  <h2>您選擇的是：{{hobbies}}</h2>

  <label v-for="m in originHobbies" for="m">
    <input type="checkbox" :value="m" v-model="hobbies" id="m">{{m}}
  </label>

</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      isAgree: false,
      hobbies:[],
      originHobbies: ['籃球','足球','乒乓球','羽毛球']
    }
  })
</script>

v-model：select

<div id="app">
  <select name="abc"  v-model="fruit">
    <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>
  </select>
  <h2>您選擇的是：{{fruits}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      fruit: '香蕉',
      fruits: []
    }
  })
</script>

input中的值綁定

v-model修飾符的使用

1 .lazy懶加載

v-model.lazy
只在失去焦點，或回車時改

2 .number

<input type="number" v-model.number="age">
<h2>{{typeof age}}</h2>

默認綁定的是String類型，加了.number之后，變成了number型

3 .trim

v-model.trim 去除前后空格

總目錄：
邂逅Vuejs
Vue基礎語法
組件化開發
 前端模塊化
webpack詳解
Vue CLI詳解
vue-router
Promise的使用
Vuex詳解
網絡模塊封裝
項目實戰

最后編輯于：2021.07.25 14:53:36

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 227,748評論 6贊 531
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 98,165評論 3贊 414
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 175,595評論 0贊 373
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 62,633評論 1贊 309
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 71,435評論 6贊 405
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 54,943評論 1贊 321
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 43,035評論 3贊 440
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 42,175評論 0贊 287
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 48,713評論 1贊 333
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 40,599評論 3贊 354
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 42,788評論 1贊 369
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 38,303評論 5贊 358
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 44,034評論 3贊 347
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 34,412評論 0贊 25
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 35,664評論 1贊 280
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 51,408評論 3贊 390
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 47,747評論 2贊 370

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

Vue學習筆記——Vue基礎語法

Vue學習筆記——Vue基礎語法

Vue基礎語法

插值操作

Mustache

v-once

v-html

v-text

v-pre

v-cloak

動態綁定屬性v-bind

v-bind動態綁定class

v-bind綁定style

計算屬性

ES6補充

事件監聽

v-on的基本使用和語法糖

v-on的參數傳遞問題

v-on修飾符使用

條件判斷

v-if 和 v-else-if 和 v-else 的使用

登陸切換小案例——key

v-show

循環遍歷

v-for遍歷數組和對象

v-for綁定和非綁定key的區別

掌握數組中哪些方法是響應式的

購物車案例

JavaScript高階函數的使用

v-model

v-model原理

v-model:radio

v-model：checkbox

v-model：select

input中的值綁定

v-model修飾符的使用

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

Vue學習筆記——Vue基礎語法

Vue基礎語法

插值操作

Mustache

v-once

v-html

v-text

v-pre

v-cloak

動態綁定屬性v-bind

v-bind動態綁定class

v-bind綁定style

計算屬性

ES6補充

事件監聽

v-on的基本使用和語法糖

v-on的參數傳遞問題

v-on修飾符使用

條件判斷

v-if 和 v-else-if 和 v-else 的使用

登陸切換小案例——key

v-show

循環遍歷

v-for遍歷數組和對象

v-for綁定和非綁定key的區別

掌握數組中哪些方法是響應式的

購物車案例

JavaScript高階函數的使用

v-model

v-model原理

v-model:radio

v-model：checkbox

v-model：select

input中的值綁定

v-model修飾符的使用

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频