Vue.js中組件使用詳解-js教程-PHP中文網

首頁

web前端

js教程

Vue.js中組件使用詳解

php中世界最好的语言

Apr 13, 2018 am 09:27 AM

javascript vue.js 詳解

這次帶給大家Vue.js中元件使用詳解，Vue.js中元件所使用的注意事項有哪些，以下就是實戰案例，一起來看一下。

# 介紹

在使用Vue.js時，Vue.js元件非常重要。在本教程中，我們將深入研究Vue.js元件，理解基礎知識並將其應用於應用程式。讓我們開始吧。

# 什麼是元件？

組件使我們能夠將複雜的應用程式分解成小塊。例如，典型的Web應用程式將具有標題，側邊欄，內容和頁腳等部分。

Vue.js允許我們將每個部分分解成單獨的模組化程式碼，稱為元件。這些元件可以擴展，然後附加到你正在處理的應用程式。使用元件是在整個應用程式編寫中重複使用程式碼的好方法。

假設你有一個博客應用程序，並且你想要顯示一列博客帖子。使用Vue元件，你可以做：

<blog-post></blog-post>

登入後複製

Vue處理剩下的事情。

建立一個將Vue實例掛載到DOM元素的簡單HTML頁面。你將使用它來了解組件。以下是HTML頁面範例：

<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
 <!-- p where Vue instance will be mounted -->
 <p id="app"></p>
 
 <!-- Vue.js is included in your page via CDN -->
 <script src="https://unpkg.com/vue"></script>
 <script>
  // A new Vue instance is created and mounted to your p element
  new Vue({
   el: '#app',
   data: {
   domain: 'Tutsplus'
   },
   template: '<p>Welcome to {{ domain }}</p>
  });
 </script>
</body>
</html>

登入後複製

在上面，你建立了一個簡單的Vue實例，在程式碼中沒有元件因素。現在，如果你希望歡迎訊息出現兩次，那你怎麼做？

你的猜測可能是讓 p 在 Vue實例掛載的地方出現兩次。這是行不通的。試著改變它從 id 到 class ，你會得到：

<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
 <!-- p where Vue instance will be mounted -->
 <p class="app"></p>
 <p class="app"></p>
 
 <!-- Vue.js is included in your page via CDN -->
 <script src="https://unpkg.com/vue"></script>
 <script>
  // A new Vue instance is created and mounted to your p element
  new Vue({
   el: '.app',
   data: {
   domain: 'Tutsplus'
   },
   template: '<p>Welcome to {{ domain }}</p>
  });
 </script>
</body>
</html>

登入後複製

它仍然不會工作！

解決這個問題的唯一方法是建立一個元件。你如何創建一個組件？

元件是使用Vue.component（）建構子建立的。這個建構子有兩個參數：你的元件的名字（也可以叫做標籤名）和一個包含元件選項（options）的物件。

讓我們使用上面的內容來建立一個元件。

Vue.component('welcome-message', {
  data: function() {
  return {
   domain: 'Tutsplus'
  }
  },
  template: '<p>Welcome to {{ domain }}</p>'
 })

登入後複製

在上面，組件名稱被稱為welcome-message。你的組件可以有你選擇的任何名稱。然而重要的是，這個名字不會影響任何HTML標籤，因為你不想重寫它。

傳遞給建構函數的options物件包含資料和模板。在創建組件時，你的數據應該是一個函數，如上所見。被保存的資料應該作為一個物件返回。

在沒有資料可以傳遞的情況下，傳遞如下的模板：

 Vue.component('welcome-message', {
  template: '<p>Welcome to Tutsplus</p>'
 })

登入後複製

# 完成之後，可以透過使用傳遞給建構函數的名稱將其視為常規HTML元素來在應用程式中使用元件。它被這樣呼叫：<welcome-message> </ welcome-message>。

要多次輸出模板，可以根據需要多次呼叫元件，如下所示。




VueJs Components


 
 
 
 
 
 
 
 
 
 
 <script>
 Vue.component('welcome-message', {
  data: function() {
  return {
   domain: 'Tutsplus'
  }
  },
  template: '&lt;p&gt;Welcome to {{ domain }}&lt;/p&gt;'
 })
 
 // A new Vue instance is created and mounted to your p element
 new Vue({
  el: '#app'
 });
 </script>

登入後複製

這樣一來，歡迎消息將顯示四次。

將資料儲存在元件中

上面我提到資料必須是一個函數，它所包含的資訊必須作為一個物件傳回。為什麼這樣？

當傳回的資料不是物件時，使用該資料的元件共用相同的來源：共用資料。因此，一個組件的資料變化會影響另一個組件。當資料作為物件返回時，這是不一樣的。

看看這是如何實際工作是很重要的。首先，讓我們看看資料作為物件傳回的情況。

<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
 <!-- p where Vue instance will be mounted -->
 <p id="app">
 <welcome-message></welcome-message>
 <welcome-message></welcome-message>
 </p>
 
 <!-- Vue.js is included in your page via CDN -->
 <script src="https://unpkg.com/vue"></script>
 <script>
 var data = { name: 'Henry' }
 
 Vue.component('welcome-message', {
  data: function() {
  return data
  },
  template: '<p>Hello {{ name }}, welcome to TutsPlus (<button @click="changeName">Change Name</button>)</p>',
  methods :{
   changeName: function() {
   this.name = 'Mark'
   }
  }
 })
 
 // A new Vue instance is created and mounted to your p element
 new Vue({
  el: '#app'
 });
 </script>
</body>
</html>

登入後複製

你能猜到上面發生了什麼事嗎？

有兩個元件，這兩個元件共享相同的資料來源，因為資料不會作為物件傳回。你怎麼證明我是對的？當從瀏覽器查看上述頁面時，你將看到一個元件的變更會導致另一個元件的資料變更。那麼它應該是怎麼樣的呢？

像這樣：

<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
 <!-- p where Vue instance will be mounted -->
 <p id="app">
 <welcome-message></welcome-message>
 <welcome-message></welcome-message>
 </p>
 
 <!-- Vue.js is included in your page via CDN -->
 <script src="https://unpkg.com/vue"></script>
 <script>
 
 Vue.component('welcome-message', {
  data: function() {
  return {
   name: 'Henry'
  }
  },
  template: '<p>Hello {{ name }}, welcome to TutsPlus (<button @click="changeName">Change Name</button>)</p>',
  methods :{
   changeName: function() {
   this.name = 'Mark'
   }
  }
 })
 
 // A new Vue instance is created and mounted to your p element
 new Vue({
  el: '#app'
 });
 </script>
</body>
</html>

登入後複製

這裡的資料是作為一個物件傳回的，一個元件的改變不會影響另一個元件。該功能是針對單一元件執行的。在建立應用程式時，不要忘記這一點，這很重要。

建立和使用元件

使用到目前为止学到的内容，让我们使用 vue -cli 从头开始一个新的Vue.js项目来实现它。如果你的机器上没有安装 vue -cli ，你可以通过运行：

npm install -g vue-cli

登入後複製

开始你的新的Vue.js项目：

vue init webpack vue-component-app

登入後複製

导航到你的应用程序，安装依赖关系，并使用下面的命令运行你的开发服务器。

cd vue-component-app
npm install
npm run dev

登入後複製

首先，你将重命名HelloWorld组件，这个组件是你将应用程序初始化为Hello.vue时创建的组件。然后你将注册这个组件作为一个全局组件在你的应用程序中使用。

所以你的Hello组件应该看起来像这样。

#src/components/Hello.vue
<template>
 <p class="hello">
 <p>Welcome to TutsPlus {{ name }}</p>
 <hr>
 <button @click="changeName">Change Display Name</button>
 </p>
</template>
<script>
export default {
 name: 'Hello',
 data () {
 return {
  name: 'Henry'
 }
 },
 methods: {
 changeName () {
  this.name = 'Mark'
 }
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>

登入後複製

你有欢迎文本显示欢迎消息和作为数据传递的名称。当点击欢迎消息下方的按钮时，将调用changeName方法。名字将从亨利改为马克。

要全局使用此组件，必须被注册。你能猜到应该在哪里完成这个操作吗？如果你说main.js，恭喜你，答对了！

要注册一个组件，可以导入它，然后使用Vue.component（）构造函数进行设置。自己动手试试。

我敢打赌，这个对你来说小菜一碟。以下是main.js文件中的内容。

#src/main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import Home from './components/Hello'
Vue.config.productionTip = false
Vue.component('display-name', Home)
/* eslint-disable no-new */
new Vue({
 el: '#app',
 template: '<App/>',
 components: { App }
})

登入後複製

这里除了导入你的Hello组件的那一行之外，没有什么新东西。然后使用构造函数注册该组件。最后，对于这部分，组件需要使用你输入的组件名称来显示。在这种情况下，组件是显示名称。这将在你的App.vue文件中完成。

打开src / App.vue并使其看起来像这样。

#src/App.vue
<template>
<p id= "app" >
<display-name/>
</p>
</template>
<script>
export default {
}
</script>
<style>
#app {
font-family: 'Avenir' , Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

登入後複製

打开服务器，打开http：// localhost：8080。点击按钮，名称应该改变。

我们来看看如何在本地使用一个组件。

在组件目录中创建一个名为Detail.vue的文件。这个组件不会做任何特殊的事情 - 它将被用在Hello组件中。

使你的Detail.vue文件就像这样。

#src/components/Detail.vue
<template>
 <p class="hello">
 <p>This component is imported locally.</p>
 </p>
</template>
<script>
export default {
 name: 'Detail'
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>

登入後複製

要在Hello组件中使用它，可以像导入Hello组件一样将其导入。接下来，把它注册，但这次你不需要使用Vue.component（）构造函数。

你可以使用导出内的组件对象进行注册。将用作元素标记的组件的名称必须作为值传递给对象。完成后，你现在可以使用元素标记来输出组件。

为了理解这一点，Hello组件应该长这样：

#src/components/Hello.vue
<template>
 <p class="hello">
 <p>Welcome to TutsPlus {{ name }}</p>
 <hr>
 <button @click="changeName">Change Display Name</button>
 <!-- Detail component is outputted using the name it was registered with -->
 <Detail/>
 </p>
</template>
<script>
// Importation of Detail component is done
import Detail from './Detail'
export default {
 name: 'HelloWorld',
 data () {
 return {
  name: 'Henry'
 }
 },
 methods: {
 changeName () {
  this.name = 'Mark'
 }
 },
 /**
 * Detail component gets registered locally.
 * This component can only be used inside the Hello component
 * The value passed is the name of the component
 */
 components: {
 Detail
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>

登入後複製

刷新页面以查看新页面。

范围组件样式

Vue.js允许你为组件提供全局和本地样式。是什么意思呢？在某些情况下，你希望组件中的某些元素与另一个组件中的对应元素的样式不同。Vue.js能够帮助你。

一个很好的例子是你刚刚建立的小应用程序。App.vue中的样式是全局的; 这怎么可能？打开你的App.vue，风格部分看起来像这样。

<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

登入後複製

这与Detail.vue不同，看起来像这样。

<style scoped>
h1, h2 {
 font-weight: normal;
}
 
ul {
 list-style-type: none;
 padding: 0;
}
 
li {
 display: inline-block;
 margin: 0 10px;
}
 
a {
 color: #42b983;
}
</style>

登入後複製

将 scoped 添加到样式标签是造成这个差别的原因。尝试通过删除 scoped 来编辑一种组件样式，你会看到这是如何运作的。

结论

虽然这个文章有点长，但是我相信你会喜欢它。

现在你知道如何有效地使用组件，并且了解如何在现有应用程序中构建组件。在使用vue-cli时，你还可以在本地和全局范围内创建和使用组件。当你想为一个组件使用特定的风格时，你已经看到了如何使用scoped来做到这一点。

你现在可以继续构建使用组件的复杂Vue.js应用程序。了解Vue.js允许你重用代码，你的页眉，页脚，登录面板和搜索栏可以用作组件。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7808

Java教學

1646

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1236

Related knowledge

Win11管理員權限取得詳解 Mar 08, 2024 pm 03:06 PM

Windows作業系統是全球最受歡迎的作業系統之一，其新版本Win11備受矚目。在Win11系統中，管理員權限的取得是一個重要的操作，管理員權限可以讓使用者對系統進行更多的操作和設定。本文將詳細介紹在Win11系統中如何取得管理員權限，以及如何有效地管理權限。在Win11系統中，管理員權限分為本機管理員和網域管理員兩種。本機管理員是指具有對本機電腦的完全管理權限

Oracle SQL中的除法運算詳解 Mar 10, 2024 am 09:51 AM

OracleSQL中的除法運算詳解在OracleSQL中，除法運算是一種常見且重要的數學運算運算，用來計算兩個數相除的結果。除法在資料庫查詢中經常用到，因此了解OracleSQL中的除法運算及其用法是資料庫開發人員必備的技能之一。本文將詳細討論OracleSQL中除法運算的相關知識，並提供具體的程式碼範例供讀者參考。一、OracleSQL中的除法運算

PHP模運算子的作用及用法詳解 Mar 19, 2024 pm 04:33 PM

PHP中的模運算子（%）是用來取得兩個數值相除的餘數的。在本文中，我們將詳細討論模運算子的作用及用法，並提供具體的程式碼範例來幫助讀者更好地理解。 1.模運算子的作用在數學中，當我們將一個整數除以另一個整數時，就會得到一個商和一個餘數。例如，當我們將10除以3時，商數為3，餘數為1。模運算子就是用來取得這個餘數的。 2.模運算子的用法在PHP中，使用%符號來表示模

linux系統呼叫system()函數詳解 Feb 22, 2024 pm 08:21 PM

Linux系統呼叫system()函數詳解系統呼叫是Linux作業系統中非常重要的一部分，它提供了一種與系統核心互動的方式。其中，system()函數是常用的系統呼叫函數之一。本文將詳細介紹system()函數的使用方法，並提供對應的程式碼範例。系統呼叫的基本概念系統呼叫是使用者程式與作業系統核心互動的一種方式。使用者程式透過呼叫系統呼叫函數來請求作業系統

Linux的curl指令詳解 Feb 21, 2024 pm 10:33 PM

Linux的curl命令詳解摘要：curl是一種強大的命令列工具，用於與伺服器進行資料通訊。本文將介紹curl指令的基本用法，並提供實際的程式碼範例，幫助讀者更好地理解和應用該指令。一、curl是什麼？ curl是命令列工具，用於發送和接收各種網路請求。它支援多種協議，如HTTP、FTP、TELNET等，並提供了豐富的功能，如檔案上傳、檔案下載、資料傳輸、代

深入了解Promise.resolve() Feb 18, 2024 pm 07:13 PM

Promise.resolve()詳解，需要具體程式碼範例Promise是JavaScript中一種用來處理非同步操作的機制。在實際開發中，常常需要處理一些需要依序執行的非同步任務，而Promise.resolve()方法就是用來傳回一個已經Fulfilled狀態的Promise物件。 Promise.resolve()是Promise類別的靜態方法，它接受一個

numpy版本查詢方法詳解 Jan 19, 2024 am 08:20 AM

Numpy是一款Python科學計算庫，提供了豐富的陣列操作函數與工具。升級Numpy版本時需要查詢目前版本以確保相容性，本文將詳細介紹Numpy版本查詢的方法，並提供具體的程式碼範例。方法一：使用Python程式碼查詢Numpy版本使用Python程式碼可以輕鬆查詢Numpy的版本，以下是實作方法和範例程式碼：importnumpyasnpprint(np

詳細解析C語言學習路線 Feb 18, 2024 am 10:38 AM

C語言作為一門廣泛應用在軟體開發領域的程式語言，是許多程式設計師初學者的首選。學習C語言不僅可以幫助我們建立程式設計的基礎知識，還可以提升我們解決問題和思考的能力。本文將詳細介紹一條C語言學習的路線圖，幫助初學者更好地規劃自己的學習進度。 1.學習基本文法在開始學習C語言之前，我們首先需要先了解C語言的基本文法規則。這包括變數和資料類型、運算子、控制語句（如if語句、

See all articles

Vue.js中組件使用詳解

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題