文章4：vue（1）

leeon 發布于2019-08-26 12:24 / 2623人閱讀

摘要：一前言概述前言最進剛剛了解了前端的三大框架，簡單談談對三大框架的認識對于，目前在國內十分受歡迎，國外還是比較喜歡其他框架，國內也有許多公司使用。了解一門框架首先知道為什么產生，框架是什么樣是東西，為什么需要用到他以及如何正確用好它。

一、前言概述

前言：最進剛剛了解了前端的三大框架vue、angular、react，簡單談談對三大框架的認識；

對于vue，目前在國內十分受歡迎，國外還是比較喜歡其他框架，react國內也有許多公司使用。了解一門框架首先知道為什么產生，框架是什么樣是東西，為什么需要用到他以及如何正確用好它。

vue是一個漸進式的框架：漸進式就是不需要使用vue提供所有的功能，比如任何一個html文件只需要引入vue.js文件就可以使用vue的功能（vue有哪些功能，等下一一介紹），引入vue.js文件就相當于為該html文件中添加一個Vue對象；

Vue對象：Vue對象中包含兩個部分（1）Vue()構造函數，可以通過該方法生成無數個Vue的實例;(2)prototype原型對象：該對象中存在許多個實例方法，也即Vue的任何一個實例都可以使用原型對象中方法

vue的實現的原理：采用的是MVVM設計模式實現三部分：

model：模型中存儲的都是數據

view ：視圖中顯示數據

modelview：實現業務邏輯處理

兩大核心系統：監聽系統與虛擬DOM樹

監聽系統：vue框架為model（也即就是下方代碼中data中的數據）中的變量都添加了一對get/set方法，有點類似es5中的訪問器屬性【訪問器屬性不能直接定義，要通過Object.defineProperty()這個方法來定義。】，當試圖修改model中的數據時，vue自動調用set方法，獲取數據時，又自動調用get方法

虛擬DOM樹：當試圖修改model中的數據時，此時虛擬DOM樹要做的事就是遍歷虛擬DOM樹找出視圖中綁定該數據的部分，并且更新真實DOM樹（前提：該DOM樹必須被監視（如下方的代碼中：el:"#app"）,也即就是只有在id為app的節點下的節點被監視

//代碼：
var vm = new Vue({
el:"#app",
data:{
uname:"field",
age:20
},
methods:{

}
})

未完待續（第一次寫文章給自己看的）

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108652.html

基于Vue,Vue-router,Vuex的簡書網站模仿(二)

摘要：通過點擊事件來更換不同的值和文章內容。文章排版整潔，注意詩游戲玩轉簡書的第一步，從這個專題開始。專題主編蘇錦年投稿須知本專題收錄古詩詞現代詩以及詩詞點評及指導。內容必須為原創，切勿用其他詩人的詩句。接著上一篇我們接著講,關于這個網站的專題頁面和2015精選頁面，如果有小伙伴沒看過上一篇文章，這里附上上一篇文章的的鏈接基于Vue,Vue-router,Vuex的簡書網站模仿這里是網站的...

yibinnn 2019-08-22 10:37 評論0 收藏0
Vue + TypeScript + Element 項目實踐(簡潔時尚博客網站)及踩坑記

摘要：前言本文講解如何在項目中使用來搭建并開發項目，并在此過程中踩過的坑。具有類型系統，且是的超集，在年勢頭迅猛，可謂遍地開花。年將會更加普及，能夠熟練掌握，并使用開發過項目，將更加成為前端開發者的優勢。 showImg(https://segmentfault.com/img/remote/1460000018720573); 前言本文講解如何在 Vue 項目中使用 TypeScript...

luckyyulin 2019-08-26 13:39 評論0 收藏0
王下邀月熊_Chevalier的前端每周清單系列文章索引

摘要：感謝王下邀月熊分享的前端每周清單，為方便大家閱讀，特整理一份索引。王下邀月熊大大也于年月日整理了自己的前端每周清單系列，并以年月為單位進行分類，具體內容看這里前端每周清單年度總結與盤點。感謝王下邀月熊_Chevalier 分享的前端每周清單，為方便大家閱讀，特整理一份索引。王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清單系列，并以年/月為單位進行分類，具...

2501207950 2019-08-22 14:53 評論0 收藏0