Vue初步認識與Vue基礎指令

小編:管理員 64閱讀 2022.08.19

傳統開發的缺點： 1.DOM操作頻繁，代碼繁雜 2.DOM操作與邏輯代碼混合，可維護性差 3.不同功能區域書寫在一起，可維護性低 4.模塊之間的依賴關系復雜

Vue.js應運而生

官網：

https://cn.vuejs.org

Vue.js核心特性數據驅動視圖

數據變化會自動更新到對應元素中，無需手動操作 DOM，這種行為稱作單向數據綁定。

單向數據綁定

對于輸入框等可輸入元素，可設置雙向數據綁定
- 雙向數據綁定是在數據綁定基礎上，可自動將元素輸入內容更新給數據，實現數據與元素內容的雙向綁定。
Vue.js 的數據驅動視圖是基于 MVVM 模型實現的。
MVVM (Model – View – ViewModel )是一種軟件開發思想
- Model 層，代表數據
- View 層，代表視圖模板
- ViewModel 層，代表業務邏輯處理代碼
基于MVVM 模型實現的數據驅動視圖解放了DOM操作
View 與 Model 處理分離，降低代碼耦合度
但雙向綁定時的 Bug 調試難度增大（有可能出現在視圖或者數據層）
大型項目的 View 與 Model 過多，維護成本高

組件化開發

組件化開發，允許我們將網頁功能封裝為自定義HTML標簽，復用時書寫自定義標簽名即可
組件不僅可以封裝結構，還可以封裝樣式和邏輯代碼，大大提高了開發效率和可維護性

Vue.js安裝本地引入

下載引用：

開發版本

https://cn.vuejs.org/js/vue.js

生產版本

https://cn.vuejs.org/js/vue.min.js

cdn引入

script標簽內部引入

最新穩定版：

https://cdn.jsdelivr.net/npm/vue

指定版本:

https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js

npm安裝

最新穩定版

npm install vue

復制

指定版本

npm install vue@2.6.12

復制Vue.js基礎語法Vue實例

Vue 實例是通過 Vue 函數創建的對象，是使用 Vue 功能的基礎。

var vm = new Vue({
    //選項對象
});

復制el選項

用于選取一個 DOM 元素作為 Vue 實例的掛載目標
只有掛載元素內部才會被 Vue 進行處理，外部為普通 HTML 元素
代表 MVVM 中的 View 層（視圖）
可以為 CSS 選擇器格式的字符串或HTMLElement 實例，但不能為html 或 body

只能有一個DOM元素

掛載完畢后，可以通過vm.$el訪問
未設置 el 的 vue 實例，也可以通過 vm.$mount() 進行掛載，參數形式與 el 規則相同。

也支持變量的方式

插值表達式

掛載元素可以使用 Vue.js 的模板語法，模板中可以通過插值表達式為元素進行動態內容設置，寫法為 {{ }}
注意點：
- 插值表達式只能書寫在標簽內容區域，不可以和其他內容混合在一起 比如說不能通過插值表達式進行元素屬性的混合設置
- 內部只能書寫JS表達式，不能書寫JS語句

違反兩個注意點就會報出模板編輯錯誤的提示

data選項

用于存儲Vue實例需要使用的數據，值為對象類型
data 中的數據可以通過 vm.$data.數據或 vm.數據訪問。
特點：
- data中的數據是直接可以在視圖中通過插值表達式訪問
- data的數據為響應式數據，發生改變時，視圖會自動更新
特殊情況：
- data中存在數組時，索引操作和length操作無法自動更新視圖，可以通過Vue.set()方法替代操作 數組的方法是可以生效的，并且實時更新視圖，比如pop()，push()
Vue.set()方法有三個參數，分別是數組，索引，新內容，用這個辦法可以代替操作，以實時更新視圖

methods選項

用于存儲需要在Vue實例中使用的函數
methods的方法可以通過vm.方法名訪問
方法中的this為vm實例，可以便捷的訪問vm數據等功能

Vue.js指令

指令的本質就是HTML自定義屬性 Vue.js的指令就是以v-開頭的自定義屬性

內容處理v-once指令

使元素內部的插值表達式只生效一次（不隨數據變化更新）

v-text指令

元素內容整體替換為指定純文本數據

<body>
  <div id="app">
    <p v-text="100">這是 p 標簽的原始內容</p>
    <p v-text="content">這是 p 標簽的原始內容</p>
    <p v-text="content2"></p>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        content: '內容文本',
        content2: '<span>span的內容</span>'
      }
    });
  </script>
</body>

復制

顯示結果

v-html指令

將元素內容整體替換為指定的HTML文本

與v-text的區別就在于可以替換為HTML文本，運行HTML代碼

屬性綁定v-bind

v-bind 指令用于動態綁定 HTML 屬性。
v-bind簡寫方式：
v-bind也可以使用表達式，與插值表達式類似

插件表達式和v-bind都不能插入語句

這一類就不行

還可以一次綁定多個屬性，通過綁定對象的方式實現

注意不用冒號，而是等號了

Class綁定

class是HTML屬性，可以通過v-bind綁定，并且可以和class屬性共存

錯誤寫法

有兩個類名，一個x一個a，但是a是固定的，cls會動態變化

對于 class 綁定， Vue.js 中還提供了特殊處理方式
- 對象綁定
例子
- 數組綁定
大括號內部才是動態表示區域

例子

Style綁定

style 是 HTML 屬性，可以通過 v-bind 進行綁定，并且可以與 style 屬性共存
當我們希望給元素綁定多個樣式對象時，可以設置為數組。

渲染指令v-for指令

用于遍歷數據渲染結構，常用的數組與對象均可遍歷

index為數組下的索引值

index為對象下的索引值，key為數據的鍵值

除了遍歷數組和對象，還可以對值進行遍歷

運行結果

v-for注意點

使用 v-for 的同時，應始終指定唯一的 key 屬性，可以提高渲染性能并避免問題。

<body>
  <div id="app">
    <ul>
      <li v-for="(item, index) in itemList" :key="item.id">
        輸入框{{ item.value }}: <input type="text">
      </li>
    </ul>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        arr: [1, 2, 3],
        itemList: [
          {
            id: 1,
            value: 2
          },
          {
            id: 2,
            value:3
          },
          {
            id:3,
            value:3
          }
        ]
      }
    })
  </script>
</body>

復制

通過<template>標簽設置模板占位符�？梢詫⒉糠衷鼗蛘邇热葑鳛檎w進行操作

template標簽并不是真正的標簽，生成的結構直接是內部的標簽 template并不是一個真實的元素，所以沒法設置key屬性

<div id="app">
    <template v-for="item in obj">
      <span>{{ item }}</span>
      <br>
    </template>
  </div>

復制

結果

v-show 指令

用于控制元素顯示與隱藏，適用于顯示隱藏頻繁切換的時候使用

v-show內部的數據也可以通過data設置達到控制的效果 也可以通過條件表達式來控制

<p v-show="false">標簽內容</p>
    <p v-show="22 > 11">標簽內容</p>

復制

注意：
- <template>無法使用v-show指令（原因：template不是真正意義上的元素）
- v-show的本質就是元素內部的display屬性是否為true

v-if指令

用于根據條件，控制元素的創建與移除

<body>
  <div id="app">
    <p v-if="bool">這是標簽內容</p>
    <p v-else-if="false">這是第二個p標簽</p>
    <p v-else-if="false">這是第三個p標簽</p>
    <p v-else>最后一個p標簽</p>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        bool: false
      }
    });
  </script>
</body>

復制

v-if 與 v-show的區別就在于show是創建了元素，if是符合條件才創建 v-if 和v-else-if這種組合只要有一個滿足條件就會跳出，后面的不會再創建，跟JavaScript的if原理相同

注意事項
- 給使用v-if的同類型元素綁定不同的key

<body>
  <div id="app">
    <div v-if="type==='username'" :key="'username'">
      用戶名輸入框：<input type="text">
    </div>
    <div v-else :key="'email'">
      郵箱輸入框：<input type="text">
    </div>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        bool: true,
        type: 'username'
      }
    });
  </script>
</body>

復制

出于性能考慮，應該避免v-if和v-for應用于同一個標簽更好的解決辦法：將v-if和v-for分開，比如將v-if放在父元素上

<body>
  <div id="app">
    <ul v-if="true">
      <li v-for="item in items">{{item}}</li>
    </ul>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
       items: {
         content1: '內容1',
         content2: '內容2',
         content3: '內容3'
       }
      }
    });
  </script>
</body>

復制

關聯標簽：

相關推薦

推薦百科

公積金怎么辦理繳存個人自愿繳存者的住房公積金繳存額由個人自行確定，但每次繳存額不得低于最新規定的最低工資標準的16%(今年最低繳存額為248元)。繳存方式上，可選擇按月、按季、按年繳存，也可躉繳。

大家關注

熱門知識

: QQ客服

: E-mail:market#hunt007.cn

關于本站 | 聯系我們 | 友情鏈接 | 法律聲明 | 求職幫助 | 熱門搜索

粵ICP備10072383號-2 Copyright◎ 2022 hunt007.com, All Rights Reserved.

粵公網安備 44010402000066號

秋霞久久老子无码午夜精品,欧洲av成本人在线观看免费,亚洲精品无码国模av