Vue 核心基礎(2.X)

小編:管理員 91閱讀 2022.08.18

一、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