Vue学习(一)-邂逅Vuejs
生活随笔
收集整理的這篇文章主要介紹了
Vue学习(一)-邂逅Vuejs
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Vue學習（一）- 邂逅Vuejs
- 零、視頻鏈接
- 一、邂逅Vuejs
- 1.認識Vuejs
- 1.1 為什么學習Vuejs
- 1.2 簡單認識一下Vuejs
- 2.Vuejs安裝方式
- 2.1 CDN引入
- 2.2 下載和引入
- 2.3 NPM安裝管理
- 3. Vuejs初體驗
- 3.1 Hello Vuejs
- 3.2 Vue列表展示
- 3.3 案例：計數器
- 4. Vuejs的MVVM
- 4.1 Vue中的MVVM
- 5. 創建Vue時, options可以放那些東西
零、視頻鏈接
最全最新Vue、Vuejs教程，從入門到精通
一、邂逅Vuejs
1.認識Vuejs
1.1 為什么學習Vuejs
- Vuejs在前端需求中最多，找前端工作必備技能。
1.2 簡單認識一下Vuejs
- vue是一個漸進式框架：可以將Vue作為應用的一部分嵌入，慢慢修改整個項目。
- 可以不需要具備其他類似Angular、React，甚至jQuery的經驗。（但需要一定HTML、CSS、JavaScript基礎）
- Vue有很多特點和web開發中常見的高級功能
- 解耦視圖和數據
- 可復用的組件
- 前端路由技術
- 狀態管理
- 虛擬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 下載和引入
- 開發環境 https://vuejs.org/js/vue.js
- 生產環境 https://vuejs.org/js/vue.min.js
2.3 NPM安裝管理
- 后續通過webpack和CLI的使用，使用該方式
3. Vuejs初體驗
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><!--引入vue--> <!--<script src="../js/vue.js"></script>--> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script>//let(變量)、const(常量)// 編程范式:聲明式編程const app = new Vue({el: '#app', //用于掛在vue需要管理的對象data:{ //定義數據message: 'Hello Vuejs',name: 'ZYH'}})//原生js做法(編程范式:命令式編程)//1.創建div元素，設置id屬性//2.定義一個變量叫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><!--引入vue--> <!--<script src="../js/vue.js"></script>--> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script>const app = new Vue({el:'#app',data:{message : '你好啊',movies : ['星際穿越','大話西游','盜夢空間','少年派']}}) </script></body> </html>3.3 案例：計數器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app"><h2>當前計數: {{counter}}</h2><!-- v-on監聽click事件，當監聽到了就計數++或自減--> <!-- <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><!--引入vue--> <!--<script src="../js/vue.js"></script>--> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <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++; //用來找到本對象中的counter，如果直接用counter會找全局變量的counterconsole.log('add被執行');},sub: function () {this.counter--;console.log('sub被執行');}}}) </script> </body> </html>4. Vuejs的MVVM
4.1 Vue中的MVVM
-
MVVM : Model ViewModel View
-
view層
- 視圖層
- 在我們前端開發中，通常就是DOM層。
- 主要的作用是給用戶展示各種信息。
-
Model層
- 數據層
- 數據可能是我們固定死的數據，更多是來自我們服務器，從網絡上請求下來的數據。
- 在我們計數器案例中們就是后面抽取出來的obj，當然，里面的數據可能沒有這么簡單。
-
VueModel層：
- 視圖模型層
- 視圖模型層是View和Model溝通的橋梁。
- 一方面它實現了Data Binding，也就是數據綁定，將Model的改變實時的反應到View中。
- 另一方面它實現了DOM Listener，也就是DOM監聽，當DOM發生一些事件(帶年紀、滾動、touch等)時，可以監聽到，并在需要的情況下改變對應的Data。
5. 創建Vue時, options可以放那些東西
- el:
- 類型：string| HTMLElement
- 作用：決定之后Vue實例會管理哪個DOM
- data:
- 類型：Object | Function（組件中data必須是一個函數）
- 作用：Vue實例對應的數據對象。
- methods:
- 類型：{[key:string]:Function}
- 作用：定義屬于Vue的一些方法，可以在其他地方調用，也可以在指令中使用。
- 生命周期函數
總結
以上是生活随笔為你收集整理的Vue学习(一)-邂逅Vuejs的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： LeetCode-位运算-36. 只出现
- 下一篇： LeetCode-滑动窗口-3. 无重复