當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue学习(一)-邂逅Vuejs

發(fā)布時(shí)間：2025/4/5 vue 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue学习(一)-邂逅Vuejs 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

Vue學(xué)習(xí)（一）- 邂逅Vuejs

零、視頻鏈接
一、邂逅Vuejs
- 1.認(rèn)識(shí)Vuejs
- - 1.1 為什么學(xué)習(xí)Vuejs
  - 1.2 簡(jiǎn)單認(rèn)識(shí)一下Vuejs
- 2.Vuejs安裝方式
- - 2.1 CDN引入
  - 2.2 下載和引入
  - 2.3 NPM安裝管理
- 3. Vuejs初體驗(yàn)
- - 3.1 Hello Vuejs
  - 3.2 Vue列表展示
  - 3.3 案例：計(jì)數(shù)器
- 4. Vuejs的MVVM
- - 4.1 Vue中的MVVM
- 5. 創(chuàng)建Vue時(shí), options可以放那些東西

零、視頻鏈接

最全最新Vue、Vuejs教程，從入門到精通

一、邂逅Vuejs

1.認(rèn)識(shí)Vuejs

1.1 為什么學(xué)習(xí)Vuejs

Vuejs在前端需求中最多，找前端工作必備技能。

1.2 簡(jiǎn)單認(rèn)識(shí)一下Vuejs

vue是一個(gè)漸進(jìn)式框架：可以將Vue作為應(yīng)用的一部分嵌入，慢慢修改整個(gè)項(xiàng)目。
可以不需要具備其他類似Angular、React，甚至jQuery的經(jīng)驗(yàn)。（但需要一定HTML、CSS、JavaScript基礎(chǔ)）
Vue有很多特點(diǎn)和web開發(fā)中常見的高級(jí)功能
- 解耦視圖和數(shù)據(jù)
- 可復(fù)用的組件
- 前端路由技術(shù)
- 狀態(tài)管理
- 虛擬DOM

2.Vuejs安裝方式

2.1 CDN引入

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

2.2 下載和引入

開發(fā)環(huán)境 https://vuejs.org/js/vue.js
生產(chǎn)環(huán)境 https://vuejs.org/js/vue.min.js

2.3 NPM安裝管理

后續(xù)通過webpack和CLI的使用，使用該方式

3. Vuejs初體驗(yàn)

3.1 Hello Vuejs

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div id="app"><h2>{{message}}</h2><h3>{{name}}</h3> </div>   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script>//let(變量)、const(常量)// 編程范式:聲明式編程const app = new Vue({el: '#app', //用于掛在vue需要管理的對(duì)象data:{ //定義數(shù)據(jù)message: 'Hello Vuejs',name: 'ZYH'}})//原生js做法(編程范式:命令式編程)//1.創(chuàng)建div元素，設(shè)置id屬性//2.定義一個(gè)變量叫message//3.將message變量放在前面的div元素中顯示 </script> </body> </html>

3.2 Vue列表展示

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app"><ul><li>{{movies[0]}}</li><li>{{movies[1]}}</li><li>{{movies[2]}}</li><li>{{movies[3]}}</li></ul><ul><li v-for="item in movies">{{item}}</li></ul></div>   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script>const app = new Vue({el:'#app',data:{message : '你好啊',movies : ['星際穿越','大話西游','盜夢(mèng)空間','少年派']}}) </script></body> </html>

3.3 案例：計(jì)數(shù)器

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app"><h2>當(dāng)前計(jì)數(shù): {{counter}}</h2>  <button v-on:click="add">+</button><button v-on:click="sub">-</button> </div>   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script>const app = new Vue({el:'#app',data:{counter : 0},methods:{add: function () {this.counter++; //用來找到本對(duì)象中的counter，如果直接用counter會(huì)找全局變量的counterconsole.log('add被執(zhí)行');},sub: function () {this.counter--;console.log('sub被執(zhí)行');}}}) </script> </body> </html>

4. Vuejs的MVVM

4.1 Vue中的MVVM

MVVM : Model ViewModel View
view層
- 視圖層
- 在我們前端開發(fā)中，通常就是DOM層。
- 主要的作用是給用戶展示各種信息。
Model層
- 數(shù)據(jù)層
- 數(shù)據(jù)可能是我們固定死的數(shù)據(jù)，更多是來自我們服務(wù)器，從網(wǎng)絡(luò)上請(qǐng)求下來的數(shù)據(jù)。
- 在我們計(jì)數(shù)器案例中們就是后面抽取出來的obj，當(dāng)然，里面的數(shù)據(jù)可能沒有這么簡(jiǎn)單。
VueModel層：
- 視圖模型層
- 視圖模型層是View和Model溝通的橋梁。
- 一方面它實(shí)現(xiàn)了Data Binding，也就是數(shù)據(jù)綁定，將Model的改變實(shí)時(shí)的反應(yīng)到View中。
- 另一方面它實(shí)現(xiàn)了DOM Listener，也就是DOM監(jiān)聽，當(dāng)DOM發(fā)生一些事件(帶年紀(jì)、滾動(dòng)、touch等)時(shí)，可以監(jiān)聽到，并在需要的情況下改變對(duì)應(yīng)的Data。

5. 創(chuàng)建Vue時(shí), options可以放那些東西

el:
- 類型：string| HTMLElement
- 作用：決定之后Vue實(shí)例會(huì)管理哪個(gè)DOM
data:
- 類型：Object | Function（組件中data必須是一個(gè)函數(shù)）
- 作用：Vue實(shí)例對(duì)應(yīng)的數(shù)據(jù)對(duì)象。
methods:
- 類型：{[key:string]:Function}
- 作用：定義屬于Vue的一些方法，可以在其他地方調(diào)用，也可以在指令中使用。
生命周期函數(shù)

總結(jié)

以上是生活随笔為你收集整理的Vue学习(一)-邂逅Vuejs的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

Vue
vuejs

上一篇： LeetCode-位运算-36. 只出现
下一篇： LeetCode-滑动窗口-3. 无重复