三、Vue 的一些语法样例

小时 :

分钟 :

秒 :

天 :

星期 :

计数器: {{ counter }}

<button @click = “counter++”>点我

v-model 表示数据双向绑定，这个没有什么好说的。data 初始化数据，watch 方法中就是监听函数，监听各自的组件并进行处理。

发送HTTP 请求

========================================================================

我们要做前后端分离，那么通过http 请求访问后端数据是避免不了的。所以我们一起来看下。我这里也是查看资料中的例子。直接拿过来用了。

我们创建一个BlogList.vue 文件，内容如下：

{{blog.title}}

上面的代码可以看到。mounted 方法中发送http 请求。mounted 函数是初始化页面后，将数据渲染到界面上的。

mounted () {

this.$http.get(‘api/interface/blogs/all’).then((response) => {

this.blogs = response.body.blogs

}, (response) => {

console.error(response)

});

},

我们启动项目，发现报这种错误。这是因为我们项目中没有引入 vue-resource 所以我们需要在项目中引入。

我们在idea 中打开控制台（alt+F12）。

npm install vue-resource

安装好之后，我们在在main.js 中引入它

import VueResource from ‘vue-resource’

Vue.use(VueResource)

Vue.http.options.emulateJSON = true //允许使用post 请求。

在config–index.js 中设置一下代理，模拟一下跨域请求，不然接口访问不了。

proxyTable: {

‘/api’: { // 1. 对于所有以 “/api”　开头的url 做处理．

target: ‘http://siwei.me’, // 3. 转发到 siwei.me 上．

changeOrigin: true,

pathRewrite: {

‘^/api’: ‘’ // 2. 把url中的　“/api” 去掉．

}

}

},

好了，我们启动看一下，

后面是获取详情的，上面没有传递参数，获取详情需要传递参数，代码如下：

标题： {{ blog.title }}

发布于： {{blog.created_at }}