Vue.js (读音 /vjuː/，类似于view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时，Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。
使用vue的话，要先安装npm isntall vue，和npm install vue-router。
在app.js中定义vue组件和路由，还有在哪里使用。
定义简单组件：
Vue.component('example-component', require('./components/ExampleComponent.vue'));
在使用该组件的时候，只需要<example-component></example-component>，就可以在主页面里面显示ExampleComponent.vue这个组件页面。组件里面的展示页面的代码要写在<templete>这个标签内部。
定义简单路由：
定义路由链接到哪个组件。
const routes = [
{ path: '/examples', component: require('./components/ExampleComponent.vue') },
];
定义完路由之后，创建实例。再挂载到使用该路由的页面。
const app = new Vue({
router
}).$mount('#app');
每个路由映射一个组件。
使用路由
<router-link to="/examples">
<a href="javascript:;" class="link"><span>例子</span></a>
</router-link>
当点击例子的时候，就会显示在主页面中显示ExampleComponent.vue这个页面。
简单的向vue组件里面传入数据：
<script>
export default {
name: 'ExampleComponent',//这个vue组件的名字
mounted() {
var api='/api/user/examples';
var vm=this;
window.axios.get(api).then(function(response)//通过这个发起这个api请求，请求之后从api中获得的数据在response中。
{
vm.examples=response.data.data;//从api里面获得的数据，放入这个页面定义的数组里面。
});
},
data ()
{
return {
examples:[],//这个examples数组里面的数据，是可以之间被使用的。
};
}
};
</script>
前端和后端的交互，应该在这里，前端工程师在<templete>中页面之前使用的 数据都是假数据，后端程序员从数据库中取出数据，通过api传给前端工程师。再将假数据，换成传来的数据，就完成了交互。
网友评论