Vue.js基礎

時間 2019-11-10

標籤 vue.js vue 基礎欄目 JavaScript 简体版

原文原文鏈接

1. 初始vue.js

Vue.js項目介紹html

官網地址：英文官網中文官網
Vue.js是一個單向數據流的框架
Vue.js是一個JS漸進式框架
Vue.js也是一個MVVM框架

2. Vue.js的安裝

在使用Vue時，推薦在瀏覽器上安裝Vue Devtools。它容許你在一個更友好的界面中審查和調試Vue應用vue

安裝1：直接下載並用<script>標籤引入，Vue會被註冊成一個全局變量

在開發環境下不要使用壓縮版本，否則你會失去了全部常見錯誤相關的警告!webpack

https://cn.vuejs.org/v2/guide/installation.htmlweb

安裝2：CDN
對於製做原型或學習

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

對於生產環境

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

你能夠在 cdn.jsdelivr.net/npm/vue 瀏覽 NPM 包的源代碼。npm

Vue 也能夠在 unpkg 和 cdnjs 上獲取 (cdnjs 的版本更新可能略滯後)。設計模式

安裝3：NPM

在用 Vue 構建大型應用時推薦使用 NPM 安裝[1]。NPM 能很好地和諸如 webpack 或 Browserify 模塊打包器配合使用。同時 Vue 也提供配套工具來開發單文件組件。api

$ npm install vue

3. vue的基礎使用

當咱們第一次經過script標籤對引入vue.js時，咱們就會有一個全局變量 Vue
Vue它是一個構造器函數瀏覽器

Vue( options ) this._init( options ) //在初始化執行vue 參數： options 咱們稱之爲‘ 選項 ’ 類型： Object options / el 咱們稱之爲自動掛載： 將頁面一個已經存在dom做爲整個實例的做用範圍，出了這個範圍那麼vm實例就沒有做用了 body不能做爲el的掛載目標 options / data 數據 new類型中 data選項是一個對象 使用形式： 在實例範圍內，它至關於全局變量 咱們要將這個變量放在一個模板語法中才能解析，這個語法叫作mustache語法，也叫 ‘雙大括號語法’ 使用範圍： el肯定的那個範圍 Vue是一個MVVM框架 M: data選項 V：el掛載的東西 VM： vm實例 // var vm = new Vue( options ) // 實例化Vue的到vm實例 var vm = new Vue({ el: '#app',// document.querySelector('#app') data: { msg: 'hello Vue.js' } }) // 實例化Vue的到vm實例

4. MV*模式介紹

MV*模式圖示mvc

4.1 概念

M: 模型 => 數據，業務邏輯，驗證邏輯，模型經常包含業務邏輯。
V: 視圖 => 交互界面，是模型數據的可視化呈現，視圖可能包含展現邏輯。
*: 這個部分將幫助管理模型與視圖間的關係，以及模型，視圖，用戶的關係。

4.2傳統設計模式

MVC
MVP
MVVM

5. vue深刻響應式原理

經過new Vue中el選項肯定的實例範圍，這個dom結構咱們叫它 'Root組件/根組件/根實例'
Vue中雙向數據綁定式經過 v-model 這個指令來實現的
當咱們將vm中的data改變時，會發現視圖也跟着改變了，這個模式咱們稱之爲：數據驅動數據驅動：數據驅動視圖改變

HTML <body> <div id="app"> <h3> VM改變 ——> V也跟着改變 </h3> {{ msg }} <h3> V改變 -> VM也跟着改變 </h3> <input type="text" v-model="msg"> </div> </body>

<script src="../../lib/vue.js"></script> <script> var vm = new Vue({ el: '#app', // document.querySelector('#app') data: { msg: 'hello Vue.js' } }) // 實例化Vue的到vm實例 </script>

使用原生js來實現Vue深刻響應式

var box = document.querySelector('.box') var button = document.querySelector('button') var data = { name: 'Jick' } // 觀察者對象 var observer = {...data} // es5提供的api方法,這個方法不兼容ie8以及如下 // Object.defineProperty(對象，對象的屬性，對象屬性的修飾符 ) Object.defineProperty( data,'name',{ // get/set 統稱爲: '存儲器' get () { return observer.name // 初始化賦值一個值給name屬性 }, set ( val ) { console.log( val ) box.innerHTML = val } }) button.onclick = function () { data.name = "Rose" } box.innerHTML = data.name

如何理解深刻響應式原理？

Vue是經過數據劫持和事件的訂閱發佈來實現的，數據劫持指的是Vue經過observer觀察者對象對data選項中的數據進行getter和setter設置，事件的訂閱發佈指的是Vue經過事件來監聽，通知Vue進行視圖更新
監聽：選項/watch

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。