Python--前端之路-----Vue 事件監聽、表單數據綁定

Vue
    導入Vue
        <script str="./vue.min.js"> <script>
    創建vue對象
        加載後執行：<script> window.οnlοad=function(){ new Vue... } <script>
        綁定：var vm= new Vue({ el:"#標籤的id，此處類似於選擇器", 屬性，方法 })
        屬性：data：{屬性1："值1", 屬性2：值2，屬性：true}
        方法：methods：{ 方法名1: function (){執行內容}，方法名2: function(){執行內容} }
        監聽：watch：{屬性名：function(){ 監聽vue屬性的數據變化，屬性發生修改執行的內容}，... }
        計算型屬性：computed：{屬性名：function(){屬性計算，可以使用js內置方法，return 計算後的屬性}}，引用使用時和普通屬性一樣，{{屬性名}}
        自定義指令：directives：{  指令名:{ 發生時態:function(el){el.屬性操作，el代表當前原生js對象}，發生時態2:function(el){...}}}，詳見下面內容
    js內使用
        通過vue對象名.屬性，vue.方法
        本對象內使用當前對象屬性：this.屬性
    使用   :標籤內容.屬性
        設置標籤內容
            <div id='ces'> {{屬性名}}  </div>
        設置標籤屬性
            <div id='ces' v-bind:標籤屬性名='vue屬性名'> </div>
            如：<div id='ces' v-bind:class='屬性名'> </div>
            簡寫：<div id='ces' :class='屬性名'>
        設置多個標籤屬性值
            <div id='ces' :標籤屬性名=[vue屬性名1,  屬性名2]> </div>
            <div id='ces' :標籤屬性名=['固定值',  屬性名2]> </div>
        html模板替換
            屬性：在需要替換的位置，使用{{直接使用Vue對象的屬性名即可}}，如{{屬性1}}
            方法：在使用的位置，使用{{方法名}}，如{{方法1}}
            更多
                支持js對象內置的方法 {{屬性.內置方法().內置方法() }}
                支持數學運算，{{屬性1+屬性2}}
                支持三目運算，{{條件 ？'條件成立內容' ：'條件不成立內容' }}
    使用：@事件監聽
        <button id='ces' v-on:click='事件方法名'>按鈕</button>
        Vue對象中方法內，添加事件要執行的方法
        簡寫：<button id='ces' @click='事件方法名'>按鈕</button>
        更多：事件內可以直接使用原生JS代碼，@click='原生代碼'
            標籤內容使用屬性值，事件修改屬性值，事件發生後，屬性值被修改，頁面值會被立馬刷新
            事件內可以直接內嵌js語句，比如vue屬性的加減運算，@click='num+=1'
    使用：設置標籤樣式
        創建樣式：在Vue對象中，添加屬性，屬性值爲字典類型，存儲樣式的數據
        設置樣式：<div id='ces'  :style="[存儲了樣式的屬性1，屬性2]">
    三種方式切換標籤樣式
        創建樣式，通過選擇器設置標籤樣式
        使用Vue修改標籤關聯樣式的屬性值
        1.使用js對象控制標籤形式
            通過true與flase來開啓或關閉
            <div id='ces'  :class='{"類名1": 存儲了true或flase的屬性名，"類2":屬性名}'>
            <div id='ces'  :class='["固定類名1"，{"類名2" :屬性名}]'> </div>
        2.使用三目運算符來控制標籤樣式
            <div id='ces'  :class='存儲了布爾值的屬性 ？"成立的值":"不成立的值" ' > </div>
            <div id='ces'  :class='["固定值",  "存儲了布爾值的屬性 ？"成立的值":"不成立的值" ]' > </div>
            取消，值設置爲“”即可
        3.使用事件來切換樣式
            定義執行方法，對屬性進行切換，如開啓與關閉，方法內 vue對象.屬性 = !vue對象,屬性 
            <button id='ces' @click='事件執行的方法'>按鈕
        選項卡案例
            對按鈕添加事件，:對應類使用三目運算符進行判斷實時修改
            :內容標籤的樣式綁定的類，進行三目運算進行實時更新
    vue監聽
        監聽vue屬性的數據變化
            添加watch：{屬性名：function(){屬性發生修改執行的內容} }
    條件語句，控制顯示
        <div v-if="條件">內容</div>   條件成立，顯示頁面內容
        <div v-else-if="條件"> 內容 </div> 
        <div v-else> 內容 </div>
        <div v-show="條件"> 內容 </div>
    循環語句，遍歷展示
        列表遍歷
            <ul> <li v-for="臨時變量 in 值爲列表的vue屬性">   {{臨時變量}}    </ul>
            <ul> <li v-for="臨時變量 in 值爲字典的vue屬性">   {{臨時變量.字典鍵名}}--{{臨時變量.另一個字典鍵名}}     </ul>
        自定義js對象遍歷
            <ul> <li v-for="（值，鍵） in 值爲列表包含字典爲元素的vue屬性">   {{臨時變量}}    </ul>
        取索引
            <ul> <li v-for="（臨時變量，index） in 值爲列表的vue屬性">     {{臨時變量.字典鍵名}}--{{臨時變量.另一個字典鍵名}}--{{index}}    </ul>
            <ul> <li v-for="value, key, index in 值爲字典的vue屬性">   {{key}}，{{value}}，{{index}}    </ul>
            vue2.0版本：建議對遍歷的標籤設置 :key="唯一值"
            <ul> <li v-for="(臨時變量, index) in 值爲列表的vue屬性"  :key="index"   {{臨時變量}}    </ul>
            
    事件修飾符，阻止冒泡與默認行爲
        阻止事件冒泡@click.stop="事件方法"
        阻止默認行爲@click.pervent="事件方法"
        阻止默認行爲和事件冒泡@click.pervent.stop="事件方法"
        事件方法可以省略：<button id='ces' @click.pervent.stop>按鈕</button>
        示例圖片
            
    表單(數據)綁定
        綁定vue屬性和表單內容 v-model="vue屬性"
        vue屬性變化會更新到表單中，同時表單中的內容變換也會同步到vue中
        綁定輸入框
            <input type="text" v-model="vue屬性">
        綁定單選框
            選項1：<input type="radio" name="多個單選框要使用統一名字"   id=""  value="1"  v-model="vue屬性">
            選項2：<input type="radio" name="多個單選框要使用同一名字"   id=""  value="2"  v-model="vue屬性">
        綁定複選框
            選項1：<input type="checkbox" name="多個單選框要使用統一名字"   id=""  value="1"  v-model="值爲[]的vue屬性">
            選項2：<input type="checkbox" name="多個單選框要使用統一名字"   id=""  value="2"  v-model="值爲[]的vue屬性">
        綁定下拉框
            <select name="" id=""  v-model="值爲字符串的vue屬性">
            <option value="1"> 選項一 </option>
            <option value="2"> 選項二 </option>
            <option value="3"> 選項三 </option>
        綁定多行輸入框
            <textarea name="" id="" cols="30"  rows="" v-model="值爲字符串vue屬性"> </textarea>
        數組(列表)或字符串內寫入value值，表示默認
    自定義過濾器
        加載後執行,需要在vue對象創建前構造
        Vue.filter('過濾器名字'，function(value) {對形參進行修改，返回過濾後的數據}   )
            
    自定義指令
        自定義局部指令，只能再當前vue對象綁定的標籤中使用
        在vue對象中：directives：{  指令名:{ 發生時刻:function(el){el.屬性操作，el代表當前原生js對象}，發生時刻2:function(el){...}}}
        自定義全局指令，可以全局vue對象中使用
        頁面加載後執行，在vue對象創建前進行構建
        Vue.directives('自定義指令名'，{"觸發時刻"：function(el) { el表示當前標籤的原生對象，可以進行操作 }})
        使用時，指令名前加v-，即v-自定義指令名，<div id="app" v-指令名 class="">
        inserted：模板渲染加載完後執行指令（頁面第一次加載後）
        componentUpdated：組件更新後執行指令（數據更新）