跟著文檔學Vue（三）——組件基礎

阿新 • • 發佈：2018-05-22

ont err -s fontsize itl IE alert -i -a

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue基礎4(組件)</title>
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
  <script src="vue.js"></script>
</head>
<style>
</style>
<body>
  <div id="app">
    <h2>1.因為組件是可復用的 Vue 實例，所以它們與 new 
 Vue 接收相同的選項，例如 data、computed、watch、methods 以及生命周期鉤子等。僅有的例外是像 el 這樣根實例特有的選項。</h2>
    <button-counter></button-counter>
    <article-title v-for=‘item in titles‘ :key=‘item.id‘ :title="item.title"></article-title>
    <h2>通過事件向父級組件發送消息</h2>
    <div :style="{ fontSize: postFontSize + ‘em‘ }">
      <speak-parent v-for 
=‘item in titles‘ :key=‘item.id‘ :title="item.title"  v-on:enlarge-text="postFontSize += 0.1"></speak-parent>      
    </div>
    <h2>組件中使用v-model</h2>
    <custom-input v-model="searchText"></custom-input>
    <div>{{searchText}}</div>
    <h2>插槽</h2>
    <alert-box>
      Something bad happened.
     
</alert-box>
  </div>
  
  <script>
    // 定義一個名為 button-counter 的新組件
    // 一個組件本質上是一個擁有預定義選項的一個 Vue 實例【註：組件要定義在創建實例Vue之前】，props完成父子組件間的通信
    // 所有的 Vue 組件都是 Vue 實例，並且接受相同的選項對象(data,computed,watch,methods,生命周期等)
    // 組件註冊會有全局註冊和局部註冊（②）
    Vue.component(‘button-counter‘, {
      // data必須是一個函數，這樣每個實例可以維護一份被返回對象的獨立的拷貝（① what??????）
      data: function () {
        return {
          count: 0
        }
      },
      //不好意思報錯了
      // data: {
      //   count: 0
      // },
      // 模板中必須只有一個根元素
      template: ‘<button v-on:click="count++">You clicked me {{ count }} times.</button>‘
    });
    Vue.component(‘article-title‘, {
      props: [‘title‘],
      template: ‘<h2>{{title}}</h2>‘
    });
    // 通過事件向父級組件發送消息
    Vue.component(‘speak-parent‘, {
      props: [‘title‘],
      // 調用內建的 $emit 方法並傳入事件的名字，來向父級組件觸發一個事件
      template: `
        <div>
          <div>{{title}}</div>
          <button v-on:click="$emit(‘enlarge-text‘)">改變字號</button>
        </div>
      `
    });
    Vue.component(‘custom-input‘, {
      props: [‘value‘],
      template: `
        <input
          v-bind:value="value"
          v-on:input="$emit(‘input‘, $event.target.value)"
        >
      `
    });
    // 插槽
    Vue.component(‘alert-box‘, {
      template: `
        <div class="demo-alert-box">
          <strong>Error!</strong>
          <slot></slot>
        </div>
      `
    });
    var app = new Vue({
      el: ‘#app‘,
      data: {
        titles: [
          {id: ‘1‘, title: ‘我是第一‘},
          {id: ‘2‘, title: ‘我是第二‘},
          {id: ‘3‘, title: ‘我是第三‘}
        ],
        postFontSize: 1,
        searchText: ‘‘
      }
    });
  </script>
</body>
</html>

跟著文檔學Vue（三）——組件基礎

ont err -s fontsize itl IE alert -i -a <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me

跟我一起學python（三），python基本資料型別和函式

三元運算：三元運算（三目運算），是對簡單的條件語句的縮寫。 # 書寫格式 result = 值1 if 條件 else 值2 # 如果條件成立，那麼將 “值1” 賦值給result變數，否則，將“值2”賦值給result變數 if a == 1:

跟我一起學python（一），python基礎

Python簡介 python的創始人為吉多·範羅蘇姆（Guido van Rossum）。1989年的聖誕節期間，吉多·範羅蘇姆為了在阿姆斯特丹打發時間，決心開發一個新的指令碼解釋程式，作為ABC語言的一種繼承。最新的TIOBE排行榜，Python趕

vue（7）—— 組件化開發 — webpack（1）

每次測試 span 附加 ack 耦合 common 必須新版引子在研究完前面的vue開發後，其實已經可以自己開發點東西了，靠前面的指令集，組件，還有vue-router，還有異步請求這些知識點，是完全可以開發出來的，完全可以達到時下前後端分離的效果。

跟我學彙編（三）暫存器和實體地址的形成

一、通用暫存器對於一個彙編程式設計師來說，CPU中主要部件是暫存器。暫存器是CPU中程式設計師可以用指令讀寫的部件。程式設計師通過改變各種暫存器的內容來實現對CPU的控制。不同的CPU，暫存器的個數、結構是不同的。8086CPU 有14個暫存器，每個暫存

一步一步學Vue（八）

nod png 路由配置 ring 圖片 sca -a 基本 routes 本篇完成如下場景： 1、系統包含首頁、客戶信息查詢、登錄三個模塊 2、默認進入系統首頁，如果要進行用戶查詢，則需要進行登錄授權 3、查詢用戶後點擊列表項，則進入詳情頁面基於上述場景需求描述

基於Html5 Plus + Vue + Mui 移動App開發（三）-文件操作（讀取、保存、更新數據）

mes das parse 移動分享 gif ont 包括 ole 　　實全資訊采用基於Html5 Plus + Vue + Mui 移動App。主要實現功能包括：實現搜索站點設置實現搜索關鍵字定義實現搜索資訊保存、刪除功能。主界面實現關鍵字搜

java基礎學python（三）--------列表，元組

列表：相當於java中的list用法下標用法與python中的字串相似也可以用-1等負數來表示也可以使用*重複用法可以使用in關鍵字用法也可以求長度：len(list) for迴圈可以遍歷表內元素列表的方法：賦值與java中相似，python中可以用切片的方式給

從零開始學演算法（三）插入排序

從零開始學演算法（三）插入排序插入排序演算法介紹演算法原理演算法簡單記憶說明演算法複雜度和穩定性程式碼實現插入排序程式碼是Javascript語言寫的（幾乎是虛擬碼）演算

計算機圖形學實驗（三）——中點畫圓演算法實現及其原始碼

1.中點畫圓演算法簡介：（以第一象限內靠近Y軸的1/8圓為例）由於圓的對稱性，只需要考慮的圓上的點。舉例：引入建構函式：。分別表示點在圓外，圓上，圓內。如圖3-8所示：.M是P1和P2中點。當F(M)<0時，說明M在圓內，進而得知P1離圓弧更近；否則P

小白學Python（三）------迴圈

一、while迴圈 <1> while迴圈的格式 while 條件: 條件滿足時，做的事情1 條件滿足時，做的事情2 條件滿足時，做的事情3 … demo： i = 0 while i < 5: print(“當前是第%d次執行迴圈” % (i + 1)) print(

萌框架vue（三）——系統指令v-model

1、系統指令v-model <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="w

大學生學程式設計（三）：選擇自學還是培訓？

什麼人適合自學程式設計？ 1.堅強的毅力，自學程式設計一個很大的特點自己監督自己，沒有外來的管控，自制力差的很難的很難堅持到最後，有多少人買了本書開始學習程式設計，學了沒有多久就把書扔的遠遠的，等下次再看見已經是幾個月或者半年之後的事情了，所以意志力不強的或者自制力差的不適合。

演算法快學筆記（三）：選擇排序的原理與實現

1. 原理介紹選擇排序是個簡單的排序，思路主要通過多次遍歷待排序的集合，每次彈出最大/小值並放入新的集合,直到原始集合為空。舉個例子：假設要對A=[1,2,5,9,3]按照升序的方式進行排序，步驟與結果如下從A中找出最大值，將其pop,並放入B中，執行後的結果如下:

一起學Netty（三）之 SimpleChannelInboundHandler

其實Netty的知識點還是很零碎的，比如這個SimpleChannelInboundHandler這個類，在《Netty in Action》該書中的原版的Hello world的demo的客戶端就是使用的SimpleChannelInboundHandler來作為處理

跟我一起學python（二），python基本資料型別

運算子 1、算數運算 2、比較運算 3、賦值運算 4、邏輯運算 5、成員運算基本資料型別 1、數字 int（整型）在32位機器上，整數的位數為32位，取值範圍為-2**31～2**31-1，即-2147483648

從零開始學Vue（一）—— Vue.js 入門

應該特性簡體經驗了解 lte 工程目錄節點 times 概述 vue.js作為現在筆記熱門的JS框架，使用比較簡單易上手，也成為很多公司首選的JS框架。但是對於初學者可能學起來有些麻煩，所以推出《從零開始學Vue》系列博客，本系列計劃推出19篇博客文章，這是最簡

簡學LINGO（三）——例項篇

1. 裝配線平衡模型一個裝配線含有一系列的工作站，在最終產品的加工過程中每個工作站執行一種或者是幾種特定的任務。裝配線週期是指所有工作站完成分配給他們各自任務所花費時間的最大值。平衡裝配線的目標是為每個工作站分配加工任務，儘可能使每個工作站執行相同數量的任務，其最終標準是

跟我一起學python（八），網路程式設計（基礎篇）

Socket socket通常也稱作”套接字”，用於描述IP地址和埠，是一個通訊鏈的控制代碼，應用程式通常通過”套接字”向網路發出請求或者應答網路請求。 socket起源於Unix，而Unix/Linux基本哲學之一就是“一切皆檔案”，對於檔案用【開啟】【讀

教自己學Python（三）練手小遊戲:不要猜中

不要猜中的小遊戲背景和朋友閒待著兩個人無聊，都想吃蘋果又都不想洗，想起玩過的一個酒桌上猜數字的遊戲，然後在手機上寫了出來，三局兩勝輸了去洗蘋果…… 遊戲介紹零到99(包括邊界)，隨機一個數兩人(N人也可以)輪流猜測，如果沒猜中，新的數將做為邊界

跟著文檔學Vue（三）——組件基礎

相關推薦