vue2 基礎學習01 （ 核心最基本的功能）

vue學習路徑和建議----尤雨溪

vue官網

根據官網一步步學習

1.項目構建

• 引入vue庫，初學時直接經過CDN

  <!-- 開發環境版本，包含了有幫助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  ---

2.聲明式渲染

• 留坑

  在html中建立區域（元素標籤）

  <div id="app">
    {{ message }} <!--插值表達式--> 
  </div>

• 實例化

  在 script標籤中實例Vue,渲染數據

  var app = new Vue({
    el: '#app',//element,找到所渲染的坑位（div）
    data: {    //數據
      message: 'Hello Vue!'
    }
  })

• 接下來官網介紹了指令v-bind

  從後面我瞭解了下 v-bind的語法知識:

  vue單向數據流綁定 ： v-bind: (屬性) 簡寫 :(屬性)

  例子：<input v-bind:value="name" v-bind:class="name">

  • 也能夠綁定其餘的屬性，不單單是value
  • 單向數據綁定 內存改變影響頁面改變
  • v-bind就是對屬性的簡單賦值,當內存中值改變，仍是會觸發從新渲染

  官網的例子簡化

  <div id="app-2">
      <span v-bind:title="message">
        鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
      </span>
    </div>

  var app2 = new Vue({
    el: '#app-2',
    data: {
      message: '我就是title的內容，哈哈哈'
    }
  })

  以上的 v-bind:title="message" 能夠簡化爲 :title="message".之後再細學。

--------------

3.條件與循環

• 這塊官網講了兩個指令v-if 和 v-for

  • v-if

    根據表達式的值的真假條件， 銷燬(remove)或 重建(append)元素

    <div id="app-3">
      <p v-if="seen">如今你看到我了</p>
    </div>

    var app3 = new Vue({
      el: '#app-3',
      data: {
        seen: true //可改成false
      }
    })

    將true改成 false，p標籤將消失！！！

  • v-for

    循環數組、對象

    <div id="app-4">
      <ol>
        <li v-for="todo in todos">
          {{ todo.text }}
        </li>
      </ol>
    </div>

    var app4 = new Vue({
      el: '#app-4',
      data: {
        todos: [
          { text: '學習 JavaScript' },
          { text: '學習 Vue' },
          { text: '整個牛項目' }
        ]
      }
    })

    ---

4.處理用戶輸入

• 這塊是v-on事件綁定

  事件綁定 v-on:事件名="表達式||函數名" 簡寫 @事件名="表達式||函數名"

  官網的例子：添加一個能夠逆轉一句話的事件

  <div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">逆轉消息</button>
  </div>

  var app5 = new Vue({
    el: '#app-5',
    data: {
      message: 'Hello Vue.js!'
    },
    methods: {
      reverseMessage: function () {
        this.message = this.message.split('').reverse().join('')
      }
    }
  })

• 這塊是v-model 雙向綁定

  <div id="app-6">
    <p>{{ message }}</p>
    <input v-model="message">
  </div>

  var app6 = new Vue({
    el: '#app-6',
    data: {
      message: 'Hello Vue!'
    }
  })

  ---

5.組建化應用構建

這塊準備後面再學