安裝vue

• 安裝前初始化package.json 主要用來描述自己的項目,記錄安裝過得文件有哪些,在當前文件夾下生產json
• 安裝vue
  • --save(-S)代表項目依賴
  • --save-dev(-D)代表開發依賴

  npm info vue
  npm install vue --save
  npm install //跑環境,將package中的依賴全部安裝

• 安裝後默認會生產node_modules文件夾
  • 上傳到git上node_modules是忽略掉的,拉下代碼後,需要重新npm install安裝依賴

Vue屬性

• el
  • 指定的元素不能是html和body
  • 使用querySelector
• data
  • 可以使用vm來代理data屬性,vm是Vue的實例
  • 在html中使用的屬性必須先聲明,不能新增不存在的屬性,使用Object.defineProperty,vue不兼容IE8以及下包括IE8
• {{}}
  • 這是v-text的縮寫,直接再標簽上使用v-text可以避免出現大括號閃爍
  • 括號內可以使用三元表達式
  • 最終的結果需要有返回值,可以賦值,運算
  • 等待數據加載好後,將內容插入到div中
• v-model
  • 只能綁定定變量,先將對應的數據放到輸入框的value值上
  • 會監聽輸入框的輸入事件 oninput,將值放回到數據中
• v-once
  • 在標簽中使用,變量在內容中調取
  • 被這個屬性包住的屬性,就不會再發生變化,只綁定一次
• v-html
  • 包住的內容會被解析成htlm結果
• method
  • 定義函數的一個對象,放所有函數
  • 函數中的this為vm,必須使用普通函數,箭頭函數存在this指向問題
• v-on
  • 事件綁定函數傳參會丟失event事件源,可以手動傳遞屬性$event
  • v-on可以簡寫成@
  • 修飾符,可以連續嵌套
    • ".stop",可以阻止默認事件的冒泡
    • ".capture",捕獲階段
    • ".self",自己,只在自己身上觸發
    • ".once",只觸發一次
    • ".prevent",阻止默認行為
    • ".13",".enter",點擊回車時觸發
      • 可以使用鍵盤修飾符,支持keyCode和名稱,只能用於@keyup和@keydown
• v-for
  • 寫在要循環的子標簽中
  • 數組中a in xxx,那麽a的值是數組裏的value
  • 對象中f in xxx,那麽f的值是對象裏的value
  • (value,key) in xxx,可以取到屬性值,屬性名

  <ul>
      <li v-for="(val,pIndex) in fruits">{{val.name}}
          <ul>
              <li v-for="(c,index) in val.color"> {{pIndex+1}}.{{index+1}} {{c}}</li>
          </ul>
      </li>
  </ul>

• v-if/v-else-if/v-else
  • 在標簽中使用
  • 判斷結果為true的時候才增加,false刪除操作的是DOM,會影響性能

  <div v-if=""></div>
  <div v-else-if=""></div>
  <div v-else=""></div>

• v-show
  • 同樣在標簽中使用
  • 但不操作DOM,只操作樣式,判斷結果為true時,display:block,false時,display:none

  <div v-show=""></div>
  <div v-show=""></div>
  <div v-show=""></div>

  • 與v-if的使用情景需要判斷
    • v-if有阻斷作用,當外面的條件不滿足是,內部代碼不在執行
    • 頻發顯示隱藏,則選擇v-show
• 如果想要將內容綁定在標簽上,綁定的是動態屬性,需要使用":",不能使用{{}}
  • style和class可以使用綁定對象,或者數組的方式
  • 其他的樣式直接使用":"+樣式名="屬性名"
  • class和原生的不沖突,冒號會覆蓋普通的class

  <div :style="[s1,s2]"></div>//data中的屬性名,支持字符串和對象屬性
  <div :style="s1"></div>//data中的屬性名,支持字符串和對象屬性
  <div :class="[‘color‘,‘background‘]"></div>//類名
  <div :class="{‘color‘:true,‘background:true‘}"></div>//類名

關於VUE的安裝和一些簡單屬性