Vue.js是一個非常流行的JavaScript框架,可以用于構(gòu)建交互式的用戶界面。Vue 100例是一個免費的教程,提供了100個不同的Vue.js示例程序,幫助新手更好地學(xué)習(xí)Vue.js。
以下是示例代碼中的一些例子:
// 簡單的計數(shù)器 <div id="app"> <button v-on:click="counter++">增加</button> <p>您已經(jīng)點擊了 {{ counter }} 次。</p> </div> // 通過輸入框過濾項目 <div id="app"> <input type="text" v-model="filter"> <ul> <li v-for="item in filteredItems">{{ item.name }} - {{ item.description }}</li> </ul> </div> // 嵌套組件 Vue.component('child', { template: '<div><h2>我是子組件</h2></div>' }); Vue.component('parent', { template: '<div><h1>我是父組件</h1><child /></div>' }); // 使用vuex存儲數(shù)據(jù) import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++; } } }); new Vue({ el: '#app', store, methods: { increment() { this.$store.commit('increment'); } } });
這些例子只是Vue 100例中的一小部分。這個教程涵蓋了從基本的數(shù)據(jù)綁定到復(fù)雜的組件交互的各種情況。無論您是初學(xué)者還是有經(jīng)驗的開發(fā)人員,Vue 100例都是學(xué)習(xí)Vue.js的絕佳資源。