【Vue知識體系總結 2,常見的web開發技術

mb613826456e444 2021-09-18 20:27:12 阅读数:359

vue web

 2、v-cloak

 3、v-bind基礎用法

 4、v-bind綁定class屬性

 5、v-bind綁定class屬性,簡單寫法:

 6、v-bind綁定style樣式


一、前言


大家好,我是哪吒,一個熱愛技術的年輕人,架構師,是每一個程序員的夢想,因此,作為一個Java後端程序員,突擊前端,迫在眉睫,而目前來說,最火的前端框架無疑就是Vue,我們公司前端也都是Vue,每次與前端聯調的時候,因為對前端知識的匱乏,總是很無奈,不破不立,我决定花49天時間,系統的學習一下Vue。

因為酷愛鬥破蒼穹,這一系列就按照鬥破蒼穹中蕭炎的成長曆程為系列標題吧。

二、百度百科


Vue (讀音 /vju?/,類似於 view) 是一套用於構建用戶界面的漸進式JavaScript框架。?[5] [](

) ?與其它大型框架不同的是,Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層,不僅易於上手,還便於與第三方庫或既有項目整合。另一方面,當與現代化的工具鏈以及各種支持類庫結合使用時,Vue 也完全能够為複雜的單頁應用(SPA)提供驅動。

AngularJs是Vue早期開發的靈感來源。然而,AngularJS 中存在的許多問題,在 Vue 中已經得到解决。?

Vue.js是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是,Vue采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層,並且非常容易學習,非常容易與其它庫或已有項目整合。另一方面,Vue 完全有能力驅動采用單文件組件和Vue生態系統支持的庫開發的複雜單頁應用。

Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。

Vue.js 自身不是一個全能框架——它只聚焦於視圖層。因此它非常容易學習,非常容易與其它庫或已有項目整合。另一方面,在與相關工具和支持庫一起使用時??,Vue.js 也能驅動複雜的單頁應用。

三、Vue安裝


【Vue知識體系總結 2,常見的web開發技術_前端

IDE使用WebStorm。

四、Vue入門語法


1、使用Vue實現hello world


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">{{message}}</div>
<script src="../js/vue.js"></script>
<script> //編程範式:聲明式編程 //var沒有變量的作用域,var是js設計早期的缺陷 // let:變量;const:常量 let app = new Vue({ el: '#app',//用於掛載要管理的元素 data: {//定義數據 message: '你好啊,哪吒' } }) // 命令式編程 // 1.創建div元素,設置id屬性 //2.定義一個變量叫message //3.將message變量放到前面的div中顯示 </script>
</body>
</html>

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.

【Vue知識體系總結 2,常見的web開發技術_前端_02

2、vue列錶展示


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in girls">{{item}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script> const app = new Vue({ el: '#app', data: { message: '你好啊,哪吒', girls: ['美杜莎','雲韻','比比東','納蘭嫣然','雅妃'] } }) </script>
</body>
</html>

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.

【Vue知識體系總結 2,常見的web開發技術_Web_03

【Vue知識體系總結 2,常見的web開發技術_Web_04

3、實現簡單計數器


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<div id="app">
<h2>當前計數:{{counter}}</h2>
<!--<button v-on:click="counter++">+</button> <button v-on:click="counter--">-</button>-->
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script> // proxy代理 const app = new Vue({ el: '#app', data: { counter: 0 }, methods: { add: function (){ this.counter++ console.log('add被執行') }, sub: function (){ this.counter-- console.log('sub被執行') } } }) // 1.拿button元素 // 2.添加監聽事件 </script>
</html>

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.

【Vue知識體系總結 2,常見的web開發技術_程序員_05

五、vue中的MVVM


MVVM有助於將圖形用戶界面的開發與業務邏輯或後端邏輯(數據模型)的開發分離開來,這是通過置標語言或GUI代碼實現的。MVVM的_視圖模型_是一個值轉換器,這意味著視圖模型負責從模型中暴露(轉換)數據對象,以便輕松管理和呈現對象。在這方面,視圖模型比視圖做得更多,並且處理大部分視圖的顯示邏輯。視圖模型可以實現中介者模式,組織對視圖所支持的用例集的後端邏輯的訪問。

【Vue知識體系總結 2,常見的web開發技術_程序員_06

六、理解vue生命周期


1、生命周期代碼實例

【Vue知識體系總結 2,常見的web開發技術_Web_07

2、生命周期

【Vue知識體系總結 2,常見的web開發技術_程序員_08

3、分析生命周期相關方法的執行時機


//===創建時的四個事件
beforeCreate() { // 第一個被執行的鉤子方法:實例被創建出來之前執行
console.log(this.message) //undefined
this.show() //TypeError: this.show is not a function
// beforeCreate執行時,data 和 methods 中的 數據都還沒有沒初始化
},
created() { // 第二個被執行的鉤子方法
console.log(this.message) //床前明月光
this.show() //執行show方法
// created執行時,data 和 methods 都已經被初始化好了!
// 如果要調用 methods 中的方法,或者操作 data 中的數據,最早,只能在 created 中操作
},
beforeMount() { // 第三個被執行的鉤子方法
console.log(document.getElementById('h3').innerText) //{{ message }}
// beforeMount執行時,模板已經在內存中編輯完成了,尚未被渲染到頁面中
},
mounted() { // 第四個被執行的鉤子方法
console.log(document.getElementById('h3').innerText) //床前明月光
// 內存中的模板已經渲染到頁面,用戶已經可以看見內容
},
//===運行中的兩個事件
beforeUpdate() { // 數據更新的前一刻
console.log('界面顯示的內容:' + document.getElementById('h3').innerText)
console.log('data 中的 message 數據是:' + this.message)
// beforeUpdate執行時,內存中的數據已更新,但是頁面尚未被渲染
},
updated() {
console.log('界面顯示的內容:' + document.getElementById('h3').innerText)
console.log('data 中的 message 數據是:' + this.message)
// updated執行時,內存中的數據已更新,並且頁面已經被渲染
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.

七、動態綁定屬性



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{message}}
<h2>{{firstName}} * {{lastName}}</h2>
<h2>{{counter * 2}}</h2>
</div>
<script src="../js/vue.js"></script>
<script> const app = new Vue({ el: '#app', data: { message: '你好', firstName: '比比東', lastName: '美女', counter: 100 } }) </script>
</body>
</html>

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.

【Vue知識體系總結 2,常見的web開發技術_前端_09

1、v-once

展示message的初始值,message值變化,界面也不會產生變化。

2、v-cloak


### Vue
* 什麼是MVVM?
* mvvm和mvc區別?它和其它框架(jquery)的區別是什麼?哪些場景適合?
* 組件之間的傳值?
* Vue 雙向綁定原理
* 描述下 vue 從初始化頁面–修改數據–刷新頁面 UI 的過程?
* 虛擬 DOM 實現原理
* Vue 中 key 值的作用?
* Vue 的生命周期
* Vue 組件間通信有哪些方式?
* vue 中怎麼重置 data?
* 組件中寫 name 選項有什麼作用?
* Vue 的 nextTick 的原理是什麼?
* Vuex 有哪幾種屬性?
**[CodeChina開源項目:【大廠前端面試題解析+核心總結學習筆記+真實項目實戰+最新講解視頻】](https://ali1024.coding.net/public/P7/Web/git)**
![【Vue知識體系總結 2,常見的web開發技術_Web_10](https://s4.51cto.com/images/20210918/1631967489803987.jpg)
![【Vue知識體系總結 2,常見的web開發技術_前端_11](https://s6.51cto.com/images/20210918/1631967490966323.jpg)
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
版权声明:本文为[mb613826456e444]所创,转载请带上原文链接,感谢。 https://gsmany.com/2021/09/20210918202711680B.html