laravel中使用vue,和简单的绑定数据。

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传给前端工程师。再将假数据,换成传来的数据,就完成了交互。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容

  • 小粽子很喜欢听故事,每晚都是听着故事入睡。最近,她喜欢听的故事是“寻屁之旅”。每晚都要听好遍,每次听时都乐的哈哈大...
    二王子阅读 361评论 2 2
  • 1、财务指标本身就有层级。用销售收入,产值,利润这样的指标来衡量经营业绩没问题,但用来衡量和拉动管理水平就太不够看...
    米兰默阅读 202评论 0 0
  • ┏━━━*** ***━━━┓ 宁静的小山村 老屋...
    蝴蝶恋她阅读 969评论 71 76
  • 文/月中山 上一章 / 简介+目录 / 下一章 深秋时节,姨妈家更冷了,孟杰像个泥鳅般不见老实一会儿,在屋内...
    月中山阅读 273评论 0 4