Vue.js 是一款流行的前端框架，它使用基于組件的架構(gòu)來構(gòu)建交互式 Web 應(yīng)用程序。Vue.js 的 el 屬性指定了 Vue 實(shí)例將要控制的 HTML 元素，而 data 屬性指定了 Vue 實(shí)例的數(shù)據(jù)。
new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
})在上面的代碼中，我們創(chuàng)建了 Vue 實(shí)例并將其綁定到 id 為 "app" 的 HTML 元素上。我們還定義了一個(gè)名為 message 的數(shù)據(jù)屬性，它的值是 "Hello, Vue!"。
在 Vue.js 中，數(shù)據(jù)驅(qū)動(dòng)視圖的變化。這意味著當(dāng)我們更改數(shù)據(jù)時(shí)，相應(yīng)的視圖也會(huì)被更新。下面是一個(gè)例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">{{ message }}</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
})
</script>
</body>
</html>在上面的例子中，我們將 Vue 實(shí)例綁定到了 id 為 "app" 的 HTML 元素上，并且在該元素內(nèi)使用了 {{ message }} 插值表達(dá)式來顯示 message 屬性的值。當(dāng)我們更改 data 屬性的值時(shí)，頁面上的文字也會(huì)隨之更新。
可以看出，Vue.js 的數(shù)據(jù)綁定機(jī)制非常強(qiáng)大，可以讓我們輕松地實(shí)現(xiàn)響應(yīng)式的用戶界面。