Vue2.0学习总结(3)

原创 夏天不做梦 随笔 vue.js 291阅读 2017-05-03 13:47:22 举报

父组件传给子组件数据:

父组件里:
<子组件 :a="b"></子组件>
b就是父组件里面的data数据数组

子组件里:
注册声明a就是父组件里的自定义属性名,可以设置接收的类型和初始化
props: {
a: {
type: Array,
default: [{
label: 'test',
value: 0
}]
}
}

子组件传给父组件数据:

父组件里:
监听my-event事件触发后getMyEvent方法接收一个参数,参数就是子组件传过来的数据。
<com-a @my-event="getMyEvent">
getMyEvent (hello) {
console.log('i got my event' + hello)
}

子组件里:
通过点击emitMyEvent事件,把hello数据传递给了父组件的my-event自定义事件
<button @click="emitMyEvent">emit</button>
emitMyEvent () {
this.$emit('my-event', this.hello)
}

1.在入口main.js文件中实例化根组件,组件要引入到根组件形成组件树
import Vue from 'vue'//把vue赋给Vue变量
new Vue({
el: 'body',//装载的位置
render: h=> h(App)//2.0必须用render方法渲染组件
})

2.实际循环
v-for可以渲染数组、对象、组件
如果要循环的是几块内容,把它们都放到内置的<template v-for="a in b">里

'line-last' : index % 2 !== 0
v-for绑定的index是索引,当索引除以2不等于0时候,添加类名line-last

index-board-'+ item.id 用v-bind绑定类名可以用字符串拼接变量形式

:class="[{ 'line-last' : index % 2 !== 0}, 'index-board-'+ item.id]"
这个v-bind就是绑定了两个类名line-last和index-board- 放到了数组里

3.使用ajax的vue-resource
created是一个生命周期钩子函数,就是一个vue实例被生成后调用这个函数。
一般在created函数中调用ajax获取页面初始化所需的数据。
created: function () {
//使用vue-resource发送get或者post请求
this.$http.post('getList', {use:123})
//请求完毕后执行then方法,接收两个函数,一个成功的一个失败的
.then(function (data) {
console.log(data)
}, function (err) {
console.log(err)
})
}

4.用express模拟数据

var app = express()

var appDb = require('../db.json')
var getNewsList = appDb.getNewsList

var apiRoutes = express.Router()

var fs = require('fs')
apiRoutes.route('/:apiName')
//请求到后执行回调函数
.all(function (req, res) {
// 所有请求,fs用node读取系统文件 db.json
fs.readFile('./db.json', 'utf8', function (err, data) {
if (err) throw err
// 返回数据json化
var data = JSON.parse(data)
if (data[req.params.apiName]) {
// 根据请求地址区分接口
res.json(data[req.params.apiName])
}
else {
res.send('no such api name')
}
})
})

apiRoutes.get('/getNewsList', function (req, res) {
res.json({
errno: 0,
data: getNewsList
})
})

app.use('/api', apiRoutes)

在组件中插入
//一般在created函数中调用ajax获取页面初始化所需的数据。
created: function () {
//使用vue-resource发送get请求
this.$http.get('api/getNewsList')
//请求完毕后执行then方法,接收两个函数,一个成功的一个失败的
.then((res) => {
this.newsList = res.data
}, (err) => {
console.log(err)
})
}

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复