vue組件化開發的方法

發布時間：2022-08-10 10:53:03 來源：億速云閱讀：146 作者：iii 欄目：開發技術

今天小編給大家分享一下vue組件化開發的方法的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

vue組件化開發的方法

一、函數式編程

1、函數式編程簡介

函數式編程是種編程方式，它將電腦運算視為函數的計算。函數編程語言最重要的基礎是λ演算（lambda calculus），而且λ演算的函數可以接受函數當作輸入（參數）和輸出（返回值）。

和指令式編程相比，函數式編程強調函數的計算比指令的執行重要。

和過程化編程相比，函數式編程里函數的計算可隨時調用。

filter函數自動過濾對象的所有元素，返回true才會存入指定對象；

Reduce函數對數組內部的所有元素進行匯總；

2、代碼實例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  {{totalPrice()}}
</div>
 
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好'
    },
    methods :{
      totalPrice(){
        const nums = [10,9,21,16,7]
        let total = nums.filter(x => x<10).map(x => x*2).reduce((pre,n)=>pre+n);
        console.log(total)
        return total
      }
    }
  })
</script>
</body>
</html>

二、v-model

vue中經常使用到<input>和<textarea>這類表單元素，vue對于這些元素的數據綁定和我們以前經常用的jQuery有些區別。vue使用v-model實現這些標簽數據的雙向綁定，它會根據控件類型自動選取正確的方法來更新元素。

1、v-model雙向綁定

<input type="text" v-model="message">

v-model動態雙向綁定實現原理，本質上包含兩個操作：

（1）v-bind綁定一個value屬性

（2）v-on指令給當前元素綁定input事件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- <input type="text" :value="message" v-on:input="valueChange"> 
  <input type="text" :value="message" @input="valueChange"> -->
  <input type="text" :value="message" @input="message = $event.target.value">
  {{message}}
</div>
 
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '哪吒'
    },
    methods: {
      valueChange(event){
        this.message = event.target.value;
      }
    }
  })
</script>
</body>
</html>

2、v-model和radio結合使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <label for="male">
    <!-- <input type="radio"id="male" name="sex" value="男"
           v-model="sex">男
    <input type="radio"id="female" name="sex" value="女"
           v-model="sex">女 -->
    <input type="radio"id="male" value="男" v-model="sex">男
    <input type="radio"id="female" value="女" v-model="sex">女
  </label>
  <h4>您選擇的是：{{sex}}</h4>
</div>
 
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      sex: '女'
    }
  })
</script>
</body>
</html>

vue組件化開發的方法

3、v-model和CheckBox單選框結合使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- checkbox單選框 -->
  <label for="license">
    <input type="checkbox"id="license" v-model="isAgree">同意協議
  </label>
  <h4>您選擇的是：{{isAgree}}</h4>
  <button :disabled="!isAgree">下一步</button>
</div>
 
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      isAgree: false
    }
  })
</script>
</body>
</html>

vue組件化開發的方法

4、v-model和CheckBox多選框結合使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- checkbox多選框 -->
  <input type="checkbox" value="比比東" v-model="girls">比比東
  <input type="checkbox" value="千仞雪" v-model="girls">千仞雪
  <input type="checkbox" value="美杜莎" v-model="girls">美杜莎
  <input type="checkbox" value="云韻" v-model="girls">云韻
  <input type="checkbox" value="雅妃" v-model="girls">雅妃
  <h4>您選擇的是：{{girls}}</h4>
</div>
 
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      girls: []
    }
  })
</script>
</body>
</html>

vue組件化開發的方法

5、v-model結合select使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- 選擇一個 -->
  <select name="abc" v-model="girl">
    <option value="云韻">云韻</option>
    <option value="比比東">比比東</option>
    <option value="雅妃">雅妃</option>
    <option value="千仞雪">千仞雪</option>
    <option value="美杜莎">美杜莎</option>
  </select>
  <h4>您的選擇是：{{girl}}</h4>
</div>
 
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      girl: '云韻'
    }
  })
</script>
</body>
</html>

vue組件化開發的方法

6、v-for值綁定

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <label v-for="item in beautyGirls" :for="item">
    <input type="checkbox" :value="item"
           :id="item" v-model="girls">{{item}}
  </label>
  <h4>您的選擇是：{{girls}}</h4>
</div>
 
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      girls: [],//多選框
      beautyGirls: ["云韻","比比東","雅妃","納蘭嫣然","美杜莎"]
    }
  })
</script>
</body>
</html>

vue組件化開發的方法

7、v-model修飾符的使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- lazy懶加載，失去焦點時觸發 -->
  <input type="text" v-model.lazy="message">
  <h3>{{message}}</h3>
 
  <!-- number:表示數字類型 -->
  <input type="number" v-model.number="age">
  <h3>{{age}} --> {{typeof age}}</h3>
 
  <!-- 去掉左右兩邊的控股 -->
  <input type="text" v-model.trim="name">
  <h3>{{name}}</h3>
</div>
 
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '哪吒',
      age: 0,
      name: '哪吒'
    }
  })
</script>
</body>
</html>

三、組件化開發

組件是Vue.js中重要思想

它提供了一種抽象, 我們可以開發出一個獨立可復用的小組件來構造我們的應用組件
可以擴展 HTML 元素，封裝可重用的代碼
組件系統讓我們可以用獨立可復用的小組件來構建大型應用，幾乎任意類型的應用的界面都可以抽象為一個組件樹

組件化思想應用

有了組件化的思想, 我們之后開發中就要充分的利用它
盡可能將頁面拆分成一個個小的, 可復用的組件
這樣讓我們代碼更方便組織和管理, 并且擴展性也強

1、全局組件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <my-cpn></my-cpn>
</div>
 
<script src="../js/vue.js"></script>
<script>
 
  //1.創建組件化構造器對象
  const cpnC = Vue.extend({
    template: `
      <div>
        <h3>我是標題</h3>
        <p>我是CSDN哪吒</p>
      </div>
      `
  })
 
  //2.注冊組件
  Vue.component('my-cpn',cpnC)
 
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好'
    }
  })
</script>
</body>
</html>

2、局部組件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
</div>
 
<script src="../js/vue.js"></script>
<script>
 
  //1.創建組件化構造器對象
  const cpnC = Vue.extend({
    template: `
      <div>
        <h3>我是標題</h3>
        <p>我是CSDN哪吒</p>
      </div>
      `
  })
 
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好'
    },
    components: {
      cpn: cpnC
    }
  })
</script>
</body>
</html>

vue組件化開發的方法

3、父子組件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn2></cpn2>
</div>
 
<script src="../js/vue.js"></script>
<script>
 
  //1.創建組件化構造器對象
  const cpnC1 = Vue.extend({
    template: `
      <div>
        <h3>我是標題1</h3>
        <p>我是CSDN哪吒</p>
      </div>
      `
  })
 
  const cpnC2 = Vue.extend({
    template: `
      <div>
        <h3>我是標題2</h3>
        <p>我是博客專家</p>
        <cpn1></cpn1>
      </div>
      `,
    components: {
      cpn1: cpnC1
    }
  })
 
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好'
    },
    components: {
      cpn2: cpnC2
    }
  })
</script>
</body>
</html>

vue組件化開發的方法

4、組件化語法糖寫法

vue為了簡化注冊組件的過程，提供了語法糖的寫法，主要是省去了調用Vue.extend()的步驟，直接使用一個對象替代。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <my-cpn></my-cpn>
</div>
 
<script src="../js/vue.js"></script>
<script>
  //注冊組件語法糖寫法
  Vue.component('my-cpn',{
    template: `
      <div>
        <h3>我是標題</h3>
        <p>我是CSDN哪吒</p>
      </div>
      `
  })
 
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好'
    }
  })
</script>
</body>
</html>

5、組件模板抽離寫法

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
 
<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>
 
<!--1.script標簽, 注意:類型必須是text/x-template-->
<!--<script type="text/x-template" id="cpn">-->
<!--<div>-->
<!--<h3>我是標題</h3>-->
<!--<p>我是CSDN哪吒</p>-->
<!--</div>-->
<!--</script>-->
 
<!--2.template標簽-->
<template id="cpn">
  <div>
    <h3>我是標題</h3>
    <p>我是CSDN哪吒</p>
  </div>
</template>
 
<script src="../js/vue.js"></script>
<script>
 
  // 1.注冊一個全局組件
  Vue.component('cpn', {
    template: '#cpn'
  })
 
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>
 
</body>
</html>

四、組件可以訪問Vue實例數據嗎？

1、簡介

實驗發現，組件不能訪問Vue實例數據，而且即便可以訪問，如果將所有的數據都放在Vue實例中，Vue實例就會變得非常臃腫。

Vue組件應該有自己保存數據的地方。

組件自己的數據存放在哪里？

組件對象也有一個data屬性（也有method等屬性）；
只是這個data屬性必須是一個函數；
而且這個函數返回一個對象，對象內部保存著數據；

2、代碼實例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
 
<div id="app">
  <cpn></cpn>
</div>
<template id="cpn">
  <div>
    <h3>{{title}}</h3>
    <p>我是熱門</p>
  </div>
</template>
 
<script src="../js/vue.js"></script>
<script>
 
  // 1.注冊一個全局組件
  Vue.component('cpn', {
    template: '#cpn',
    data() {
      return {
        title: '哪吒必勝'
      }
    }
  })
 
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      // title: '我是標題'
    }
  })
</script>
 
</body>
</html>

3、效果展示

vue組件化開發的方法

五、父子組件通信

1、父子組件通信簡介

在開發中，往往一些數據確實需要從上層傳遞到下層：

比如在一個頁面中，我們從服務器請求到了很多的數據。

其中一部分數據，并非是我們整個頁面的大組件來展示的，而是需要下面的子組件進行展示。

這個時候，并不會讓子組件再次發送一個網絡請求，而是直接讓大組件(父組件)將數據傳遞給小組件(子組件)。

如何進行父子組件間的通信呢？Vue官方提到：

通過props向子組件傳遞數據

通過事件向父組件發送消息

vue組件化開發的方法

在組件中，使用選項props來聲明需要從父級接收到的數據。

props的值有兩種方式：

方式一：字符串數組，數組中的字符串就是傳遞時的名稱。

方式二：對象，對象可以設置傳遞時的類型，也可以設置默認值等。

2、父傳子代碼實例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
 
<div id="app">
  <!--<cpn v-bind:cgirls="girls"></cpn>-->
  <!--<cpn cgirls="girls" cmessage="message"></cpn>-->
 
  <cpn :cmessage="message" :cgirls="girls"></cpn>
</div>
 
<template id="cpn">
  <div>
    <ul>
      <li v-for="item in cgirls">{{item}}</li>
    </ul>
    <h3>{{cmessage}}</h3>
  </div>
</template>
 
<script src="../js/vue.js"></script>
<script>
  // 父傳子: props
  const cpn = {
    template: '#cpn',
    // props: ['cgirls', 'cmessage'],
    props: {
      // 1.類型限制
      // cgirls: Array,
      // cmessage: String,
 
      // 2.提供一些默認值, 以及必傳值
      cmessage: {
        type: String,
        default: 'aaaaaaaa',
        required: true
      },
      // 類型是對象或者數組時, 默認值必須是一個函數
      cgirls: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {}
    },
    methods: {
 
    }
  }
 
  const app = new Vue({
    el: '#app',
    data: {
      message: 'CSDN哪吒',
      girls: ['云韻', '比比東', '雅妃']
    },
    components: {
      cpn
    }
  })
</script>
</body>
</html>

3、父傳子效果展示

vue組件化開發的方法

4、props中的駝峰標識

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
 
<div id="app">
  <cpn :c-info="info" :child-my-message="message" v-bind:class></cpn>
</div>
 
<template id="cpn">
  <div>
    <h3>{{cInfo}}</h3>
    <h3>{{childMyMessage}}</h3>
  </div>
</template>
 
<script src="../js/vue.js"></script>
<script>
  const cpn = {
    template: '#cpn',
    props: {
      cInfo: {
        type: Object,
        default() {
          return {}
        }
      },
      childMyMessage: {
        type: String,
        default: ''
      }
    }
  }
 
  const app = new Vue({
    el: '#app',
    data: {
      info: {
        name: '哪吒',
        age: 18,
        height: 1.88
      },
      message: 'csdn博客專家'
    },
    components: {
      cpn
    }
  })
</script>
 
</body>
</html>

效果展示

vue組件化開發的方法

5、子傳父（自定義事件方式）

自定義事件方式完成子傳父。

什么時候需要自定義事件呢？

當子組件需要向父組件傳遞數據時，就要用到自定義事件了。

我們之前學習的v-on不僅僅可以用于監聽DOM事件，也可以用于組件間的自定義事件。

自定義事件的流程：

在子組件中，通過$emit()來觸發事件。
在父組件中，通過v-on來監聽子組件事件。

6、子傳父代碼實例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
 
<!--父組件模板-->
<div id="app">
  <cpn @item-click="cpnClick"></cpn>
</div>
 
<!--子組件模板-->
<template id="cpn">
  <div>
    <button v-for="item in categories"
            @click="btnClick(item)">
      {{item.name}}
    </button>
  </div>
</template>
 
<script src="../js/vue.js"></script>
<script>
 
  // 1.子組件
  const cpn = {
    template: '#cpn',
    data() {
      return {
        categories: [
          {id: '1', name: '云韻'},
          {id: '2', name: '比比東'},
          {id: '3', name: '雅妃'},
          {id: '4', name: '納蘭嫣然'},
        ]
      }
    },
    methods: {
      btnClick(item) {
        // 發射事件: 自定義事件
        this.$emit('item-click', item)
      }
    }
  }
 
  // 2.父組件
  const app = new Vue({
    el: '#app',
    data: {
      message: 'csdn哪吒'
    },
    components: {
      cpn
    },
    methods: {
      cpnClick(item) {
        console.log('cpnClick', item);
      }
    }
  })
</script>
 
</body>
</html>

7、子傳父效果展示

vue組件化開發的方法

以上就是“vue組件化開發的方法”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。

向AI問一下細節

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

vue組件化開發的方法

一、函數式編程

1、函數式編程簡介

2、代碼實例

二、v-model

1、v-model雙向綁定

2、v-model和radio結合使用

3、v-model和CheckBox單選框結合使用

4、v-model和CheckBox多選框結合使用

5、v-model結合select使用

6、v-for值綁定

7、v-model修飾符的使用

三、組件化開發

1、全局組件

2、局部組件

3、父子組件

4、組件化語法糖寫法

5、組件模板抽離寫法

四、組件可以訪問Vue實例數據嗎？

1、簡介

2、代碼實例

3、效果展示

五、父子組件通信

1、父子組件通信簡介

2、父傳子代碼實例

3、父傳子效果展示

4、props中的駝峰標識

5、子傳父（自定義事件方式）

6、子傳父代碼實例

7、子傳父效果展示

猜你喜歡

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

vue組件化開發的方法

一、函數式編程

1、函數式編程簡介

2、代碼實例

二、v-model

1、v-model雙向綁定

2、v-model和radio結合使用

3、v-model和CheckBox單選框結合使用

4、v-model和CheckBox多選框結合使用

5、v-model結合select使用

6、v-for值綁定

7、v-model修飾符的使用

三、組件化開發

1、全局組件

2、局部組件

3、父子組件

4、組件化語法糖寫法

5、組件模板抽離寫法

四、組件可以訪問Vue實例數據嗎？

1、簡介

2、代碼實例

3、效果展示

五、父子組件通信

1、父子組件通信簡介

2、父傳子代碼實例

3、父傳子效果展示

4、props中的駝峰標識

5、子傳父（自定義事件方式）

6、子傳父代碼實例

7、子傳父效果展示

猜你喜歡

最新資訊

相關推薦

相關標簽