国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue.js之組件系統(tǒng)

番茄西紅柿 / 2576人閱讀

vue.js既然是框架，那就不能只是簡單的完成數(shù)據(jù)模板引擎的任務，它還提供了頁面布局的功能。本文詳細介紹使用vue.js進行頁面布局的強大工具，vue.js組件系統(tǒng)。

Vue.js組件系統(tǒng)

每一個新技術(shù)的誕生，都是為了解決特定的問題。組件的出現(xiàn)就是為了解決頁面布局等等一系列問題。vue中的組件分為兩種，全局組件和局部組件。

組件的注冊

全局組件的注冊

通過Vue.component()創(chuàng)建一個全局組件之后，我們可以在一個通過 new Vue 創(chuàng)建的 Vue 根實例中，把這個組件作為自定義元素來使用。

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <script src="../statics/vue.min.js">script>
head>
<body>
  <div id="app">
    
    <global_component>global_component>
  div>
  <script>
    // 第一步，注冊
    Vue.component("global_component", {
      template: `
        <div>
            <h2>Hello Vue</h2>
        </div>
      `
    });

    new Vue({
      el: "#app",
    });
  script>
body>
html>

組件的參數(shù)

因為組件是可復用的 Vue 實例,所以它們與 new Vue 接收相同的選項，例如 data、computed、watch、methods 以及生命周期鉤子等。僅有的例外是像 el這樣根實例特有的選項。

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <script src="../statics/vue.min.js">script>
head>
<body>
  <div id="app">
    
    <global_component>global_component>
  div>
  <script>
    // 第一步，注冊
    Vue.component("global_component", {
      data: function () {
        return {
          count: 0
        }
      },
      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
    });

    new Vue({
      el: "#app",
    });
    
  script>
body>
html>

組件的復用

每個實例維護自己的一份獨立的數(shù)據(jù)。

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <script src="../statics/vue.min.js">script>
head>
<body>
  <div id="app">
    
    <global_component>global_component>
    <global_component>global_component>
    <global_component>global_component>
  div>
  <script>
    // 第一步，注冊
    Vue.component("global_component", {
      data: function () {
        return {
          count: 0
        }
      },
      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
    });

    new Vue({
      el: "#app",
    });
    
  script>
body>
html>

注意當點擊按鈕時，每個組件都會各自獨立維護它的 count。因為你每用一次組件，就會有一個它的新實例被創(chuàng)建。

Data必須是一個函數(shù)

data必須是一個函數(shù)，因此每個實例可以維護一份被返回對象的獨立的拷貝, 也可以寫成如下形式

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <script src="../statics/vue.min.js">script>
head>
<body>
  <div id="app">
    
    <global_component>global_component>
    <global_component>global_component>
    <global_component>global_component>
  div>
  <script>
    // 第一步，注冊
    Vue.component("global_component", {
      data(){
        return {
          count: 0
        }
      },
      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
    });

    new Vue({
      el: "#app",
    });

  script>
body>
html>

局部組件的注冊

全局注冊往往是不夠理想的。比如，如果你使用一個像 webpack 這樣的構(gòu)建系統(tǒng)，全局注冊所有的組件意味著即便你已經(jīng)不再使用一個組件了，它仍然會被包含在你最終的構(gòu)建結(jié)果中。這造成了用戶下載的 JavaScript 的無謂的增加。

全局組件始終是存在的，除非程序結(jié)束，如果組件越來越大，那么程序所占用的空間和消耗的性能就會更大。

所以我們需要局部組件。不用的時候，被垃圾回收。

局部組件的第一種使用方式

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <script src="../statics/vue.min.js">script>
head>
<body>
  <div id="component-demo">
    
    
    <my-header>my-header>
  div>
  <script>
    // 定義一個局部組件，其實就是一個變量，它是一個object類型
    // 屬性與全局組件是一樣的
    let Header = {
      template: `
        <button @click="count++">{{ count }}</button>
      `,
      data() {
        return {
          count: 0
        }
      }
    };

    new Vue({
      el: "#component-demo",
      // 第二部，需要在根實例當中使用它
      components: {
        my-header: Header
      }
    });
  script>
body>
html>

局部組件的第二種使用方式

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <script src="../statics/vue.min.js">script>
head>
<body>
  <div id="component-demo">
  div>
  <script>
    // 定義一個局部組件，其實就是一個變量，它是一個object類型
    // 屬性與全局組件是一樣的
    let Header = {
      template: `
        <button @click="count++">{{ count }}</button>
      `,
      data() {
        return {
          count: 0
        }
      }
    };

    new Vue({
      el: "#component-demo",
      // 第二種使用方式，不會將div渲染進DOM，以template為根元素
      template: `<my-header></my-header>`,
      // 第二步，需要在根實例當中使用它
      components: {
        my-header: Header
      }
    });
  script>
body>
html>

對于 components 對象中的每個屬性來說，其屬性名就是自定義元素的名字，其屬性值就是這個組件的選項對象。

在局部組件中使用子組件

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <script src="../statics/vue.min.js">script>
  <style>
    body {
      margin: 0;
    }
    .box {
      width: 100%;
      height: 50px;
      background-color: #2aabd2;
    }

  style>
head>
<body>
  <div id="component-demo">
  div>
  <script>
    // 定義一個局部組件，其實就是一個變量，它是一個object類型
    // 這個對象的屬性與全局組件是一樣的(除el屬性外)

    let Fcontent = {
      template: `
        <div>
          <span>這是頭條</span>

        </div>
      `
    };

    let Header = {
      template: `
        <div v-bind:class={box: isBox}>
          <button @click="count++">{{ count }}</button>
          <first-content></first-content>
        </div>
      `,
      data() {
        return {
          count: 0,
          isBox: true
        }
      },
      components: {
        first-content: Fcontent
      }
    };

    new Vue({
      el: "#component-demo",
      // 第二種使用方式，不會將div渲染進DOM，以template為根元素
      template: `<my-header></my-header>`,
      // 第二步，需要在根實例當中使用它
      components: {
        my-header: Header
      }
    });
  script>
body>
html>

注:

1.注意寫組件標簽

2.每個組件的template只識別一個作用域塊

通信

父子組件的通信

在父組件中給子組件綁定屬性,子組件通過props=["屬性名稱"]

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <script src="../statics/vue.min.js">script>
  <style>
    body {
      margin: 0;
    }
    .box {
      width: 100%;
      height: 50px;
      background-color: #2aabd2;
    }

  style>
head>
<body>
  <div id="component-demo">
  div>
  <script>
    // 定義一個局部組件，其實就是一個變量，它是一個object類型
    // 屬性與全局組件是一樣的

    let Fcontent = {
      template: `
        <div>
          <span>這是頭條</span>
          {{ fdata }}
        </div>
      `,
      props: [fdata]
    };

    let Header = {
      template: `
        <div v-bind:class={box: isBox}>
          <button @click="count++">{{ count }}</button>
          <first-content :fdata="fathData"></first-content>
        </div>
      `,
      data() {
        return {
          count: 0,
          isBox: true,
          fathData: "我是你爸爸~~~"
        }
      },
      components: {
        first-content: Fcontent
      }
    };

    new Vue({
      el: "#component-demo",
      // 第二種使用方式，不會將div渲染進DOM，以template為根元素
      template: `<my-header></my-header>`,
      // 第二步，需要在根實例當中使用它
      components: {
        my-header: Header
      }
    });
  script>
body>
html>

子父組件的通信

父組件在mounted的時候，監(jiān)聽一個自定義事件。

給子組件綁定一個click事件之后，通過內(nèi)建的方法$emit在父組件上觸發(fā)一個事件，這個時間就是父組件監(jiān)聽的自定義事件。

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <script src="../statics/vue.min.js">script>
  <style>
    body {
      margin: 0;
    }
    .box {
      width: 100%;
      height: 50px;
      background-color: #2aabd2;
    }

  style>
head>
<body>
  <div id="component-demo">
  div>
  <script>
    // 定義一個局部組件，其實就是一個變量，它是一個object類型
    // 屬性與全局組件是一樣的

    let Fcontent = {
      template: `
        <div>
          <button v-on:click="myClick">放大父組件字體</button>
        </div>
      `,
      methods: {
        myClick: function () {
          console.log(this);
          this.$emit(change-font

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/1541.html

相關(guān)文章

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...

    sutaking 評論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...

    khs1994 評論0 收藏0

  • Vue 2.x 實戰(zhàn)之后臺管理系統(tǒng)開發(fā)（二）

    摘要：導語承接上文實戰(zhàn)之后臺管理系統(tǒng)開發(fā)一在上一篇文章中，我詳細敘述了如何創(chuàng)建項目框架和引入各種后臺常用插件，做好這些準備工作后，我們就可以著手進行頁面的開發(fā)了。如果傳入的數(shù)據(jù)不符合規(guī)格，會發(fā)出警告。 1. 導語 承接上文：Vue 2.x 實戰(zhàn)之后臺管理系統(tǒng)開發(fā)（一） 在上一篇文章中，我詳細敘述了如何創(chuàng)建項目框架和引入各種后臺常用插件，做好這些準備工作后，我們就可以著手進行頁面的開發(fā)了。在開...

    Ilikewhite 評論0 收藏0

  • 利用K8S技術(shù)棧打造個人私有云（連載之：私有云客戶端打造）

    摘要：前端技術(shù)棧還是非常龐大的，為了能夠借助已經(jīng)存在的輪子來造出一輛車，所以我選擇了進行實踐。狀態(tài)的管理的狀態(tài)管理依靠完成，用其來管理的所有組件狀態(tài)。私有云客戶端打造主頁面首先是主頁面，可以打開任何一個云主機系統(tǒng)的頁面看，基本類似。 showImg(https://segmentfault.com/img/remote/1460000013930354); 【利用K8S技術(shù)棧打造個人私有...

    Jingbin_ 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<