Vue 核心基礎（2.X）

一、Vue 的基本認識

官網：

1. 英文官網: https://vuejs.org/
2. 中文官網: https://cn.vuejs.org/

1、Vue 的特點

1. 遵循MVVM模式
2. 編碼簡潔，體積小，運行效率高，適合移動/ PC 端開發
3. 它本身只關注 UI， 可以輕松的引入 vue 插件或其他的第三庫開發項目

二、Vue 的基本使用

永遠的 HelloWord

編碼：

<div id="app">
  <input type="text" v-model="username" />
  <p>Hello, {{username}}</p>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    // 配置對象： 屬性名是一些特定的名稱
    el: "#app", // 值是選擇器 element 用來查找跟元素
    data: {
      username: "OY_test", // 包含多個可變數據的對象，相當于state,為模板頁面提供數據
    },
  });
</script>

復制

效果示例：

Vue 的 MVVM

三、模板語法

模板的理解

• 動態的 html 頁面
• 包含了一些 JS 語法代碼
  • 雙大括號表達式 （{{}}`） - 指令（以 v-開頭的自定義標簽屬性） ### 1、雙大括號表達式 - **語法：** `{{exp}}
• 功能： 向頁面輸出數據
• 可以調用對象的方法

2、指令一： 強制數據綁定

• 語法 指定變化的屬性值
• 完整寫法：v-bin:xxx = ‘yyy’ (yyy 會作為表達式解析執行)
• 簡介寫法： :xxx = ‘yyy’

3、指令二：綁定事件監聽

• 功能：綁定指定事件名的回調函數
• 完整寫法：

v-on:keyup='xxx' v-on:keyup='xxx'(參數) v-on:keyup.enter='xxx'

復制

• 簡介寫法：

@keyup='xxx' @keyup.enter='xxx'

復制4、編碼示例

<div id="app">
  <h2>1. 雙大括號表達式</h2>
  <p>{{msg}}</p>
  <p>{{msg.toUpperCase()}}</p>
  <h2>2. 指令一: 強制數據綁定</h2>
  <a href="url">訪問指定站點</a><br/><!--不能使用-->
  <a v-bind:href="url">訪問指定站點2</a><br/>
  <a :href="url">訪問指定站點3</a>

  <h2>3. 指令二: 綁定事件監聽</h2>
  <button v-on:click="handleClick">點我</button>
  <button @click="handleClick">點我2</button>


</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
  el: "#app",
  data: {
    msg: "NBA I