Vue学习笔记

夏天不做梦    2018-8-23

父组件传给子组件数据:

父组件里:
<子组件 :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)
  })
}





暗色背景
手机扫码阅读本页