這篇文章帶給大家的內容是介紹Vue元件是什麼？ Vue元件如何使用？ （程式碼範例）。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
元件的介紹
#元件系統是將一個大型的介面切分成一個更小的可控單元。
元件是可重複使用的，可維護的。
元件具有強大的封裝性，易於使用。
大型應用程式中，元件與元件之間互動是可以解耦操作的。
Vue元件的使用
全域元件的使用
nbsp;html>
<meta>
<meta>
<title>Page Title</title>
<meta>
<link>
<script></script>
<div>
<my-header></my-header>
</div>
<script>
//全局组建的定义
Vue.component("my-header", {
template: '<h1>全局组件'
});
var app = new Vue({
el: '#app',
});
</script>
局部元件的使用
nbsp;html>
<meta>
<meta>
<title>Page Title</title>
<meta>
<link>
<script></script>
<div>
<my-header></my-header>
</div>
<script>
//局部组件定义
var app = new Vue({
el: '#app',
components: {
'my-header': {
template: '<h1>局部组件'
}
}
});
</script>
元件資料的特性
nbsp;html>
<meta>
<meta>
<title>Page Title</title>
<meta>
<script></script>
<div>
<my-header></my-header>
<my-header></my-header>
<br>
<my-header1></my-header1>
<my-header1></my-header1>
</div>
<script>
//组件数据之间不共享，Vue实例中的数据也不能共享给组件,并且组件中的data只能使用函数
//组件的数据data使用函数的特点是每次点击或操作组件函数会重新执行，这样就不会影响其它组件，通过下面两个例子可以看出
var data = {
count: 0
};
var app = new Vue({
el: '#app',
data: {
message: "Hello Vue!!!"
},
components: {
'my-header': {
template: '<h1 v-on:click="changeCount">{{count}}',
data: function() {
return data;
},
methods: {
changeCount: function() {
this.count++;
}
}
},
'my-header1': {
template: '<div v-on:click="changeCount1">{{count}}',
data: function() {
return {
count: 0
};
},
methods: {
changeCount1: function() {
this.count++;
}
}
}
}
});
</script>
Vue實例與元件之間的關係
nbsp;html>
<meta>
<meta>
<title>Page Title</title>
<meta>
<script></script>
<div>
{{message}}
</div>
<script>
//Vue组件其实是一个可扩展的Vue实例，Vue实例也可以看成是一个组件
// var app = new Vue({
// el: '#app',
// template: '<h1>app应用'
// });
//使用继承实现Vue组件
var myComponent = Vue.extend({
data: function() {
return {
message: "Hello Vue@@@"
}
}
});
var vm = new myComponent({
el: '#app'
});
</script>
Vue元件的範本方式
- \
- `
- ##
- .vue 單一檔案
-
nbsp;html> <meta> <meta> <title>Page Title</title> <meta> <script></script> <div> <my-header></my-header> <my-header-1></my-header-1> <my-header-2></my-header-2> <my-header-3></my-header-3> </div> <template> <div> <p> </p> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </template> <script> <div> <p> <ul> <li>1</script> - 2
- 3 <script> //Vue模版添加方式 var app = new Vue({ el: '#app', components: { 'my-header': { template: '<div>\ <p>\ <ul>\ <li>1\ <li>2\ <li>3\ \ \ ', data: function() { return { message: "第一项" } } }, 'my-header-1': { template: `<div> <p> <ul> <li>1 <li>2 <li>3 `, }, 'my-header-2': { template: '#temp' }, 'my-header-3': { template: '#temp1' } } }); </script>
- # Vue父元件向子元件通訊（props）
nbsp;html> <meta> <meta> <title>Page Title</title> <meta> <script></script> <div> <!-- 数据在组件中 --> <my-header></my-header> <!-- 父组件向子组件传递数据 --> <my-header-1></my-header-1> <!-- 父组件向子组件传递数据不给值 --> <my-header-1></my-header-1> </div> <!-- 数据在组件中的模版 --> <template> <div> <h1 id="message">{{message}}</h1> <ul> <li>{{item}}</li> </ul> </div> </template> <!-- 父组件向子组件传递数据的模版 --> <template> <div> <h1 id="message">{{message}}</h1> <ul> <li>{{item}}</li> </ul> <my-nav></my-nav> </div> </template> <!-- 子组件向子组件传递数据的模版 --> <template> <div> <h1 id="message">{{message}}</h1> <ul> <li>{{item}}</li> </ul> </div> </template> <script> var vm = new Vue({ el: '#app', data: { temp_2_list: ["1", "2", "3"] }, components: { //数据在自己组件中的实例 'my-header': { template: '#temp-1', data: function() { return { list: ["1", "2", "3"], message: "组件中的数据" }; } }, //父组件向子组件传递数据 'my-header-1': { //props: ["list"], template: '#temp-2', data: function() { return { message: "父组件向子组件传递数据" }; }, //属性的验证与默认值 props: { list: { type: Array, default: ["4", "5", "6"] } }, //子组件的子组件 components: { 'my-nav': { template: '#temp-3', data: function() { return { message: "子组件中的子组件" }; }, props: ["itemlist"] } } } } }); </script>
- 子元件向父元件通訊（EmitEvents）
nbsp;html> <meta> <meta> <title>Page Title</title> <meta> <script></script> <div> <my-header-1></my-header-1> </div> <!-- 父组件向子组件传递数据的模版 --> <template> <div> <h1 id="message">{{message}}</h1> <ul> <li>{{item}}</li> </ul> <my-nav></my-nav> </div> </template> <!-- 子组件向子组件传递数据的模版 --> <template> <div> <h1 id="message">{{message}}</h1> <ul> <li>{{item}}</li> </ul> </div> </template> <script> //子组件向父组件传递数据，是发布订阅模式 var vm = new Vue({ el: '#app', data: { temp_2_list: ["1", "2", "3"] }, components: { //父组件向子组件传递数据 'my-header-1': { //props: ["list"], template: '#temp-2', data: function() { return { message: "父组件向子组件传递数据" }; }, //属性的验证与默认值 props: { list: { type: Array, default: ["4", "5", "6"] } }, methods: { getChildContent: function(str) { debugger alert(str); } }, //子组件的子组件 components: { 'my-nav': { template: '#temp-3', data: function() { return { message: "子组件中的子组件" }; }, props: ["itemlist"], methods: { getContent: function(ev) { // console.log(this); // console.log(ev.target.innerHTML); this.$emit("change-events", ev.target.innerHTML); } } } } } } }); </script>
- Vue非父子元件的通訊
- $emit
- #$on
- # Vuex狀態管理
- state
- #mutation
- commit
nbsp;html>
<meta>
<meta>
<title>Page Title</title>
<meta>
<script></script>
<style>
ul {
list-style-type: none;
}
</style>
<div>
<my-header-1></my-header-1>
<my-header-2></my-header-2>
</div>
<script>
//非父子组件通信
//1.0 使用空实例进行非父子组件通信
//定义空实例
//创建步骤是：
//1、首先定义一个空实例
//2、需要给被传递数据的A组件使用$emit绑定自定义事件，并将A组件的数据发布给B组件
//3、使用$on订阅A组件发布过来的数据，从而获取数据
var busVm = new Vue();
var vm = new Vue({
el: '#app',
components: {
//组件B
'my-header-1': {
template: `<h1>{{message}}`,
data: function() {
return {
message: "非父子组件通信"
};
},
mounted() {
//使用bind（this）修正this
busVm.$on("changeEnvents", function(param) {
this.message = param;
}.bind(this));
},
},
//组件A
'my-header-2': {
template: `<ul><li @click="getContent" v-for="item in list">{{item}}`,
data: function() {
return {
list: ["第一项", "第二项", "第三项"]
};
},
methods: {
getContent: function(ev) {
busVm.$emit("changeEnvents", ev.target.innerHTML);
}
}
}
}
});
</script>
Vuex狀態管理
Vue元件內容分發
- 單
標籤使用
nbsp;html>
<meta>
<meta>
<title>Page Title</title>
<meta>
<script></script>
<style>
ul {
list-style-type: none;
}
</style>
<div>
<my-header-1>
<h1 id="我是标题">我是标题</h1>
</my-header-1>
<my-header-1>
<my-header-2></my-header-2>
</my-header-1>
</div>
<script>
//单插槽<slot>
var vm = new Vue({
el: '#app',
components: {
'my-header-1': {
template: `<div>我是头部:<slot>`,
},
'my-header-2': {
template: `<h1>我是标题`,
}
}
});
</script>
- #多
標籤使用 -
nbsp;html> <meta> <meta> <title>Page Title</title> <meta> <script></script> <style> ul { list-style-type: none; } </style> <div> <my-header-1> <button>←</button> <button>→</button> </my-header-1> </div> <script> //多插槽的使用，则使用name属性来指定要插入的位置 var vm = new Vue({ el: '#app', components: { 'my-header-1': { template: `<div><slot name="left"> 我是头部:<slot name="right">`, }, 'my-header-2': { template: `<h1>我是标题`, } } }); </script> -
#
nbsp;html> <meta> <meta> <title>Page Title</title> <meta> <script></script> <style> ul { list-style-type: none; } </style> <div> <my-header-1> <button>←</button> <button>→</button> </my-header-1> </div> <script> //多插槽的使用，则使用name属性来指定要插入的位置 var vm = new Vue({ el: '#app', components: { 'my-header-1': { template: `<div><slot name="left"></script> - Vue元件開發流程
我是标题
`, } } });#撰寫基礎HTML與CSS
nbsp;html>
<meta>
<meta>
<title>Page Title</title>
<meta>
<script></script>
<div>
<my-header-1></my-header-1>
</div>
<!-- 父组件向子组件传递数据的模版,ref特性用于DOM操作，使用this.$refs.row获取添加特性的DOM元素 -->
<template>
<div>
<h1 id="message">{{message}}</h1>
<ul>
<li>{{item}}</li>
</ul>
</div>
</template>
<script>
//子组件向父组件传递数据，是发布订阅模式
var vm = new Vue({
el: '#app',
data: {
temp_2_list: ["1", "2", "3"]
},
components: {
//父组件向子组件传递数据
'my-header-1': {
//props: ["list"],
template: '#temp-2',
data: function() {
return {
message: "父组件向子组件传递数据"
};
},
//属性的验证与默认值
props: {
list: {
type: Array,
default: ["4", "5", "6"]
}
},
methods: {
updateStyle: function(ev) {
ev.target.style.color = 'red';
// this.$refs.row.style.color = 'red';
console.log(this.$refs.row);
this.$refs.row.forEach(element => {
console.log(element);
element.style.color = 'red';
});
}
}
}
}
});
</script>
以上是Vue組件是什麼？ Vue元件如何使用？ （程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述
本文轉載於：博客园。如有侵權，請聯絡admin@php.cn刪除
C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AMC 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。
從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AMJavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。
Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AMPython更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。
C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AMC和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。1）C 用于解析JavaScript源码并生成抽象语法树。2）C 负责生成和执行字节码。3）C 实现JIT编译器，在运行时优化和编译热点代码，显著提高JavaScript的执行效率。
JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AMJavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。
JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AMJavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。
了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。
Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AMPython更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
刺客信條陰影：貝殼謎語解決方案
3 週前ByDDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
2 週前ByDDD
在哪裡可以找到原子中的起重機控制鑰匙卡
3 週前ByDDD
<🎜>：死鐵路 - 如何完成所有挑戰
4 週前ByDDD
Atomfall指南：項目位置，任務指南和技巧
4 週前ByDDD
熱工具
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。
mPDF
mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），
PhpStorm Mac 版本
最新（2018.2.1 ）專業的PHP整合開發工具
SublimeText3 英文版
推薦：為Win版本，支援程式碼提示！
