App下載

什么是 Vue.js？

編程獅(w3cschool.cn) 2021-09-06 17:13:24 瀏覽數(shù) (3591)
反饋

Vue（發(fā)音為 ?/vju?/?，與 view 類似）是一個(gè)用于構(gòu)建用戶界面的漸進(jìn)式框架。與其他單片框架不同，Vue 從一開(kāi)始就設(shè)計(jì)為可增量采用。核心庫(kù)只關(guān)注于視圖層，并且易于拾取并與其他庫(kù)或現(xiàn)有項(xiàng)目集成。 

vue

  • Vue.js 允許您使用稱為指令的 HTML 屬性擴(kuò)展 HTML；
  • Vue.js 指令為 HTML 應(yīng)用程序提供功能；
  • Vue.js 提供內(nèi)置指令和用戶定義指令。


Vue.js 指令

  • Vue.js 使用雙大括號(hào)?{{ }}?作為數(shù)據(jù)的占位符；
  • Vue.js 指令是帶有前綴的 HTML 屬性 ?v-?。

Vue 示例

在下面的示例中，使用?new Vue()?創(chuàng)建了一個(gè)新的 Vue 對(duì)象。

屬性?el:?將新的 Vue 對(duì)象綁定到?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 對(duì)象綁定到 HTML 元素時(shí)，當(dāng) Vue 對(duì)象發(fā)生變化時(shí)，HTML 元素也會(huì)發(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 對(duì)象數(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開(kāi)始' }
        ]
    }
})
</script>

嘗試一下 ?


以上就是編程獅(w3cscool.cn)為您整理的關(guān)于《什么是 Vue.js？》的全部?jī)?nèi)容，簡(jiǎn)單介紹了 Vue 定義、核心最基本的功能和實(shí)例體驗(yàn)，如果想要深入學(xué)習(xí)和了解 Vue 你可能需要： 


推薦閱讀：


推薦手冊(cè)：


推薦課程：

Vue.js

1 人點(diǎn)贊