背景：
由於決策支持系統的高級客戶對界面的要求越來越高，普通的數據可視化開發軟件不能很好的滿足客戶對UI的要求，爲了能更好的展示數據的魅力，今天開始學習Vue.js的開發，以下是我在學習Vue過程中的學習筆記，只爲記錄，方便自己重複複習。
我是從最基礎的知識點學起，學習的資料是某視頻網站在2019年12月份發佈一套學習視頻，個人感覺老師講解非常不錯。
開發工具選用IDEA。
今天主要是學習Vue的簡介及一些基礎概念。
首先，瞭解什麼是Vue：
在它的官網上也有一個視頻進行介紹：https://cn.vuejs.org/，選擇用Vue的好處官網上給出了三個點：
個人也在網上搜索相關資料：
Vue.js是目前最後一個前端框架，React是最流行的一個前端框架（react除了開發網站，還可以開發手機App，Vue語法也是可以進行手機App，還需要藉助 weex）；
Vue.js是前端的主流框架之一，和angular、react.js一起，併成爲前端三大主流框架；
Vue.js是一套構建用戶界面的框架，只關注視圖層，它不僅易於上手，還便於第三方庫即有項目整合（Vue有配置的第三方類庫，可以整合起來做大型項目的開發）前端的主要工作：主要負責MVC中的V這一層，主要工作就是和界面打交道，來製作頁面效果。
Vue.js的mvvm是前端視圖層的概念，主要關注於視圖層分離，也就是說：mvvm把前端的視圖層，分爲三部分：model，view，vm viewmodel，如下圖所示：
其次，瞭解Vue的基礎知識點：
vue返回的是一個對象
vue是一個mvvm的框架，（面試官常問的），angular是mvc的框架
Vue是vue的實例，這個實例存在計算機中，主要幹倆大事：1、綁定事件；2、dom檢測
Vuejs是封裝的一個類，參數是options對象
Vue全家桶包括：vuex、vue-router、vue-resource還有構建工具 vue-cli
但是vue-resource 現在不使用了，用的是axios
最常用的屬性是：
el:"" 指定vue所操作的dom範圍，屬性值是你獲取的節點；
data 就是vue的model，是存放數據的，屬性值是一個對象或者是一個函數，在組件中的data是一個函數；
methods 是vue中的事件方法；
computed 是vue中的計算方法；
filters 是vue中的過濾器，可以理解爲數據形態的變換；
PS：事件方法與計算方法最大的區別在於：調用計算函數，讀取一次方法即可，第二次調用時，直接在緩存裏面進行調用，不需要重複調用函數；但methods的方法則不能，每用一次，都要重複調用一次；在for循環中，computed 性能就體現出來了。
vue的基本內容：
Vue的渲染：
指令式渲染：
v-html，v-text 採用{{}}語法==>插值運算
v-html：它可以加標籤，它會解析成html
v-text：不能加標籤，如果加了，它會當作字符串展示出來
插值表達式：
{{ data中的數據 }}
v-text與插值表達式的區別：
默認v-text沒有閃爍的問題的，而插值表達式有閃爍問題
v-text 會覆蓋元素中原本的內容，但是插值表達式只會替換自己的這個佔位符，不會把整個元素的內容清空
v-html 與 v-text的區別：
v-html會解析html格式
v-text與插值表達式會把內容當做文本來解析
v-html 和 v-text都會覆蓋元素中原有的內容
v-cloak
v-cloak 能夠解決 插值表達式閃爍的問題
並在css中設置：
[v-cloak]{
display: none;
}
讓所有設置 v-cloak 的元素隱藏，當加載完畢之後，元素身上的 v-cloak 就會消失
條件指令：v-if
v-if="a"
後面的值如果是true節點就顯示，false就隱藏
v-show=""
改變css中的display
後面的值如果是true，節點就顯示，false就隱藏
v-if與v-show的區別：
v-if是對節點的刪除和添加，v-show是堆display屬性值none和block的切換
v-if與v-show的區別及使用場景：
共同點：都是動態顯示DOM元素
不同點：
v-if：
v-if 是動態的向DOM樹內添加或刪除DOM元素
v-if 切換一個局部編譯/卸載的過程，切換時合適銷燬和重建內部事件監聽和子組件
v-if是懶惰性的，初始條件 = false，什麼也不做，只有在條件第一次 = true時，纔開始局部編譯
v-show 是在任何條件下（首次條件是否爲着真）都會被編譯，然後緩存，而且DOM元素保留
v-if有更高的切換消耗
使用場景：
v-if 適合運營條件不大可能改變
v-show
v-show有更高的初始化渲染消耗
v-show只是簡單的基於css切換
v-show是通過設置DOM元素的display實現控制顯隱的
使用場景：
v-show 適合頻繁切換
循環指令：v-for=""
* 值是一個數組 (item,index) in 數組名
* 值是一個對象 (value,key) in 對象名 value是屬性值，key是屬性
在v-for中key的使用注意事項：
v-for 循環的時候，key屬性只能使用 number 或string，且是惟一的
key在使用的時候，必須使用 v-bind 屬性綁定的形式，指定key的值
動態屬性：v-bind:class="a"
可以簡寫 :class="a" v-bind可以省略
節點上綁定事件：
v-on:click="fn" 可簡寫：@click="fn"
事件方法寫在methods中
v-on 監聽事件
v-on:click="事件名"
縮寫@click="事件名"
v-model 數據綁定
可以在表單中使用v-model實現數據雙向綁定
text類型中的文本都是字符串，v-model中的值相同
v-model實現的原理：
angular是mvc模式，ng-model是靠髒值檢測
vue靠的是數據劫持和發佈者訂閱者模式
數據劫持：
Object.definePropery() 這個方法
* 生成對象的方法 字面量 var obj={}/new Object()
* Object.definePropery() 給一個對象定義新屬性或修改一個對象的屬性
* object.getOwnPropertyDescriptor() 返回關於一個對象某個屬性的描述符，
第一個參數是目標對象，第二個參數是 對象的某個屬性
var obj={age:12}
console.log(object.getOwnPropertyDescriptor(obj,'age'))
返回屬性的意思：
configurable 配置選項，值爲true代表這個屬性可刪除
enumerable 值爲true 代表可枚舉 可以使用 for in 遍歷
value 這個屬性的值
writeable 代表這個屬性可以更改
如果有了set和get屬性就不能有writeable 和 value屬性
常見的修飾符：
.lazy v-model 在每次 input 事件觸發後將輸入框的值與數據進行同步
<input v-model.lazy="msg" >
.number 自動將用戶的輸入值轉爲數值類型
<input v-model.number="age" type="number">
.trim自動過濾用戶輸入的首尾空白字符
<input v-model.trim="msg">
vue的事件修飾符
vue.js爲 v-on 提供了事件修飾符 
總結：vue可以將界面與後臺數據完全拆開。