Vue由淺入深學習系列筆記之01

申明

    首先的說在前面,此博客是個人從0起步學習vue,vue專家大神級別,請繞道,不用在這裏浪費時間,如果你能夠繼續看下去呢,希望你和我一樣本着初學的熱情和從頭開始的耐心來上手一個優秀的前端框架vue.線上關於vue的學習資料和視頻很多很多,那我爲什麼記錄這系列的學習筆記了,主要有以下兩個原因:1、提供一份由淺入深,循序漸進的完整筆記、認真負責的筆記,2、相對於視頻來講,從筆記上學習會快很多,我想用個人的視頻學習時間爲大家省下再看視頻的時間。如果你贊同且有興趣,很開心能和你分享。下面我們正式進入學習筆記...


下載安裝

    初學、爲了入門,我們先使用直接引入vue.js庫的方式進行學習首先,我們進到vue官網:https://cn.vuejs.org/v2/guide/installation.html 點擊

image.png

下載vue.js庫。在自己磁盤上創建給目錄如:vue-learn,並把下載好的js拷貝進去,然後創建一個標準的html5結構的index.html文件,並使用<script>標籤引入vue.js到改頁面。


基礎示例

    vue給我們提供了模型視圖數據雙向綁定,也就是隻要你把數據模型定義好,初始化vue實例時將其註冊與相應視圖綁定後,數據模型改變或是視圖數據改變,數據會進行雙向同步。下面給出一個1、定義視圖 2、定義數據模型 3、實例化vue並註冊視圖和數據模型 4、改變數據模型自動反映到視圖的實例:

image.png

    通過實例中的changeName方法調用改變數據模型,vue會自動同步更新視圖,大家可以試試,那麼vue是否提供我們獲取數據改變前後的監聽事件呢,有的如下:

image.png


本篇核心知識點:

  • 實例化vue並註冊數據模型與視圖綁定:var vm = new vue(註冊對象) ,其中註冊對象有兩個數據el(設置爲頁面模型選擇器)、data設置爲數據模型對象

  • 文本插值符及使用方式:{{數據模型對象的屬性名稱}}

  • 模型對象的取值方式:vm.$data.屬性名

  • vue內置數據改變監聽方法註冊:vm.$watch("數據模型對象屬性名稱",function(newVal,oldVal){...})

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章