Vue.js (讀音 /vju?/，類似于view) 是一套構(gòu)建用戶界面的漸進(jìn)式框架诲宇。與其他重量級(jí)框架不同的是际歼，Vue 采用自底向上增量開發(fā)的設(shè)計(jì)。Vue 的核心庫只關(guān)注視圖層姑蓝，它不僅易于上手鹅心，還便于與第三方庫或既有項(xiàng)目整合。另一方面纺荧，當(dāng)與單文件組件和Vue 生態(tài)系統(tǒng)支持的庫結(jié)合使用時(shí)旭愧，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用程序提供驅(qū)動(dòng)。
Vue.js 使用了基于 HTML 的模板語法宙暇，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)输枯。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析占贫。在底層的實(shí)現(xiàn)上桃熄，Vue 將模板編譯成虛擬 DOM 渲染函數(shù)。結(jié)合響應(yīng)系統(tǒng)型奥，在應(yīng)用狀態(tài)改變時(shí)瞳收，Vue 能夠智能地計(jì)算出重新渲染組件的最小代價(jià)并應(yīng)用到 DOM 操作上池充。如果你熟悉虛擬 DOM 并且偏愛 JavaScript 的原始力量，你也可以不用模板缎讼，直接寫渲染 (render) 函數(shù)收夸，使用可選的 JSX 語法。
使用vue的話血崭，要先安裝npm isntall vue卧惜，和npm install??vue-router。
在app.js中定義vue組件和路由夹纫，還有在哪里使用咽瓷。
定義簡(jiǎn)單組件：
Vue.component('example-component', require('./components/ExampleComponent.vue'));
在使用該組件的時(shí)候，只需要<example-component></example-component>舰讹，就可以在主頁面里面顯示ExampleComponent.vue這個(gè)組件頁面茅姜。組件里面的展示頁面的代碼要寫在<templete>這個(gè)標(biāo)簽內(nèi)部。
定義簡(jiǎn)單路由：
定義路由鏈接到哪個(gè)組件月匣。
const routes = [
{ path: '/examples', component: require('./components/ExampleComponent.vue') },
];
定義完路由之后钻洒，創(chuàng)建實(shí)例。再掛載到使用該路由的頁面锄开。
const app = new Vue({
router
}).$mount('#app');
每個(gè)路由映射一個(gè)組件素标。
使用路由
<router-link to="/examples">
????????<a href="javascript:;" class="link"><span>例子</span></a>
? </router-link>
當(dāng)點(diǎn)擊例子的時(shí)候，就會(huì)顯示在主頁面中顯示ExampleComponent.vue這個(gè)頁面萍悴。
簡(jiǎn)單的向vue組件里面?zhèn)魅霐?shù)據(jù)：
<script>
export default {
name: 'ExampleComponent',//這個(gè)vue組件的名字
mounted() {
var api='/api/user/examples';
var vm=this;
window.axios.get(api).then(function(response)//通過這個(gè)發(fā)起這個(gè)api請(qǐng)求头遭，請(qǐng)求之后從api中獲得的數(shù)據(jù)在response中。
{
vm.examples=response.data.data;//從api里面獲得的數(shù)據(jù)癣诱，放入這個(gè)頁面定義的數(shù)組里面计维。
});
},
data ()?
{
return {
examples:[],//這個(gè)examples數(shù)組里面的數(shù)據(jù)，是可以之間被使用的撕予。
};
}
};
</script>?
前端和后端的交互鲫惶，應(yīng)該在這里，前端工程師在<templete>中頁面之前使用的 數(shù)據(jù)都是假數(shù)據(jù)嗅蔬，后端程序員從數(shù)據(jù)庫中取出數(shù)據(jù)剑按，通過api傳給前端工程師。再將假數(shù)據(jù)澜术，換成傳來的數(shù)據(jù)艺蝴，就完成了交互。
