2. 程式人生 > >【Vue.js學習筆記】8：建立多個Vue例項物件,認識Vue中的元件

【Vue.js學習筆記】8：建立多個Vue例項物件,認識Vue中的元件

阿新 • • 發佈：2018-12-26

建立多個Vue例項物件

這裡在同一個js檔案中建立了兩個Vue例項物件，它們各自能完成前面學的那些功能，同時使用物件名稱也可以互相訪問，協同實現一些功能。

index.html

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue.js</title>
    <!--<link rel="stylesheet" href="style3.css">-->
 

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--這次建立2個根容器-->
<div id="vue-app1">
    <h3>{{title}}</h3>
    <p>{{greet}}</p>
</div>
<div id="vue-app2">
    <h3>{{title}}</h3>
    <
 
p>{{greet}}</p>
    <button v-on:click="changeTitle1()">改變app1的title</button>
</div>
<script src="app10.js"></script>
</body>
</html>

app10.js

注意這裡const只是保證其修飾的為常量不被改變，也就是v1和v2的指向，但是它們內部的屬性還是可以改變的。

//注意var/let/const的區別,在這裡用哪個都可以的時候儘量選擇後兩個,它們約束了變數提升
// 例項化vue物件1
 

const v1 = new Vue({
    el: "#vue-app1",
    data: {
        title: "app1的內容",
    },
    methods: {},
    computed: {
        greet: function () {
            return "Hello App1";
        }
    }
});

// 例項化vue物件2
const v2 = new Vue({
    el: "#vue-app2",
    data: {
        title: "app2的內容",
    },
    methods: {
        changeTitle1: function () {
            v1.title = "app1的title改變了";
        }
    },
    computed: {
        greet: function () {
            return "Hello App2";
        }
    }
});

v2.title = "app2的titile在js檔案匯入時就被改變了";

執行結果

在這裡插入圖片描述

認識Vue中的元件

Vue例項物件中的data、methods、computed都可以在元件中實現：

Vue.component("元件名", 物件);

而不必寫在Vue例項物件中。

注意下面例子裡的元件的模板裡將雙引號換成反引號是使用ES6的語法，這樣就可以換行寫了。

index.html

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue.js</title>
    <!--<link rel="stylesheet" href="style3.css">-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--這次建立2個根容器-->
<div id="vue-app1">
    <greeting></greeting>
</div>
<div id="vue-app2">
    <greeting></greeting>
</div>
<script src="app10.js"></script>
</body>
</html>

app10.js

注意第13行和第26行註解掉的程式碼，如果將它們開啟，也就是在data所對應的function中返回的是一個共享的物件，那麼點選改名時所改的這個data物件是共享的，所以點選改名按鈕，兩個Vue容器下的name都會改變。而在目前這種情況下，點選改名只會改變那個Vue容器下的name。

// 定義了一個Vue元件,將元件名當成一個標籤使用
// 這樣HTML上不必有太多的結構,而且內容可以動態地來自這個元件中
Vue.component("greeting", {
    //元件模板,當使用元件時是顯示這個基礎上的內容,注意要放在一個根標籤裡
    template: `
    <p>
        {{name}}:大家好,這是一個p標籤
        <button v-on:click="changeName()">改名</button>
    </p>
    `,
    //元件中的資料
    data: function () {
        // return dt;
        return {
            name: "lzh"
        };
    },
    //元件中的方法
    methods: {
        changeName: function () {
            this.name = "LZH";
        }
    }
});

// var dt={name:"lzh"};

// 例項化vue物件1
new Vue({
    el: "#vue-app1"
});

// 例項化vue物件2
new Vue({
    el: "#vue-app2"
});

執行結果

在這裡插入圖片描述

相關推薦

【Vue.js學習筆記】8：建立多個Vue例項物件,認識Vue中的元件

建立多個Vue例項物件 這裡在同一個js檔案中建立了兩個Vue例項物件，它們各自能完成前面學的那些功能，同時使用物件名稱也可以互相訪問，協同實現一些功能。 index.html <!DOCTYPE html> <html lang="en" xmlns:v-

【Vue.js學習筆記】9：使用npm搭建Vue-CLI腳手架並建立Vue專案

在第一篇的時候確實可以建立，這次跟著視訊搭建一次，比較一下和上次的區別，更正一下上次的錯誤操作，加深理解。 重新搭建Vue-CLI腳手架 在Node.js的安裝目錄下，刪除node_cache/和node_global下的所有內容，即讓Node處於剛剛安裝完成的狀態，連cnpm也

【Vue.js學習筆記】7：v-for渲染,Vue的小Demo

v-for渲染 v-for是Vue中常用的列表渲染方法， 可以將一個列表渲染為一系列的HTML元素，也可以用來遍歷物件內的k-v對。另外關於模板元素渲染在官方文件上見這裡。 index.html <!DOCTYPE html> <html lang="en"

【Vue.js學習筆記】6：動態繫結CSS樣式,條件渲染和v-show

動態繫結CSS樣式 這部分涉及官方文件中的Class與Style繫結。 index.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:

【Vue.js學習筆記】5：雙向資料繫結,計算屬性

雙向資料繫結 雙向資料繫結往往會用到input、select、textarea等表單標籤上，因為總是涉及一個數據資料的地方和輸出資料的地方。 當資料發生變化的時候，檢視也就發生變化，當檢視發生變化的時候，資料也會跟著同步變化。 資料雙向繫結，一定是對於UI控制元件來說的，

【Vue.js學習筆記】4：事件修飾符,鍵盤事件,鍵值修飾符

事件修飾符 在Vue的官方文件中給出了引入v-on:的事件修飾符的理念是，不希望在方法中去處理DOM細節。 事件冒泡 事件在事件源上發生，處理事件的方法並未繫結在該事件源上，事件就要向外或者向內傳播（propagation），也稱事件冒泡。在JS裡，可以用事件物件的stopP

【Vue.js學習筆記】3：資料繫結,事件繫結

資料繫結 使用Vue時在Vue物件的el欄位中要指定一下根容器，這裡用id選擇器。這個例子同時學習了data和methods的基本用法。 資料繫結（data-binding）可以將Vue物件中的data的值繫結到HTML標籤中的某些位置，則修改時只需要修改物件中相應data的值即

【Vue.js學習筆記】11：元件中CSS的作用域

樣式表最終的生成位置 有兩個元件，一個是根元件App，一個是子元件Users。它們都有一個h2標籤，先只在根元件上寫CSS樣式。 App.vue <template> <div id="app"> <h2>父元件的h2標籤<

【SciKit-Learn學習筆記】8：k-均值演算法做文字聚類,聚類演算法效能評估

學習《scikit-learn機器學習》時的一些實踐。 原理見K-means和K-means++的演算法原理及sklearn庫中引數解釋、選擇。 sklearn中的KMeans from sklearn.datasets import make_blobs from m

【ML學習筆記】8：PAC可能近似正確

簡述 PAC的意思 Probably Approximate Correct直譯過來就是”可能近似正確”，這裡面用了兩個描述”正確”的詞，可能和近似。 “近似”是在取值上，只要和真實值的偏差小於一個足夠小的值就認為”近似正確”；”可能”是在概率上，即只

【SciKit-Learn學習筆記】5：核SVM分類和預測乳腺癌資料集

學習《scikit-learn機器學習》時的一些實踐。 常用引數 引數C SVM分類器svm.SVC()中的引數C即SVM所優化的目標函式 a

【SciKit-Learn學習筆記】7：PCA結合SVM做AT&T資料集人物影象分類

學習《scikit-learn機器學習》時的一些實踐。 原理見PCA及繪製降維與恢復示意圖。 sklearn的PCA sklearn中包裝的PCA也是不帶有歸一化和縮放等預處理操作的，可以用MinMaxScaler()實現並裝在Pipeline裡封裝起來。 from

【SciKit-Learn學習筆記】6：樸素貝葉斯做文件分類並繪製混淆矩陣

學習《scikit-learn機器學習》時的一些實踐。 條件獨立 樸素即指的是條件獨立假設，假設n個特徵之間不相關，則可據聯合概率的條件展開式： p

【SciKit-Learn學習筆記】4：決策樹擬合泰坦尼克號資料集並提交到Kaggle

學習《scikit-learn機器學習》時的一些實踐。 決策樹擬合泰坦尼克號資料集 這裡用繪製引數-score曲線的方式去直觀看出模型引數對模型得分的影響，作者使用了GridSearchCV來自動做k-fold交叉驗證，並且能在多組模型引數中找到最優的一組和最優值（用平均s

【SciKit-Learn學習筆記】3：線性迴歸測算波士頓房價,Logistic迴歸預測乳腺癌

學習《scikit-learn機器學習》時的一些實踐。 線性迴歸 這部分和第一篇筆記"繪製隨機波動樣本的學習曲線 "部分基本類似。線性迴歸裡可以加入多項式特徵，以對模型做增強。 線性迴歸增加多項式特徵,擬合sin函式 import numpy as np impor

【SciKit-Learn學習筆記】2：kNN分類/迴歸,在糖尿病資料集上的表現

學習《scikit-learn機器學習》時的一些實踐。 kNN分類 在三個點周圍生成聚類樣本，然後做的kNN分類。 這種把標準差取得好（不要太小），得到的就不一定是線性可分的資料了。比如圖上右側有個玫紅點和藍點交錯。 from sklearn.datasets.sa

【SciKit-Learn學習筆記】1：SVM預測digits資料集,繪製隨機波動樣本的學習曲線

學習《scikit-learn機器學習》時的一些實踐。 SVM預測digits資料集 sklearn裡的各種模型物件統一了介面，fit()做訓練，predit()做預測，用score()獲得對模型測試結果的打分。 這裡的打分不是acc，應該是決定係數。 檢視資料形式

【SQL Server學習筆記】5：使用INSERT語句插入資料

使用SQL語句的意義是，要開發的DBAS應用程式不能像人一樣通過SSMS工具來操作資料，SQL語句是應用程式和資料庫通訊的橋樑。而且相比手動圖形化操作，SQL語句更加方便和強大。 SQL(結構化查詢語言)的組成 ①DML(資料操作語言) 插入、刪除和修

【Lua學習筆記】2：變數,多變數賦值,table索引,各類迴圈

變數 Lua中變數分為全域性變數、區域性變數、table中的域。如果不用local顯式宣告，即使是在函式內部的變數，仍然是全域性變數。如： function myfun() a=1 --全域性變數 print("a="..a.."建立了!")

【Node.js學習筆記】-00 Node.js簡介

1.什麼是Node.js?Node.js不是JS應用，不是語言，也不是框架，只是JS的執行環境事件驅動，非阻塞I/O，簡單說就是每個函式都是非同步的，Node.js內部隱藏了非阻塞I/O的具體細節，使得我們可以輕鬆編寫高效能的WEB應用，所以它是輕量且高效的使用npm作為包管