Vue之元件詳解

阿新 • • 發佈：2021-11-22

在這裡插入圖片描述

<body>
    <div id="root">
        <h2>{{name}}</h2>
        <hr>
        <school></school>
        <hr>
        <student></student>
        <hr>
        <!-- <h2>學生姓名：{{name}}</h2>
        <h2>學生年齡：{{age}}</h2> -->
    </div>
    <div id="root2">
        <hello></hello>
    </div>
    <script>
        .config.productionTip = false;
        //建立school元件
        //el:'#root'
        // 
元件定義時 一定不要寫el配置項，因為最終所有的元件都要被一個vm管理 由vm決定服務於哪個容器
        const school = zVXsAAKjVue.extend({
            temhttp://www.cppcns.complate: `
            <div>
                <h2>學校名稱：{{schoolName}}</h2>
                <h2>學校地址：{{address}}</h2>
               <button @click="showName">點我提示學校名稱</button>
                </div>
           `,data() {
                return {
   
                  schoolName: '二中',address: '北京',}
            },methods: {
                showName() {
                    alert(this.schoolName)
                }
            }
        })
        //第一步：建立元件
        //建立學生元件
        const student = Vue.extend({
            template: `
         <div>  
        <h2>學生姓名：{{name}}</h2http://www.cppcns.com 
>
        <h2>學生年齡：{{age}}</h2>
        </div>
           `,data() {
                return {
                    name: '小王',age: 20,}
            }
        })
        //建立vm
        new Vue({
            el: '#root',data: {
                name: '你好，世界！'
            },//第二步：註冊元件(區域性註冊)
            components: {
                school,student
            }
        })

        const hello = Vue.extend({
            template: `
            <div><h2>你好鴨！王同學</h2></div>
            `
        })
        Vue.component('hello',hello)
        new Vue({
            el: '#root2'
        })
    </script>
</body>

總結

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!

Vue之元件詳解

Vue之外掛詳解

總結本篇文章就到這裡了，希望能夠給你帶www.cppcns.com來幫助，www.cppcns.com也希望您能夠多多關uUAwta注我們www.cppcns.com的更多內容!

Vue之過濾器詳解

<body> <div id=\"root\"> <h2>顯示格式化後的時間</h2>

vue元件系列之TagsInput詳解

簡介 TagsInput 是一種可編輯的輸入框，通過回車或者分號來分割每個標籤，用回退鍵刪除上一個標籤。用 vue 來實現還是比較簡單的。

Vue之元件的自定義事件詳解

目錄總結 <template> <div > <h2>{{msg}}</h2>

Vue初始化中的選項合併之initInternalComponent詳解

今天給大家分享Vue初始化中的選項合併之initInternalComponent的相關知識，具體程式碼如下所示：

iOS開發之UIScrollView控制元件詳解

UIScrollView是一個非常重要的控制元件,其可以展示比裝置螢幕更大區域的內容,我們可以通過手指滑動來檢視內容檢視的每一部分內容,也可以通過手指捏合來對內容檢視進行縮放操作，我們每天開發中都不斷顯式或隱式地與U

07.vue-charp-07 元件詳解(二)

其它 $nextTick Vue一個重要的概念：非同步更新佇列。 Vue在觀察到資料變化時並不是直接更新DOM，而是開啟一個佇列，並緩衝在同一事件迴圈中發生的所有資料改變。在緩衝時會去除重複資料，從而避免不必要的計算和DOM

DRF框架之序列化器serializers元件詳解

序列化器-Serializer 作用： 1. 序列化,序列化器會把模型物件轉換成字典,經過response以後變成json字串

Flutter入門（30）：Flutter 元件之 defaultHeroTag 詳解

1. 基本介紹 CupertinoNavigationBar 是 Flutter 提供的 iOS 風格的 NavigationBar。 CupertinoNavigationBar.png

vue.js 動態元件詳解

:is 動態元件使用 v-bind:is=”元件名”，會自動去找匹配的元件名，如果沒有，則不顯示；

利用vue對比兩組資料差異的視覺化元件詳解

目錄需求：大概要點：根據剛才的要點可以建立一下元件的props：元件的基本樣式也很簡單：完事了，最後貼一下完整程式碼：使用示例：效果預覽：擴充套件功能TODO：總結如題，朋友有個這樣的需求，感覺挺常見，發出來給

vue components 動態元件詳解

目錄總結總結陣列發生變化時，動態載入相應資料場景：點選不同元件名稱，介面顯示相應元件

Tomcat原理系列之六:詳解socket如何封裝成request(上)

@TOC 看原始碼雖然不能馬上提升你的編碼水平。但能讓你更好的理解程式設計。

Tomcat原理系列之七:詳解socket如何封裝成request(下)

@TOC 推薦閱讀Tomcat原理系列之二：由點到線,請求主幹對於理解本文有很多幫助。

Java之BigDecimal詳解

一、BigDecimal概述 Java在java.math包中提供的API類BigDecimal，用來對超過16位有效位的數進行精確的運算。雙精度浮點型變數double可以處理16位有效數，但在實際應用中，可能需要對更大或者更小的數進行運算和處

SpringMVC的執行流程及元件詳解

這篇文章主要介紹了SpringMVC的執行流程及元件詳解,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

玩轉Redis搭建叢集之Sentinel詳解

前言 Redis作為記憶體資料庫，需要具備高可用的特點，不然如果伺服器宕機，還在記憶體裡的資料就會丟失。我們最常用的高可用方法就是搭建叢集，master機器掛了，可以讓slave機器頂上，繼續提供服務。但是Redis叢集是

Python資料儲存之 h5py詳解

1、Python資料儲存（壓縮）（1）numpy.save,numpy.savez,scipy.io.savemat numpy和scipy內建的資料儲存方式。

C++11 併發指南之Lock 詳解

在《 C++11 併發指南三(std::mutex 詳解) 》一文中我們主要介紹了 C++11 標準中的互斥量(Mutex)，並簡單介紹了一下兩種鎖型別。本節將詳細介紹一下 C++11 標準的鎖型別。

Vue之元件詳解

總結

相關推薦