免費(fèi)AI編程助手
Vue（發(fā)音為 ?
/vju?/?，與 view 類似）是一個(gè)用于構(gòu)建用戶界面的漸進(jìn)式框架。與其他單片框架不同，Vue 從一開始就設(shè)計(jì)為可增量采用。核心庫只關(guān)注于視圖層，并且易于拾取并與其他庫或現(xiàn)有項(xiàng)目集成。
- Vue.js 允許您使用稱為指令的 HTML 屬性擴(kuò)展 HTML；
- Vue.js 指令為 HTML 應(yīng)用程序提供功能；
- Vue.js 提供內(nèi)置指令和用戶定義指令。
Vue.js 指令
- Vue.js 使用雙大括號?
{{ }}?作為數(shù)據(jù)的占位符； - Vue.js 指令是帶有前綴的 HTML 屬性 ?
v-?。
Vue 示例
在下面的示例中，使用?new Vue()?創(chuàng)建了一個(gè)新的 Vue 對象。
屬性?el:?將新的 Vue 對象綁定到?id="app"?的 HTML 元素。
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Vue.js 綁定
當(dāng) Vue 對象綁定到 HTML 元素時(shí)，當(dāng) Vue 對象發(fā)生變化時(shí)，HTML 元素也會發(fā)生變化：
<div id="app">
{{ message }}
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
function myFunction() {
myObject.message = "John Doe";
}
</script>
Vue.js 雙向綁定
該?v-model?指令將 HTML 元素的值綁定到應(yīng)用程序數(shù)據(jù)。
這稱為雙向綁定：
<div id="app">
<p>{{ message }}</p>
<p><input v-model="message"></p>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Vue.js 循環(huán)綁定
使用?v-for?指令將 Vue 對象數(shù)組綁定到 HTML 元素的“數(shù)組(array)”：
<div id="app">
<ul>
<li v-for="x in todos">
{{ x.text }}
</li>
</ul>
</div>
<script>
myObject = new Vue({
el: '#app',
data: {
todos: [
{ text: '學(xué)習(xí) JavaScript' },
{ text: '學(xué)習(xí) Vue.js' },
{ text: '學(xué)編程從W3Cschool開始' }
]
}
})
</script>
以上就是編程獅(w3cscool.cn)為您整理的關(guān)于《什么是 Vue.js？》的全部內(nèi)容，簡單介紹了 Vue 定義、核心最基本的功能和實(shí)例體驗(yàn)，如果想要深入學(xué)習(xí)和了解 Vue 你可能需要：
推薦閱讀：
推薦手冊：
