VUE學習之路（二）全域性API 之Vue.extend

阿新 • • 發佈：2019-01-30

一。Vue.extend定義

Vue.extend返回的是一個“拓展例項構造器”，也就是預設了部分選項的Vue例項構造器。經常服務於Vue.component用來生成元件，可以簡單理解為當在模板中遇到該元件名稱作為標籤的自定義元素時，會自動呼叫“拓展例項構造器”來生產元件例項，並掛載到自定義元素上。

<!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.extend 擴充套件例項構造器</title>
    <script type="text/javascript" src="https://unpkg.com/ 
[email protected]/dist/vue.js" ></script>
</head>
<body>
    <h1>vue.extend 擴充套件例項構造器</h1>
    <hr>
    <author></author>

    <!-- 一般不推薦使用擴充套件例項構造器，推薦使用下面的div方式。別忘記還得修改js -->
    <div id="author"></div>

    <script>
        var authorURL = Vue.extend({
            template : "<p><a :href='authorURL'>{{ authorName }}</a></p>",
            data : function(){
                return{
                    authorName : 'JSPang',
                    authorURL : "http://baidu.com"
                }
            }
        });
        //所有的擴充套件器都需要一個另外的操作：繫結/載入。操作如下：
        new authorURL().$mount("author");
        //Vue 的$mount()為手動掛載，在專案中可用於延時掛載（例如在掛載之前要進行一些其他操作、判斷等），之後要手動掛載上。new Vue時，el和$mount並沒有本質上的不同。
        //當Vue例項沒有el屬性時，則該例項尚沒有掛載到某個dom中；假如需要延遲掛載，可以在之後手動呼叫vm.$mount()方法來掛載。
        
        //這種擴充套件常用於：寫一個全域性擴充套件

        //使用diiv需要把JS進行如下修改
        new authorURL().$mount("author");
    </script>
</body>
</html>

PS::如果在程式設計中真的需要使用擴充套件的方式，不建議用上述程式碼的形式，建議使用id的形式。

VUE學習之路（二）全域性API 之Vue.extend

一。Vue.extend定義 Vue.extend返回的是一個“拓展例項構造器”，也就是預設了部分選項的Vue例項構造器。經常服務於Vue.component用來生成元件，可以簡單理解為當在模板中遇到該元件名稱作為標籤的自定義元素時，會自動呼叫“拓展例項構造器”來生產元件例

後端開發者的Vue學習之路（二）

right alt method 標簽 .com arr rac tde iyu 目錄上篇內容回顧：數據綁定表單輸入框綁定單行文本輸入框多行文本輸入框復選框checkbox 單選框radio 選擇框select 數據綁定的修飾符 .lazy .number

vue學習之路（二）--vue-awesome-swiper

<template> <swiper :options="swiperOption"> //vue元件標籤 <swiper-slide><img src="./0.jpg"width="100%"> </swiper-slide>

Java學習之路（二）流程控制語句

循環 cas 學習之路將不乘法表 length 跳出循環 spa int if、if…else…語句 if (true) { System.out.println("為真時執行");

python學習之路（二） -- 函數、JSON、終端樣式

blog ade def 數量通過等於 name tuple args 函數函數構成定義函數:使用def即可 def __getName(idCard): return user_info[idCard].Name 其中，__get

Python 學習之路（二）

在外封裝過程數列 == 3.6 開頭 res form Python 學習之路（二）以下所用的是Python 3.6 一、條件語句簡單判斷 1 if 判斷條件： 2 執行語句…… 3 else： 4 執行語句…… 復雜判斷 1 if 判斷

Hadoop學習之路（二）Hadoop發展背景

chukwa 站點 avro azkaban das 可擴展性對數就是 pro Hadoop產生的背景 1. HADOOP最早起源於Nutch。Nutch的設計目標是構建一個大型的全網搜索引擎，包括網頁抓取、索引、查詢等功能，但隨著抓取網頁數量的增加，遇到了嚴重的可擴

C++再學習之路（二）

iter pointer lin clas 數組元素對數表達自增條件操作符 1. 移位操作符“ << ”和“ >> ”擁有中等優先級：其優先級比算術操作符低，但比關系操作符、賦值操作符和條件操作符優先級高 2. *iter++ 　　後自增操作

HBase學習之路（二）HBase集群安裝

star java_home 服務 blog usr mirrors logs 技術 ron 前提 1、HBase 依賴於 HDFS 做底層的數據存儲 2、HBase 依賴於 MapReduce 做數據計算 3、HBase 依賴於 ZooKeeper 做服務協調 4

Hive學習之路（二）Hive安裝

different 0.10 director lar blog cut cti mysql extend Hive的下載下載地址http://mirrors.hust.edu.cn/apache/ 選擇合適的Hive版本進行下載，進到stable-2文件夾可以看到穩

Spark學習之路（二）Spark2.3 HA集群的分布式安裝

serve html 元數據不安裝 rec ive cut 再次 apps 一、下載Spark安裝包 1、從官網下載 http://spark.apache.org/downloads.html 2、從微軟的鏡像站下載 http://mirrors.hust.

Vue 爬坑之路（二）—— 組件之間的數據傳遞

組件圖片 NPU tar bubuko 9.png com clas entry Vue 的組件作用域都是孤立的，不允許在子組件的模板內直接引用父組件的數據。必須使用特定的方法才能實現組件之間的數據傳遞。首先用 vue-cli 創建一個項目，其中 App.vue 是父組

學習之路（二）淺談：bash及其特性，命令歷史以及用戶管理及權限，shell的類型

bash 管理權限過了一周了，進度似乎有點懈怠，不過過了周末重整旗鼓啦shell（外殼）GUI：Gnome，KDE，xfceCLI：sh，csh，ksh，bashbash（父進程）-----bash（子進程）他們相互獨立彼此不知命令歷史：historybash支持的引號：‘ ’命令替換（鍵盤~的按鍵

小強的Hadoop學習之路（二）

com TE 區別截斷用戶分開路徑問題登陸用戶學習接著第一遍。中間間隔了大約半年的時間了，話不多說，直接進入主題。這篇是主要是應用篇。目前的環境是4臺機器，環境 centos 7.2 CDH5.10.2 網上很多安裝教程，這邊就不說明了。 Hive+

XML學習之路（二）

req 方式 test 無符號規範內容了解實體文本 DTD 一、什麽是DTD? DTD即Document Type Definition，文檔類型定義。我們知道，XML的標簽可以自定義，不受任何約束。但有時侯，為了符合邏輯和業務需要，我們需要對XML文檔加以約束

Linux 學習之路（二）:使用者及許可權詳解

作業： 1.ls 命令是否可以顯示某目錄的整體大小，即包括其內部的所有檔案的整體大小？可以，使用ls -s xxx 2.通過幫助手冊，學習使用du命令： # du 估計檔案空間使用量 -s 分割資料夾，不包括子目錄大小 -h 以可讀格式展示

Tecnomatix Plant Simulation 14 學習之路（二）

本篇部落格主要介紹基礎遺傳演算法的實現，例子參考部落格一推薦的周金平老師教材第三章，這裡做簡單介紹問題描述：將n個裝置(M1,…Mn)放置到n個位置(A,B…)上，其中每個位置上能且僅能放置一臺裝置，已知n個裝置兩兩之間的物料搬運量大小W(i, j)，以及

Kafka學習之路（二）Kafka的架構

most 工具路由冪等用戶 toc 目標支持 mem 一、Kafka的集群架構如上圖所示，一個典型的Kafka集群中包含若幹Producer（可以是web前端產生的Page View，或者是服務器日誌，系統CPU、Memory等），若幹broker（Kafka支持

Flume學習之路（二）Flume的Source類型

bash 官方 tip size pipes lte using exc 正常一、概述官方文檔介紹：http://flume.apache.org/FlumeUserGuide.html#flume-sources 二、Flume Sources 描述 2.1　Avro

Weex學習之路（二）除錯篇

寫在前面：作為前端開發工作者，一款好的除錯工具必不可缺。你可能已經習慣了chorme提供的簡單好用的網頁除錯工具，但在weex中，除錯是一個巨坑！！ Weex除錯踩坑之旅在weex中，除錯是一件非常麻煩但事，好在weex官方文件中提供了一些方案 1. weex-toolkit命

VUE學習之路（二）全域性API 之Vue.extend

相關推薦