前端記錄（vue基礎）

• 簡介：
  • js的庫，一樣須要引入

  • 每一個 Vue 應用都是經過實例化一個新的 Vue對象開始的，el屬性對應一個標籤，當vue對象建立後，這個標籤內的區域就被vue對象接管，在這個區域內就能夠使用vue對象中定義的屬性和方法。

    var vm = new Vue({
    el:'#app', 這裏綁定div
    data:{message:'hello world!'} 這裏放數據
    });
    <div id="app">{{ message }}</div> 這裏能夠直接拿到message的數據

• 事件寫法：
  • 標籤內直接寫：<input type="button" value="哈哈" v-on:click="要操做的東西" /> 還能夠寫成：<input type="button" value="哈哈" @click="要操做的東西" />
• 綁定屬性：
  • <a v-bind:href="message">連接連接</a> 還能夠寫成：<a :href="message">連接連接</a>
  • 事件和屬性都在綁定的標籤裏寫，能夠直接操做Vue內的數據等
• 綁定class
  • 使用v-bind指令來設置元素的class屬性，它們的屬性值能夠是表達式
  • 對象（字典）綁定：<h1 :class="{red:ok,ft:yes}">哈哈哈
  • 數組綁定:<h1 :class="[num==0?'red':'']">哈哈哈
• 條件渲染：經過條件指令能夠控制元素的建立(顯示)或者銷燬(隱藏)
  • v-if能夠控制元素的顯示或刪除：<h1 v-if="ok">哈哈啊哈 ok設置爲true時標籤顯示，爲false時標籤刪除

  • 還能夠使用v-else-if和v-else

    <h1 v-if="num==0">0000
    <h1 v-else-if="num==1">1111
    <h1 v-else>2222

  • vue使用v-show來控制顯示和隱藏：<h1 v-show="ok">這是vshow
• 列表渲染：經過v-for指令能夠將一組數據渲染到頁面中，數據能夠是數組或者對象，v-for 指令須要使用 item in items 形式的特殊語法
  • 遍歷數組：<li v-for="item in items">{{item}}
  已經定義了一個數組items，裏面有六個元素，此時會生成六個標籤並把數組內的元素打印出來
  • 還能夠取出索引值<li v-for="(item,index) in items">{{item}} 哈哈 {{index}}
  這裏索引必須在元素後面
  • 遍歷對象（字典）：<li v-for="value in abc">{{value}}
  • 能夠取出鍵值：<li v-for="(value,key) in abc">{{value}} 哈哈 {{key}}
• 函數調用

  • 要給事件調用的函數寫在methods中，調用時<input type="button" value="按一下試試" @click="這裏直接調用methods裏寫的函數"/>

    methods:{
    btn:function(){
    alert('hahaha')
    }
    }

• 表單輸入綁定
  • 能夠用 v-model 指令在表單 <input> 及 <textarea> 元素上建立雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素
  • 輸入框獲取輸入值：<input type="text" v-model="mes"/>{{mes}}

  • 下拉框綁定

    <select v-model="sel">
          <option>北京</option>
          <option>上海</option>
          <option>紐約</option>
      </select>{{sel}}
                  var vm = new Vue({
                  el:'#app',
                  data:{
                      mes:'',
                      sel:'北京'
                  }
                      }
                   )