當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue入门之vue框架简介库和框架的区别MVVM介绍安装vuevue所管理的边界双向数据绑定vue事件vue的生命周期

發布時間：2023/12/18 vue 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue入门之vue框架简介库和框架的区别MVVM介绍安装vuevue所管理的边界双向数据绑定vue事件vue的生命周期小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

轉載請標明出處：https://blog.csdn.net/men_ma/article/details/106847165.
本文出自不怕報錯就怕不報錯的小猿猿的博客

Vue入門之vue框架簡介&庫和框架的區別&MVVM介紹&安裝vue&vue所管理的邊界&雙向數據綁定&vue事件&vue的生命周期

1.vue框架簡介
- - 1.1 什么是Vue.JS ?
  - 1.2 MVVM為什么要學習Vue框架什么是框架？框架的作用？
  - 1.3 前端提高開發效率的發展歷程：
2.庫和框架的區別
- 2.1 庫
- 2.3 框架
- 3.MVVM的介紹
4.安裝vue
- 4.1 cdn下載(需連接網絡)建議使用
- 4.2 手動下載
3.入門簡單案例（代碼）
- 3.1 Vue所管理的邊界（知識點）helloworld.html
- 3.2 雙向數據綁定（一定要有v-model屬性才是雙向綁定）
- 3.3 Vue事件
- 3.4 vue的生命周期

1.vue框架簡介

1.1 什么是Vue.JS ?

Vue是目前最火最流行（在國內）的一個前端框架，與Angular.js、React.js并成為前端三大框架。Vue適用于分布式項目，百分之八九十的公司都會選擇vue前端框架。 Vue是一個構建用戶界面(UI)的[漸進式]JavaScript框架。

Vue的官網：https://cn.vuejs.org/.

Vue的作者：尤雨溪/中國無錫

1.2 MVVM為什么要學習Vue框架什么是框架？框架的作用？

框架：半成品的項目。提高開發效率。

1.3 前端提高開發效率的發展歷程：

DOM：原生JS -> JQuery -> 前端模板引擎（DOM操作，降低了ajax請求函數的復用性）

2.庫和框架的區別

2.1 庫

庫(Library)，本質上是一些函數的集合。每次調用函數，實現一個特定的功能，接著把控制權交給使用者代表：jQueryjQuery這個庫的核心：DOM操作，即：封裝DOM操作，簡化DOM操作

2.3 框架

框架(Framework)，是一套完整的解決方案，使用框架的時候，需要把你的代碼放到框架合適的地方，框架會在合適的時機調用你的代碼代表：vue框架規定了自己的編程方式，是一套完整的解決方案使用框架的時候，由框架控制一切，我們只需要按照規則寫代碼框架的侵入性很高(從頭到尾)

3.MVVM的介紹

MVVM：Angular、Vue、React這些框架。能夠幫助我們減少不必要的DOM操作；提高渲染效率；數據雙向綁定（通過框架提供的指令，我們只需要關心數據的業務邏輯，不需要關心DOM是如何渲染的）。在vue中，一個核心的概念就是不讓用戶去操作dom元素

MVVM，一種更好的UI模式解決方案，MVVM通過數據雙向綁定讓數據自動地雙向同步MVVM ===> M / V / VMM：model數據模型V：view視圖VM：ViewModel 視圖模型虛擬domV（修改數據） -> MM（修改數據） -> V數據是核心easyui=jquery+html4treenodes={id:1text:后勤管理children：【】}解析成json對象將json對象進行遍歷for node in treenodes.children渲染菜單的功能是操作左側頁面的dom節點注1：雖然沒有完全遵循MVVM模型，Vue的設計無疑受到了它的啟發。另外一個js框架“knockout”完全遵循MVVM模型注2：學習Vue要轉化思想：“不要在想著怎么操作DOM，而是想著如何操作數據！！！”

4.安裝vue

4.1 cdn下載(需連接網絡)建議使用

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

4.2 手動下載

<script src="dist/vue.js"></script><script src="dist/vue.min.js"></script>

Vue的官網：https://cn.vuejs.org/.

3.入門簡單案例（代碼）

3.1 Vue所管理的邊界（知識點）helloworld.html

<!DOCTYPE html> <html><head><meta charset="utf-8"><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script><title>vue入門案例</title></head><body><div id="app">{{title}}</div></body><script>// 通過Vue實例去渲染Vue所管理的邊界 new Vue({el:'#app',data(){return{title:'hello world vue'};}})</script> </html>

效果：

注意：邊界不能有兄弟標簽，邊界一定是根標簽

3.2 雙向數據綁定（一定要有v-model屬性才是雙向綁定）

3.2.1 數據的改變會引起DOM的改變，DOM的改變也會引起數據的變化3.2.2 只有當實例被創建時data中存在的屬性才是響應式的 3.2.3 用v-model指令在表單控件元素上創建雙向數據綁定3.2.4 this在methods屬性的方法里指向當前Vue實例 vm.name/vm.$data.name(外部訪問) this.name(內部訪問)3.2.5 用v-once指令進行單向綁定注1：console對象可以使用printf風格的占位符。只支持字符（%s）、整數（%d或%i）、浮點數（%f）和對象（%o）四種注2：Vue實例還暴露了一些有用的實例屬性與方法。它們都有前綴$，以便與用戶定義的屬性區分開來 <!DOCTYPE html> <html><head><meta charset="utf-8"><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script><title>數據雙向綁定</title></head><body><div id="app">{{msg}}<br>{{msg}}<br>{{msg}}<br><input v-model="msg" />{{msg}}<br>{{msg}}<br>{{msg}}<br><span id="ss"></span><input v-model="msg" /></div></body><script>// 通過Vue實例去渲染Vue所管理的邊界 new Vue({el:'#app',data(){return{msg:''};}})</script> </html>

效果：動一處，多處修改

3.3 Vue事件

<!DOCTYPE html> <html><head><meta charset="utf-8"><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script><title></title></head><body><div id="app">{{title}}<input v-model="title" /><br><button v-on:click="getData">獲取文本框中的值</button><button @click="getData">獲取文本框中的值</button></div></body><script>// 通過Vue實例去渲染Vue所管理的邊界 es6語法new Vue({el:'#app',// data有如下三種方式/* es6之前的寫法之一data:function(){return{title:'默認值'};}, *//* es6之前的寫法之二data:{title:'默認值'}}, */// es6語法方式(現在寫法)data(){return {title:'默認值'};},methods:{getData(){console.log('getData方法被調用了');alert(this.title);//this指的是new Vuethis.title='你大爺的';}},created() {this.title='修改默認值'},beforeMount() {this.title='修改默認值2'}})</script> </html>

效果：

3.4 vue的生命周期

此時博主花了一個多小時的時間把vue的生命周期圖備注解釋了，細看

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>vue的生命周期</title><script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script></head><body><div id="d1"><div>number:{{number}}</div><div>{{detail()}}</div></div><script>var data = {number:999,msg:null};var vm = new Vue({el:'#d1',data:data,methods:{detail:function(){return "使用方法來插值："+this.msg;}},beforeCreate:function(){console.log('beforeCreate:剛剛new Vue()之后，這個時候，數據還沒有掛載呢，只是一個空殼') console.log(this.msg)//undefinedconsole.log(document.getElementsByClassName("myp")[0])//undefined},created:function(){console.log('created:這個時候已經可以使用到數據，也可以更改數據,在這里更改數據不會觸發updated函數')this.msg+='!!!'console.log('在這里可以在渲染前倒數第二次更改數據的機會，不會觸發其他的鉤子函數，一般可以在這里做初始數據的獲取')console.log('接下來開始找實例或者組件對應的模板，編譯模板為虛擬dom放入到render函數中準備渲染')},beforeMount:function(){console.log('beforeMount：虛擬dom已經創建完成，馬上就要渲染,在這里也可以更改數據，不會觸發updated')this.msg+='@@@'console.log('在這里可以在渲染前最后一次更改數據的機會，不會觸發其他的鉤子函數，一般可以在這里做初始數據的獲取')console.log(document.getElementsByClassName("myp")[0])//undefinedconsole.log('接下來開始render，渲染出真實dom')},// render:function(createElement){// console.log('render')// return createElement('div','hahaha')// },mounted:function(){ console.log('mounted：此時，組件已經出現在頁面中，數據、真實dom都已經處理好了,事件都已經掛載好了')console.log(document.getElementsByClassName("myp")[0])console.log('可以在這里操作真實dom等事情...')// this.$options.timer = setInterval(function () {// console.log('setInterval')// this.msg+='!' // }.bind(this),500)},beforeUpdate:function(){//這里不能更改數據，否則會陷入死循環console.log('beforeUpdate:重新渲染之前觸發')console.log('然后vue的虛擬dom機制會重新構建虛擬dom與上一次的虛擬dom樹利用diff算法進行對比之后重新渲染') },updated:function(){//這里不能更改數據，否則會陷入死循環console.log('updated:數據已經更改完成，dom也重新render完成')},beforeDestroy:function(){console.log('beforeDestory:銷毀前執行（$destroy方法被調用的時候就會執行）,一般在這里善后:清除計時器、清除非指令綁定的事件等等...')// clearInterval(this.$options.timer)},destroyed:function(){console.log('destroyed:組件的數據綁定、監聽...都去掉了,只剩下dom空殼，這里也可以善后')}});</script></body> </html>

運行結果（沒有v-model="number"時）：

console控制臺打印的內容，大家根據上面的vue生命周期圖的流程進行理一遍

運行結果（當有v-model="number"時）：

總結

以上是生活随笔為你收集整理的Vue入门之vue框架简介库和框架的区别MVVM介绍安装vuevue所管理的边界双向数据绑定vue事件vue的生命周期的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： sock 中的send和recv
下一篇： html5倒计时秒杀怎么做,vue 设