vue框架基礎學習

1、
一、el:元素掛載的地方
data:數據模型
2、模板語法概述
一、 差值表達式
二、指令
一、什麼是自定義屬性
二、指令自己就是屬性
三、指令的格式 如 v-clock
四、數據綁定指令
v-text 填充文本 比差值表達式簡潔
v-pre：顯示原始信息，跳過編譯
五、數據響應式
（1）、如何理解數據響應式
html5響應式 根據屏幕尺寸的變化而變化
數據響應式： 數據的變化致使頁面的變化
（2）、什麼是數據綁定 ，將數據綁定在標籤中
（3）、v-once 綁定一次
三、事件綁定
v-on指令用法
<input type="boutton" v-on:click="num++">
簡易<input type="bouttn" @click="num++">
參數傳遞 若是直接綁定函數名，默認傳遞事件
若是事件綁定函數調用，那麼事件對象必須是最後一個參數
事件修飾符
stop阻止冒泡
<a v-on:click.stop = "handle"></a>
prevent
<a v-on:click.prevent = "handle"></a>
按鍵修飾符
enter <input v-on:key.enter='submit>
delte <input v-on:key.enter='delete'>
自定義修飾符
全局config.keCodes對象
Vue.config.keyCodes.f1 = 122
四、屬性綁定
v-bind
<a v-bind:href="url">
簡寫<a :href="url">
五、樣式綁定
對象
<div v-bind:class={"active:isActive"}></div>
數組
<div v-bind:class=["activeRerror","error"]>
六、分支循環
v-if / v-else /v-else-if
v-show 原理就是控制i元素的樣式是否顯示 display:none

基礎步驟：
一、實例靜態UI效果
二、基於數據重構UI

經常使用特性
一、表單操做
二、自定義指令
三、計算屬性誤差
四、過濾器
五、監聽器
六、生命週期