Vue學習筆記

1.建立實例

• vue框架提供了一個Vue的構造函數（類），咱們經過實例化Vue，產生一個vue對象，來構建應用； 例如:new Vue();
• 在實例化Vue的時候，傳入一些配置參數這些配置參數在Vue官網的api中能夠找到 ： 選項
  • el : 提供一個在頁面上已存在的 DOM 元素做爲 Vue 實例的掛載目標。能夠是 CSS 選擇器，也能夠是一個 HTMLElement 實例。
  • data : 提供了vue中須要使用的數據

  new Vue({
  el: document.getElementById('#app')
  el: '#app',
  data: {
      message: 'Hello Qianx!'
  }
  });
  複製代碼

２．視圖–view

• 用戶看到的界面

3.模板

• 產生頁面視圖的基礎結構 - html

４．模版語法

• 插值表達式
• 數據綁定最多見的形式就是使用「Mustache」語法 (雙大括號) 的文本插值：{{ msg }}
• {{}}中的內容能夠被vue做爲一種js表達式去解析
• new Vue會產生一個對象，該對象下會保存vue實例的一些屬性和方法，供咱們去調用。

在底層的實現上，Vue 將模板編譯成虛擬 DOM 渲染函數。

5.數據單向綁定

• Vue實例會監聽data中數據，當數據發生變化，自動渲染視圖
• data -> view
• 在vue中有單向綁定和雙向綁定，可是不一樣的語法支持不一樣綁定方式
• {{}} 只支持單向綁定

  <div id="app">
         {{message}}
         <p>{{arr}}</p>
  </div>
  複製代碼

• 在vue中有單向綁定和雙向綁定，可是不一樣的語法支持不一樣綁定方式;
• (angular2支持3種綁定方式：a. 數據->view b.vew->數據 c.雙向綁定)
• {{}} 只支持單向綁定

6.指令

• v-html：單向綁定,更新元素的 innerHTML<h1 v-html="message"></h1>
• v-model 雙向綁定,在表單控件或者組件上建立雙向綁定

  <input type="text" v-model="message">
  <p>你輸入了 {{message.length}} 個字符</p>
  複製代碼

• 它會根據控件類型自動選取正確的方法來更新元素。

注意：不是全部標籤都支持v-model.

• v-for 根據數據循環結構
• v-bind 綁定標籤的屬性，經過他咱們能夠給一個指定的標籤屬性綁定表達式;

  <li v-bind:class="{red: user.gender=='女'}" v-for="user in users" v-if="user.age>20">
          {{user.username}} - {{user.gender}} - {{user.age}}
  </li>
  複製代碼

• v-on:參數
  • 給元素綁定事件，參數就是事件的名稱;
  • 事件函數寫在Vue實例的methods屬性中

  <button v-on:click="add">添加</button>
  data: { 
      methods: {
          add() {
              /*不要獲取元素進行操做*/
              //this => 表示當前vue的實例
              //app.newData
              //console.log(this.newData);
              this.users.push({
                  username: this.newData.username,
                  gender: this.newData.gender,
                  age: this.newData.age
              });         
          }
      }
  複製代碼