Vue.js中的元件與範本探討
摘要:
指令是Vue.js中一個重要的特性， 主要提供了一個機制將資料的變化映射為DOM行為。 那什麼交數據的變化映射為DOM行為， Vue.js是透過資料驅動的， 所以我們不會直接去修改DOM結構， 不會出現類似$('ul').append('
Vue的內建指令
#1. v-bind
##v-bind主要用於綁定DOM元素屬性（attribute），即元素屬性實際的值是有vm實例中的data屬性提供的。 例如：<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue的指令</title>
<script src="../vue.js"></script>
</head>
<body>
<!-- HTML模版 -->
<p id="demo">
<span v-bind:cutomId="id">{{message}}</span>
</p>
<script>
//数据
let obj ={
message:"Hello World",
id:'123'
};
//声明式渲染
var vm = new Vue({
el:'#demo',
data:obj });
</script>
</body>
</html>
#2. v-on
綁定事件監聽器，簡寫為@。 昨天我們也用過，我們簡寫一下看一下效果<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue的指令</title>
<script src="../vue.js"></script>
</head>
<body>
<!-- HTML模版 -->
<p id="demo">
<span @click="clickHandle">{{message}}</span>
</p>
<script>
//数据
let obj = {
message:"hello Vue"
};
//声明式渲染
var vm = new Vue({
el:"#demo",
data:obj,
methods:{
clickHandle(){
alert("click")
}
}
});
</script>
</body>
</html>
3.v- html
v-html，參數類型為string，作用為更新innerHTML，#接受的按普通HTML處理程式碼如下<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue的指令</title>
<script src="../vue.js"></script>
</head>
<body>
<!-- HTML模版 -->
<p id="demo" v-html="HTML"></p>
<script>
//数据
let obj = {
HTML:"<p>Hello World</p>"
};
var vm = new Vue({
el:"#demo",
data:obj })
</script>
</body>
</html>#實作效果如下
##更多內建指示請查詢官網：Vue.js指示
##模板
#html範本
基於DOM的模板，範本皆可解析有效的html插值文字：使用「Mustache」語法（雙大括號）{{value}} 作用：取代實例上的屬性值， 當值改變時，內插內容會自動更新原生的html：雙大括號輸出的是文本，不會解析html屬性：使用v-bind進行綁定，可以回應變化使用JavaScript
template字串 template選項物件的屬性
範本將會取代掛在元素中。掛在元素的內容都會被忽略。
程式碼如下<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>template模板</title>
<script src="../vue.js"></script>
</head>
<body>
<!--HTML模板-->
<p id="demo"></p>
<script>
//数据
let obj = {
html:"<p>String</p>",
abc:1
};
var str = "<p>Hello</p>";
var vm = new Vue({
el:"#demo",
data:obj,
template:str })
</script>
</body>
</html>有木頭有發現什麼驚訝的變化
根節點只能有一個
將html結構寫在一對script標籤中，並設定type="X-template"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>template模板</title>
<script src="../vue.js"></script>
</head>
<body>
<!--HTML模板-->
<p id="demo">
<span>vue</span>
</p>
<script type="x-template" id="temp">
<p>
Hello,{{abc}},
<span>sunday</span>
</p>
</script>
<script>
//数据
let obj = {
html:"<p>String</p>",
abc:1
};
var vm = new Vue({
el:"#demo",
data:obj,
template:"#temp"
});
</script>
</body>
</html>實現效果如下：
#寫在script標籤中，還是比較局限，
如果別的檔案也是這個結構的時候，
這個就不能重複使用。
模板render函數
render函數
render 選項物件的屬性
createElement(標籤名稱,{資料物件},[子元素]);
子元素為文字或陣列
我們還是來一段程式碼示範<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>render函数</title>
<script src="../vue.js"></script>
<style type="text/css">
.bg{
background: #ee0000;
}
</style>
</head>
<body>
<p id="demo"></p>
<script>
//数据
let obj = {
};
var vm = new Vue({
el:"#demo",
data:obj,
render(createElement){
return createElement(
//元素名
"ul",
//数据对象
{
class:{
bg:true
}
},
//子元素
[
createElement("li",1),
createElement("li",2),
createElement("li",3)
]
);
}
})
</script>
</body>
</html>實作效果如下
總結
#
以上是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)
簡易JavaScript教學：取得HTTP狀態碼的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest
如何在JavaScript中取得HTTP狀態碼的簡單方法
Jan 05, 2024 pm 01:37 PM
JavaScript中的HTTP狀態碼取得方法簡介：在進行前端開發中，我們常常需要處理與後端介面的交互，而HTTP狀態碼就是其中非常重要的一部分。了解並取得HTTP狀態碼有助於我們更好地處理介面傳回的資料。本文將介紹使用JavaScript取得HTTP狀態碼的方法，並提供具體程式碼範例。一、什麼是HTTP狀態碼HTTP狀態碼是指當瀏覽器向伺服器發起請求時，服務
深入探討：Django框架是什麼？
Jan 19, 2024 am 09:23 AM
Django框架是一種用於Web應用程式的Python框架，它提供了一個簡單而強大的方式來創建Web應用程式。事實上，Django已成為目前最受歡迎的PythonWeb開發框架之一，也成為許多公司的首選，包括Instagram和Pinterest。本文將深入探討Django框架是什麼，包括基礎概念和重要元件，以及具體程式碼範例。 Django基礎概念Djan
vue.js vs.反應：特定於項目的考慮因素
Apr 09, 2025 am 12:01 AM
Vue.js適合中小型項目和快速迭代，React適用於大型複雜應用。 1)Vue.js易於上手，適用於團隊經驗不足或項目規模較小的情況。 2)React的生態系統更豐富，適合有高性能需求和復雜功能需求的項目。
Vue.js很難學習嗎？
Apr 04, 2025 am 12:02 AM
Vue.js不難學，特別是對於有JavaScript基礎的開發者。 1)其漸進式設計和響應式系統簡化了開發過程。 2)組件化開發讓代碼管理更高效。 3)使用示例展示了基本和高級用法。 4)常見錯誤可以通過VueDevtools調試。 5)性能優化和最佳實踐如使用v-if/v-show和key屬性可提升應用效率。
VUE是用於前端還是後端？
Apr 03, 2025 am 12:07 AM
Vue.js主要用於前端開發。 1)它是一個輕量級且靈活的JavaScript框架，專注於構建用戶界面和單頁面應用。 2)Vue.js的核心是其響應式數據系統，數據變化時視圖自動更新。 3)它支持組件化開發，UI可拆分為獨立、可複用的組件。
深入探討Linux中常見的特殊字符
Mar 14, 2024 pm 02:54 PM
Linux作業系統作為一種常用的開源作業系統，具有強大的可自訂性和靈活性。在使用Linux系統時，我們經常會遇到各種特殊字元的處理。這些特殊字元在命令列中具有特殊的意義，能夠實現許多高階功能。本文將深入探討Linux中常見的特殊字符，並結合具體的程式碼範例來詳細介紹它們的用法。通配符：通配符是用來匹配檔案名稱的特殊字符，常見的通配符包括*、?、[]等。下面是幾種
深入探討：Go語言中的單線程特性
Mar 15, 2024 pm 02:09 PM
Go語言作為一種現代化的程式語言，以其簡潔高效的特性在近年來受到越來越多開發者的喜愛和青睞。其中一個讓人獨特的地方就是其單線程特性。在傳統的多執行緒程式語言中，開發者通常需要手動管理執行緒之間的同步和互斥，而在Go語言中，借助其獨特的協程（Goroutine）和通訊機制（channel），可以方便且高效地實現並發程式設計。一、Goroutine與單線程：Go語言中的
