vue學習筆記3

来源:https://www.cnblogs.com/missile/archive/2019/03/13/10526718.html
-Advertisement-
Play Games

Vue.js Day3 定義Vue組件 什麼是組件： 組件的出現，就是為了拆分Vue實例的代碼量的，能夠讓我們以不同的組件，來劃分不同的功能模塊，將來我們需要什麼樣的功能，就可以去調用對應的組件即可； 組件化和模塊化的不同： + 模塊化： 是從代碼邏輯的角度進行劃分的；方便代碼分層開發，保證每個功能 ...


Vue.js - Day3

定義Vue組件

什麼是組件： 組件的出現，就是為了拆分Vue實例的代碼量的，能夠讓我們以不同的組件，來劃分不同的功能模塊，將來我們需要什麼樣的功能，就可以去調用對應的組件即可；
組件化和模塊化的不同：

  • 模塊化： 是從代碼邏輯的角度進行劃分的；方便代碼分層開發，保證每個功能模塊的職能單一；

  • 組件化： 是從UI界面的角度進行劃分的；前端的組件化，方便UI組件的重用；

    全局組件定義的三種方式

  1. 使用 Vue.extend 配合 Vue.component 方法：
var login = Vue.extend({
      template: '<h1>登錄</h1>'
    });
    Vue.component('login', login);
  1. 直接使用 Vue.component 方法：
Vue.component('register', {
      template: '<h1>註冊</h1>'
    });
  1. 將模板字元串，定義到script標簽種：
<script id="tmpl" type="x-template">
      <div><a href="#">登錄</a> | <a href="#">註冊</a></div>
    </script>

同時，需要使用 Vue.component 來定義組件：

Vue.component('account', {
      template: '#tmpl'
    });

註意： 組件中的DOM結構，有且只能有唯一的根元素（Root Element）來進行包裹！

組件中展示數據和響應事件

  1. 在組件中，data需要被定義為一個方法，例如：
Vue.component('account', {
      template: '#tmpl',
      data() {
        return {
          msg: '大家好！'
        }
      },
      methods:{
        login(){
          alert('點擊了登錄按鈕');
        }
      }
    });
  1. 在子組件中，如果將模板字元串，定義到了script標簽中，那麼，要訪問子組件身上的data屬性中的值，需要使用this來訪問；

【重點】為什麼組件中的data屬性必須定義為一個方法並返回一個對象

  1. 通過計數器案例演示

使用components屬性定義局部子組件

  1. 組件實例定義方式：
<script>
    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components: { // 定義子組件
        account: { // account 組件
          template: '<div><h1>這是Account組件{{name}}</h1><login></login></div>', // 在這裡使用定義的子組件
          components: { // 定義子組件的子組件
            login: { // login 組件
              template: "<h3>這是登錄組件</h3>"
            }
          }
        }
      }
    });
  </script>
  1. 引用組件：
<div id="app">
    <account></account>
  </div>

使用flag標識符結合v-if和v-else切換組件

  1. 頁面結構：
<div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <my-com1 v-if="flag"></my-com1>
    <my-com2 v-else="flag"></my-com2>
  </div>
  1. Vue實例定義：
<script>
    Vue.component('myCom1', {
      template: '<h3>奔波霸</h3>'
    })

    Vue.component('myCom2', {
      template: '<h3>霸波奔</h3>'
    })

    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: true
      },
      methods: {}
    });
  </script>

使用:is屬性來切換不同的子組件,並添加切換動畫

  1. 組件實例定義方式：
  // 登錄組件
    const login = Vue.extend({
      template: `<div>
        <h3>登錄組件</h3>
      </div>`
    });
    Vue.component('login', login);

    // 註冊組件
    const register = Vue.extend({
      template: `<div>
        <h3>註冊組件</h3>
      </div>`
    });
    Vue.component('register', register);

    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: { comName: 'login' },
      methods: {}
    });
  1. 使用component標簽，來引用組件，並通過:is屬性來指定要載入的組件：
  <div id="app">
    <a href="#" @click.prevent="comName='login'">登錄</a>
    <a href="#" @click.prevent="comName='register'">註冊</a>
    <hr>
    <transition mode="out-in">
      <component :is="comName"></component>
    </transition>
  </div>
  1. 添加切換樣式：
  <style>
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(30px);
    }

    .v-enter-active,
    .v-leave-active {
      position: absolute;
      transition: all 0.3s ease;
    }

    h3{
      margin: 0;
    }
  </style>

父組件向子組件傳值

  1. 組件實例定義方式，註意：一定要使用props屬性來定義父組件傳遞過來的數據
<script>
    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '這是父組件中的消息'
      },
      components: {
        son: {
          template: '<h1>這是子組件 --- {{finfo}}</h1>',
          props: ['finfo']
        }
      }
    });
  </script>
  1. 使用v-bind或簡化指令，將數據傳遞到子組件中：
<div id="app">
    <son :finfo="msg"></son>
  </div>

子組件向父組件傳值

  1. 原理：父組件將方法的引用，傳遞到子組件內部，子組件在內部調用父組件傳遞過來的方法，同時把要發送給父組件的數據，在調用方法的時候當作參數傳遞進去；
  2. 父組件將方法的引用傳遞給子組件，其中，getMsg是父組件中methods中定義的方法名稱，func是子組件調用傳遞過來方法時候的方法名稱
<son @func="getMsg"></son>
  1. 子組件內部通過this.$emit('方法名', 要傳遞的數據)方式，來調用父組件中的方法，同時把數據傳遞給父組件使用
<div id="app">
    <!-- 引用父組件 -->
    <son @func="getMsg"></son>

    <!-- 組件模板定義 -->
    <script type="x-template" id="son">
      <div>
        <input type="button" value="向父組件傳值" @click="sendMsg" />
      </div>
    </script>
  </div>

  <script>
    // 子組件的定義方式
    Vue.component('son', {
      template: '#son', // 組件模板Id
      methods: {
        sendMsg() { // 按鈕的點擊事件
          this.$emit('func', 'OK'); // 調用父組件傳遞過來的方法，同時把數據傳遞出去
        }
      }
    });

    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getMsg(val){ // 子組件中，通過 this.$emit() 實際調用的方法，在此進行定義
          alert(val);
        }
      }
    });
  </script>

評論列表案例

目標：主要練習父子組件之間傳值

使用 this.$refs 來獲取元素和組件

  <div id="app">
    <div>
      <input type="button" value="獲取元素內容" @click="getElement" />
      <!-- 使用 ref 獲取元素 -->
      <h1 ref="myh1">這是一個大大的H1</h1>

      <hr>
      <!-- 使用 ref 獲取子組件 -->
      <my-com ref="mycom"></my-com>
    </div>
  </div>

  <script>
    Vue.component('my-com', {
      template: '<h5>這是一個子組件</h5>',
      data() {
        return {
          name: '子組件'
        }
      }
    });

    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getElement() {
          // 通過 this.$refs 來獲取元素
          console.log(this.$refs.myh1.innerText);
          // 通過 this.$refs 來獲取組件
          console.log(this.$refs.mycom.name);
        }
      }
    });
  </script>

什麼是路由

  1. 對於普通的網站，所有的超鏈接都是URL地址，所有的URL地址都對應伺服器上對應的資源；

  2. 對於單頁面應用程式來說，主要通過URL中的hash(#號)來實現不同頁面之間的切換，同時，hash有一個特點：HTTP請求中不會包含hash相關的內容；所以，單頁面程式中的頁面跳轉主要用hash實現；

  3. 在單頁面應用程式中，這種通過hash改變來切換頁面的方式，稱作前端路由（區別於後端路由）；

在 vue 中使用 vue-router

  1. 導入 vue-router 組件類庫：
<!-- 1. 導入 vue-router 組件類庫 -->
  <script src="./lib/vue-router-2.7.0.js"></script>
  1. 使用 router-link 組件來導航
<!-- 2. 使用 router-link 組件來導航 -->
<router-link to="/login">登錄</router-link>
<router-link to="/register">註冊</router-link>
  1. 使用 router-view 組件來顯示匹配到的組件
<!-- 3. 使用 router-view 組件來顯示匹配到的組件 -->
<router-view></router-view>
  1. 創建使用Vue.extend創建組件
    // 4.1 使用 Vue.extend 來創建登錄組件
    var login = Vue.extend({
      template: '<h1>登錄組件</h1>'
    });

    // 4.2 使用 Vue.extend 來創建註冊組件
    var register = Vue.extend({
      template: '<h1>註冊組件</h1>'
    });
  1. 創建一個路由 router 實例，通過 routers 屬性來定義路由匹配規則
// 5. 創建一個路由 router 實例，通過 routers 屬性來定義路由匹配規則
    var router = new VueRouter({
      routes: [
        { path: '/login', component: login },
        { path: '/register', component: register }
      ]
    });
  1. 使用 router 屬性來使用路由規則
// 6. 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      router: router // 使用 router 屬性來使用路由規則
    });

設置路由高亮

設置路由切換動效

在路由規則中定義參數

  1. 在規則中定義參數：
{ path: '/register/:id', component: register }
  1. 通過 this.$route.params來獲取路由中的參數：
var register = Vue.extend({
      template: '<h1>註冊組件 --- {{this.$route.params.id}}</h1>'
    });

使用 children 屬性實現路由嵌套

  <div id="app">
    <router-link to="/account">Account</router-link>

    <router-view></router-view>
  </div>

  <script>
    // 父路由中的組件
    const account = Vue.extend({
      template: `<div>
        這是account組件
        <router-link to="/account/login">login</router-link> | 
        <router-link to="/account/register">register</router-link>
        <router-view></router-view>
      </div>`
    });

    // 子路由中的 login 組件
    const login = Vue.extend({
      template: '<div>登錄組件</div>'
    });

    // 子路由中的 register 組件
    const register = Vue.extend({
      template: '<div>註冊組件</div>'
    });

    // 路由實例
    var router = new VueRouter({
      routes: [
        { path: '/', redirect: '/account/login' }, // 使用 redirect 實現路由重定向
        {
          path: '/account',
          component: account,
          children: [ // 通過 children 數組屬性，來實現路由的嵌套
            { path: 'login', component: login }, // 註意，子路由的開頭位置，不要加 / 路徑符
            { path: 'register', component: register }
          ]
        }
      ]
    });

    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components: {
        account
      },
      router: router
    });
  </script>

命名視圖實現經典佈局

  1. 標簽代碼結構：
<div id="app">
    <router-view></router-view>
    <div class="content">
      <router-view name="a"></router-view>
      <router-view name="b"></router-view>
    </div>
  </div>
  1. JS代碼：
<script>
    var header = Vue.component('header', {
      template: '<div class="header">header</div>'
    });

    var sidebar = Vue.component('sidebar', {
      template: '<div class="sidebar">sidebar</div>'
    });

    var mainbox = Vue.component('mainbox', {
      template: '<div class="mainbox">mainbox</div>'
    });

    // 創建路由對象
    var router = new VueRouter({
      routes: [
        {
          path: '/', components: {
            default: header,
            a: sidebar,
            b: mainbox
          }
        }
      ]
    });

    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router
    });
  </script>
  1. CSS 樣式：
  <style>
    .header {
      border: 1px solid red;
    }

    .content{
      display: flex;
    }
    .sidebar {
      flex: 2;
      border: 1px solid green;
      height: 500px;
    }
    .mainbox{
      flex: 8;
      border: 1px solid blue;
      height: 500px;
    }
  </style>

watch屬性的使用

考慮一個問題：想要實現 名 和 姓 兩個文本框的內容改變，則全名的文本框中的值也跟著改變；（用以前的知識如何實現？？？）

  1. 監聽data中屬性的改變：
<div id="app">
    <input type="text" v-model="firstName"> +
    <input type="text" v-model="lastName"> =
    <span>{{fullName}}</span>
  </div>

  <script>
    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'jack',
        lastName: 'chen',
        fullName: 'jack - chen'
      },
      methods: {},
      watch: {
        'firstName': function (newVal, oldVal) { // 第一個參數是新數據，第二個參數是舊數據
          this.fullName = newVal + ' - ' + this.lastName;
        },
        'lastName': function (newVal, oldVal) {
          this.fullName = this.firstName + ' - ' + newVal;
        }
      }
    });
  </script>
  1. 監聽路由對象的改變：
<div id="app">
    <router-link to="/login">登錄</router-link>
    <router-link to="/register">註冊</router-link>

    <router-view></router-view>
  </div>

  <script>
    var login = Vue.extend({
      template: '<h1>登錄組件</h1>'
    });

    var register = Vue.extend({
      template: '<h1>註冊組件</h1>'
    });

    var router = new VueRouter({
      routes: [
        { path: "/login", component: login },
        { path: "/register", component: register }
      ]
    });

    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router: router,
      watch: {
        '$route': function (newVal, oldVal) {
          if (newVal.path === '/login') {
            console.log('這是登錄組件');
          }
        }
      }
    });
  </script>

computed計算屬性的使用

  1. 預設只有getter的計算屬性：
<div id="app">
    <input type="text" v-model="firstName"> +
    <input type="text" v-model="lastName"> =
    <span>{{fullName}}</span>
  </div>

  <script>
    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'jack',
        lastName: 'chen'
      },
      methods: {},
      computed: { // 計算屬性； 特點：當計算屬性中所以來的任何一個 data 屬性改變之後，都會重新觸發 本計算屬性 的重新計算，從而更新 fullName 的值
        fullName() {
          return this.firstName + ' - ' + this.lastName;
        }
      }
    });
  </script>
  1. 定義有getter和setter的計算屬性：
<div id="app">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <!-- 點擊按鈕重新為 計算屬性 fullName 賦值 -->
    <input type="button" value="修改fullName" @click="changeName">

    <span>{{fullName}}</span>
  </div>

  <script>
    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'jack',
        lastName: 'chen'
      },
      methods: {
        changeName() {
          this.fullName = 'TOM - chen2';
        }
      },
      computed: {
        fullName: {
          get: function () {
            return this.firstName + ' - ' + this.lastName;
          },
          set: function (newVal) {
            var parts = newVal.split(' - ');
            this.firstName = parts[0];
            this.lastName = parts[1];
          }
        }
      }
    });
  </script>

watch、computed和methods之間的對比

  1. computed屬性的結果會被緩存，除非依賴的響應式屬性變化才會重新計算。主要當作屬性來使用；
  2. methods方法表示一個具體的操作，主要書寫業務邏輯；
  3. watch一個對象，鍵是需要觀察的表達式，值是對應回調函數。主要用來監聽某些特定數據的變化，從而進行某些具體的業務邏輯操作；可以看作是computed和methods的結合體；

nrm的安裝使用

作用：提供了一些最常用的NPM包鏡像地址，能夠讓我們快速的切換安裝包時候的伺服器地址；
什麼是鏡像：原來包剛一開始是只存在於國外的NPM伺服器，但是由於網路原因，經常訪問不到，這時候，我們可以在國內，創建一個和官網完全一樣的NPM伺服器，只不過，數據都是從人家那裡拿過來的，除此之外，使用方式完全一樣；

  1. 運行npm i nrm -g全局安裝nrm包；
  2. 使用nrm ls查看當前所有可用的鏡像源地址以及當前所使用的鏡像源地址；
  3. 使用nrm use npm或nrm use taobao切換不同的鏡像源地址；

相關文件

  1. URL中的hash（井號）

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • linux下構建MysqlCluster集群，NDB搜索引擎
    搭建管理節點 Ndb搜索引擎對於伺服器的記憶體要求比較高，因為所有數據節點的數據，以及索引，事務等等都需要載入進記憶體中。 下載 mysql-cluster-gpl-7.6.8-linux-glibc2.12-x86_64.tar.gz 集群壓縮包上傳至伺服器，解壓，這裡說明一下文件解壓後會比較大，儘量 ...
  • Mysql 資料庫常用配置命令
    1.查看mysql資料庫預設編碼: mysql> show variables like "character%"; + + +| Variable_name | Value |+ + +| character_set_client | utf8 || character_set_connectio ...
  • Android中對已安裝應用的管理實現
    獲取、管理手機中已安裝的所有應用信息 1、創建應用的實體類AppInfo，屬性有應用的名稱、包名、圖標、第一次安裝時間和版本名稱 public class AppInfo { private String name ;//應用名稱 private String packageName ;//應用包名 ...
  • 安卓開發筆記（十二）：SQLite資料庫儲存（上）
    SQLite資料庫存儲 創建資料庫 Android專門提供了一個 SQLiteOpenHelper幫助類對資料庫進行創建和升級 SQLiteOpenHelper需要創建一個自己的幫助類去繼承它並且重寫它的兩個抽象方法，即 onCreate() 和 onUpgrade() SQLiteOpenHelp ...
  • iOS app 支持HTTPS iOS開發者相關
    2016年12月21日更新開發者中心鏈接https://developer.apple.com/news/?id=12212016b該鏈接是蘋果昨天剛在官網給的正式回覆 如下： App Transport Security (ATS), introduced in iOS 9 and OS X v1 ...
  • iOS學習——圖片壓縮到指定大小以內
    一、圖片壓縮簡述 在我們開發過程中，有可能會遇到拍照、或者從相冊中選擇圖片，要麼單選或者多選，然後上傳圖片到伺服器，一般情況下一張圖片可能3-4M，如果類似微信朋友圈上傳9張圖片大約是 35M左右，如果我們上傳 35M左右的圖片到伺服器，可想而知後臺的壓力有多大，最主要的還是特別耗時，如果是在網速比 ...
  • Android Studio 受不了了
    今天遇到一個問題，受不了了，來吐槽一下： Android Studio 裡面創建兩個工程：app, baselib。一個是App 一個是庫。編譯不過去。 targetSdkVersion 26 implementation 'com.android.support:appcompat-v7:26.0 ...
  • Android底部導航欄(可滑動)----TabLayout+viewPager
    【TabLayout】 ①TabLayout是選項卡，在屏幕空間有限的情況下，對不同的空間進行分組。屬於android support design，更多的用於新聞上，如果放在底部也可做底部導航欄 ②TabLayout的選項卡模式有兩種：fixed；scrollable; 🌂設置Tab頁的自定義V ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類