Vue 學習筆記

来源:https://www.cnblogs.com/xuzhencheng/archive/2019/10/09/11642298.html
-Advertisement-
Play Games

vue對比jquery vue：mvvm 數據驅動影響視圖 適用於複雜數據jquery：mvc 視圖塞入數據 適用於複雜視圖動效 （其實都是js 的封裝，以及對html 的擴展） 相關指令 v-text 等同大鬍子效果 但是會轉換為字元串 v-html 綁定html屬性 v-if三兄弟 只會渲染判斷 ...


vue對比jquery

vue：mvvm 數據驅動影響視圖 適用於複雜數據
jquery：mvc 視圖塞入數據 適用於複雜視圖動效

（其實都是js 的封裝，以及對html 的擴展）

相關指令

v-text 等同大鬍子效果 但是會轉換為字元串

v-html 綁定html屬性

  <div id="app">
    <div v-html="message"></div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        message: '<h1>菜鳥教程</h1>'
      }
    })
  </script>

v-if三兄弟 只會渲染判斷為真的dom
v-show 綁定值的布爾值來判斷是否顯示 會渲染整個dom只是會根據布爾只能判斷是否增加display none這個內聯樣式
v-if和v-show的區別：
v-if有更高的切換消耗；
v-show有更高的初始渲染消耗；
v-if適合運營條件不大可能改變；
v-show適合頻繁切換

v-for: 迴圈

v-once 只會渲染一次 即使數據改變

v-bind 用來響應地更新html屬性 使用場景：綁定介面請求得到的數據 簡寫： : ，可以綁定class和內聯樣式

<style>
  .class1 {
    background: #444;
    color: #eee;
  }
</style>

<body>
  <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

  <div id="app">
    <label for="r1">修改顏色</label><input type="checkbox" v-model="class1" id="r1">
    <br><br>
    <!-- 單引號只是對下麵對兩個class1作出區分 不使用也可以 前面是class 樣式 後面是bool值 -->
    <div v-bind:class="{'class1': class1}">
      directiva v-bind:class
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        class1: false
      }
    });
  </script>
</body>

v-on：用來監聽dom事件 其修飾符可以指定鍵盤事件
v-on:click 簡寫@click：事件監聽
v-model:雙向綁定 一般結合input textarea (多行) 使用 其有修飾符.lazy .number .trim

生命周期

以下都是鉤子函數

beforeCreate（創建前）
created（創建後）
beforeMount (載入前)
mounted（載入後）
beforeUpdate（更新前）
updated（更新後）
beforeDestroy（銷毀前）
destroyed（銷毀後）

（在不同的時間點，可以進行不同的操作。）

計算屬性

computed：計算屬性

區別與methods：
性能相比methods要高 因為有緩存 只有在相關值發生改變時才會觸發 在第一次渲染頁面也會主動觸發

計算屬性的數據源未發生變化 則不會觸發響應的計算屬性
屬性區分於方法

 <div id="app">
    <p>原始字元串: {{ message }}</p>
    <p>計算後反轉字元串: {{ reversedMessage }}</p>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'Runoob!'
      },
      computed: {
        // 以下的函數將提供給計算屬性的 getter   計算屬性預設只有getter
        reversedMessage: function() {
          // `this` 指向 vm 實例
          return this.message.split('').reverse().join('')
        }
      }
    })
  </script>

計算屬性中預設存在getter方法 我們可以手動添加setter方法:

<div id="app">
    <p>{{ site }}</p>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        name: 'Google',
        url: 'http://www.google.com'
      },
      computed: {
        site: {
          // getter
          get: function() {
            return this.name + ' ' + this.url
          },
          // setter
          set: function(newValue) {
            var names = newValue.split(' ')
            this.name = names[0]
            this.url = names[names.length - 1]
          }
        }
      }
    })
    // 調用 setter， vm.name 和 vm.url 也會被對應更新
    vm.site = '菜鳥教程 http://www.runoob.com';  //觸發set方法
    document.write('name: ' + vm.name); //動態更新dom樹
    document.write('<br>');
    document.write('url: ' + vm.url);
  </script>

過濾器

vue中可以自定義過濾器 被用作常見地文本格式化

<div id="app">
    <!-- 過濾器的用法 -->
    {{ message | capitalize }}
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'runoob'
      },
      filters: {
        capitalize: function(value) {
          if (!value) return ''
          value = value.toString()
          return value.charAt(0).toUpperCase() + value.slice(1) //對字元串的第一個字母進行大寫
        }
      }
    })
  </script>

監聽屬性

watch：響應數據變化

<div id="computed_props">
    <!-- 分別綁定kilometers和meters -->
    千米 : <input type="text" v-model="kilometers"> 米 : <input type="text" v-model="meters">
  </div>
  <p id="info"></p>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#computed_props',
      data: {
        kilometers: 0,
        meters: 0
      },
      methods: {},
      computed: {},
      watch: {
        kilometers: function(val) {  //dom中的相關綁定會觸發對應的觀察屬性
          this.kilometers = val;
          this.meters = val * 1000;
        },
        meters: function(val) {
          this.kilometers = val / 1000;
          this.meters = val;
        }
      }
    });
    // $watch 是一個實例方法 $作用與vue自帶的屬性區別u與自定義的屬性
    vm.$watch('kilometers', function(newValue, oldValue) {
      // 這個回調將在 vm.kilometers 改變後調用
      document.getElementById("info").innerHTML = "修改前值為: " + oldValue + "，修改後值為: " + newValue;
    })
  </script>

樣式綁定

  • 單樣式綁定：
<style>
  .active {
    width: 100px;
    height: 100px;
    background: green;
  }
</style>

<body>
  <div id="app">
    <!-- 主要是v-bind的使用 -->
    <div v-bind:class="{ active: isActive }"></div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        isActive: true
      }
    })
  </script>
  • 多樣式綁定：
<style>
  .active {
    width: 100px;
    height: 100px;
    background: green;
  }

  .text-danger {
    background: red;
  }
</style>

<body>
  <div id="app">
    <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        isActive: true,
        hasError: false
      }
    })
  </script>

組件

組件是整個vue知識體系中最重要的一個模塊
組件的作用是：復用
前端路由相對於傳統路由 請求少 節省資源
mode:history //不使用html5 實現前進和後退 預設設置
關於組件的引用 除了直接引用自定義標簽 is標簽也可以引用組件到指定的位置,動態綁定組件

全局組件

<div id="app">
    <runoob></runoob>
  </div>

  <script>
    // 註冊  此中註冊方式為全局組件 所有的外部組件中都可以引用
    Vue.component('runoob', {
      template: '<h1>自定義組件!</h1>'
    })
    // 創建根實例
    new Vue({
      el: '#app'
    })
  </script>

局部組件

區分於全局組件

<div id="app">
    <runoob></runoob>
</div>

<script>
var Child = {
  template: '<h1>自定義組件!</h1>'
}

// 創建根實例
new Vue({
  el: '#app',
  components: {
    // <runoob> 將只在父模板可用
    'runoob': Child
  }
})
</script>

template

template 模版 用來承載dom樹 常在組件中使用

props

自定義組件屬性：通過props申明屬性 可以通過v-bind動態綁定自定義屬性

  <div id="app">
    <child message="hello!"></child>
  </div>

  <script>
    // 註冊
    Vue.component('child', {
      // 聲明 props
      props: ['message'],
      // 同樣也可以在 vm 實例中像 “this.message” 這樣使用
      template: '<span>{{ message }}</span>' //可以這樣理解：此處message既是屬性也是變數
    })
    // 創建根實例
    new Vue({
      el: '#app'
    })
  </script>

動態props

通過v-bind實現

<div id="app">
    <div>
      <input v-model="parentMsg">
      <br>
      <!-- 通過v-bind綁定父組件中的parentMsg 實現動態綁定-->
      <child v-bind:message="parentMsg"></child>
    </div>
  </div>

  <script>
    // 註冊
    Vue.component('child', {
      // 聲明 props
      props: ['message'],
      // 同樣也可以在 vm 實例中像 “this.message” 這樣使用
      template: '<span>{{ message }}</span>'
    })
    // 創建根實例
    new Vue({
      el: '#app',
      data: {
        parentMsg: '父組件內容'
      }
    })
  </script>

組件間交互

父組件往子組件傳入數據使用props 反過來則用emit

父傳子：
子組件props定義屬性 子組件標簽引用v-bind將父組件參數與子組件屬性綁定

   <div id="counter-event-example">
      <button-todo v-bind:todo="item"></button-todo>
    </div>

    <script>
      Vue.component('button-todo', {
        props: ['todo'],
        template: '<button >{{ todo }}</button>'
      })
      new Vue({
        el: '#counter-event-example',
        data: {
          item: '我是item'
        }
      })
    </script>

子傳父：
父組件定義method：fv_fuc 接受參數arg
子組件 this.$.emit(<fuc>,<arg>)
子組件標簽引用 v-on：<fuc>="fv_fuc"
流程： 子組件的emit觸發標簽引用的fuc繼而觸發父組件的fv_fuc

  <div id="app">
      <div id="counter-event-example">
        <p>{{ counter }}</p>
        <button-counter v-on:increment="setCounter"></button-counter>
      </div>
    </div>

    <script>
      Vue.component('button-counter', {
        template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
        data: function() {
          return {
            counter: 0
          }
        },
        methods: {
          incrementHandler: function() {
            this.counter += 1
            this.$emit('increment', this.counter)
          }
        },
      })
      new Vue({
        el: '#counter-event-example',
        data: {
          counter: 0
        },
        methods: {
          setCounter: function(somedata) {
            this.counter = somedata //接收子組件的數據
          }
        }
      })
    </script>

自定義指令

directive 定義指令名稱
inserted 當綁定元素插入到dom中會觸發

<div id="app">
    <p>頁面載入時，input 元素自動獲取焦點：</p>
    <input v-focus>
  </div>

  <script>
    // 註冊一個全局自定義指令 v-focus
    Vue.directive('focus', {
      // 當綁定元素插入到 DOM 中。
      inserted: function(el) {
        // 聚焦元素
        el.focus()
      }
    })
    // 創建根實例
    new Vue({
      el: '#app'
    })
  </script>

vue.directive定義全局指令 directives: {}的方式定義局部指令 這點和component(組件)相似

  <div id="app">
    <p>頁面載入時，input 元素自動獲取焦點：</p>
    <input v-focus>
  </div>

  <script>
    // 創建根實例
    new Vue({
      el: '#app',
      directives: {
        // 註冊一個局部的自定義指令 v-focus 和components的使用相似
        focus: {
          // 指令的定義
          inserted: function(el) {
            // 聚焦元素
            el.focus()
          }
        }
      }
    })
  </script>

directive可以和鉤子函數配合使用 不需要鉤子函數也可以簡寫 第二個參數是function，預設的第一個參數是el

 <script>
  Vue.directive('runoob', {
      // 綁定bind的鉤子函數
      bind: function(el, binding, vnode) {
        var s = JSON.
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 小程式-基礎表達篇
    /約定/ 讓我們輕裝上陣 一個功能頁（Page）的開發通常需要四大塊：配置、代碼、佈局、樣式。 這四大塊承載不同的方面，要獨立不混雜，又要整體融合。於是有了以下約定： 每一塊 獨立的文件、相同的文件名、不同的擴展名。 按約定行事，自動融合。 於是，一個小程式的功能頁 Page，就這樣形成了。 ind ...
  • Vue官方文檔筆記（二）
    23、$refs是什麼東東？ 通過在標簽上設置ref屬性，然後在Vue實例方法中可以通過$refs拿到這些標簽，如： 24、對於多級嵌套組件，後代組件如何拿到父級或祖父級，設置更高級別的組件的數據或方法？ 使用依賴註入。 provide選項允許我們在當前組件指定我們想要提供給後代組件的數據/方法，比 ...
  • 抖音抖一抖-SVG和CSS視覺故障藝術小賞
    故障藝術，英文名稱叫glitch，在很多賽博朋克作品中經常看到，其實就是故意表現一種顯示設備的小故障效果，抖音的圖標其實就是這種的效果，我們看下這個圖標 這個圖標中的紅色和藍色的偏移其實就是一種故障藝術，看到這個，我就能想到早年我家還沒有有線電視時，搖天線對電視信號的場景，信號一差就是對著電視一陣拳 ...
  • 你應該知道的簡單易用的CSS技巧
    作為前端，在工作中難免會遇到關於排版的問題，以下是我整理的一些關於CSS的技巧，希望對你能有幫助。 1、每個單詞的首字母大寫 一般我們會用JS實現，其實CSS就可以實現。 JS代碼： var str = 'hello world'; str.replace(/( |^)[a z]/g,(L)= L. ...
  • 1.css3
    1.引入外部樣式表的格式： <link rel=”stylesheet” type=”text/css” href=”../css/style1.css”> 2.樣式表第一行應註明編碼類型： @charset “utf-8”; 3.css語法： ①一個元素中多個屬性用分號隔開，多個元素之間用逗號隔開 ...
  • html解決空格顯示問題
    在前端裡面，大家都知道，html中輸入空格或換行是識別不了是空格的，但是有時候需要實現，那麼該如何解決呢?主要有以下幾個方面： 1：常用的轉義：&nbsp; 2：使用全形拼音，然後輸入空格也可實現 3：用標簽 pre實現(一般很少用了) 4：用css text-indent實現(這個一般用於時間段首 ...
  • _proto_和prototype的區別
    1. _proto_和prototype prototype屬性是一個靜態屬性， _proto_屬性是一個實例屬性。 prototype表示類的原型對象，_proto_表示原型對象中定義的內部屬性[prototype]的值。 類的每一個實例都有一個_proto_屬性,用於引用創建它的構造方法的pro ...
  • 關於CSS的書寫規範和順序
    關於CSS的書寫規範和順序，是大部分前端er都必須要攻剋的一門關卡，如果沒有按照良好的CSS書寫規範來寫CSS代碼，會影響代碼的閱讀體驗。這裡總結了一個CSS書寫規範、CSS書寫順序供大家參考，這些是參考了國外一些文章以及我的個人經驗總結出來，我想對寫CSS的前端用戶來說是值得學習的。 CSS書寫順 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類