Vue第一部分(1)：Vue简介以及第一个示例
生活随笔
收集整理的這篇文章主要介紹了
Vue第一部分(1)：Vue简介以及第一个示例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Vue簡介
Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的JavaScript框架。封裝了原生的DOM操作，無需進行任何手動的DOM編碼即可完成頁面數據的渲染。MVVM模式
前端頁面開發需要解決的核心問題是：數據（模型）和頁面（視圖）的綁定問題。如何將數據展示到頁面中，以及當頁面的數據發生變化時，如何同步變化到數據？ 傳統的DOM操作： 手動編碼將Model中的數據綁定到View上； //dom對象.屬性=數據 當View的發生變化時，也需要手動編碼獲取變化。//數據 = dom對象.屬性 存在著如下的問題： 開發者需要手動編碼DOM操作，開發繁瑣 當Model頻繁發生變化時，開發者需要手動編碼更新到View中；當View發生變化時，也需要同步 到Model中。這樣不僅開發繁瑣，而且很難維護復雜多變的數據狀態。 MVVM 是Model-View-ViewModel 的縮寫，它是一種基于前端開發的架構模式，其核心是通過ViewModel 把Model和View關聯起來。ViewModel負責把Model的數據同步到View顯示出來，還負責 把View的修改同步回Model，即所謂的數據雙向綁定。 MVVM中的VM要做的事情就是把DOM操作完全封裝起來，開發人員不用再關心Model和View之間是如何互相影響，把開發者從繁瑣的DOM操作中解放出來，把關注點放在如何操作Model上。 Vue.js 是一個提供了 MVVM 風格的雙向數據綁定的 Javascript 框架，使得我們無需關注底層DOM操 作，專注于業務數據操作，提高頁面開發效率。第1個Vue示例
1. 新建頁面，并引入 vue.js <script src="js/vue-2.6.12.js"></script> 2. 定義一個視圖標簽 <body><div id="app"></div> </body> 3. 創建一個Vue實例（ViewModel） <body> <!--{{}}插值表達式，可以將vm對象的數據插入到視圖中 --><div id="app"><h1>{{msg}}</h1></div> <script> const vm = new Vue({ el:"#app",//通過選擇器，選則要掛載的標簽data:{//數據 msg:"hello " } }) </script> </body> 總結： 1. 頁面要有一個用于掛載數據的標簽 2. 創建Vue實例（ViewModel對象） 1. el：通過選擇器選擇標簽 2. data：定義可以渲染到視圖的數據 ?Vue框架要解決的核心問題 ? Vue作為構建頁面的JavaScript框架，簡化了頁面操作的方式，但其和原生JS在操作頁面時要解決的問題是相同的。原生JS操作頁面需要解決的問題，也必是Vue需要解決的，而學習Vue其實就是在學習它對這些問題的解決方法。 操作頁面需要解決的問題：- 渲染數據到頁面 ?
- 為標簽屬性賦值
- 事件綁定
總結
以上是生活随笔為你收集整理的Vue第一部分(1)：Vue简介以及第一个示例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python 读excel一列_Pyth
- 下一篇： Vue第二部分(1)：组件基础学习