vue 学习

前后端交互：我的经验

假设后端是：

package com.macro.mall.controller.ficc;


import com.macro.mall.common.api.CommonResult;
import com.macro.mall.dto.ExchangeQueryCond;
import com.macro.mall.model.CmsPrefrenceArea;
import com.macro.mall.model.ExchangeTradeDetail;
import io.swagger.annotations.Api;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;
import java.util.List;

@Controller
@RequestMapping("/ficcyj")
public class FiccyjController {

    @RequestMapping(value = "/listAll", method = RequestMethod.POST)
    @ResponseBody
    public CommonResult<List<ExchangeTradeDetail>> listAll(@RequestBody ExchangeQueryCond exchangeQueryCond) {
        List<ExchangeTradeDetail> exchangeTradeDetails = new ArrayList<>();
        ExchangeTradeDetail exchangeTradeDetail = new ExchangeTradeDetail();
        exchangeTradeDetail.setBsnno("BH1");
        exchangeTradeDetails.add(exchangeTradeDetail);

        ExchangeTradeDetail exchangeTradeDetail1 = new ExchangeTradeDetail();
        exchangeTradeDetail1.setBsnno("BH2");
        exchangeTradeDetails.add(exchangeTradeDetail1);
        return CommonResult.success(exchangeTradeDetails);
    }
}

前端要通过几个要素来传值和后端交互：

比如可以通过created来调用方法：

created(){
      ficcyjListAll(this.exchangeQueryCond).then(response=>{
        console.log(response.data)
        this.exchangeTradeDetails = response.data;
      });
      this.initOrderCountDate();
      this.getData();
    }

而cond和details，也即输入输出，预先在data模块定义:

 data() {
      return {
         exchangeQueryCond: {
            txnseqno: 'BH1'
         },
         exchangeTradeDetails: null,

而ficcyjListAll在某个js里定义:

export function ficcyjListAll(data) {
  return request({
    url:'/ficcyj/listAll/',
    method:'post',
    data:data
  })
}

request是封装了axios的代码，类似如下：

/ 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 15000 // 请求超时时间
})

用的mall admin那一套，觉得还是很好用的

command not found:

rm -rf node_modules package-lock.json && npm install

子组件传父组件

子组件 this.emit("item-click",item)

父组件 v-on:item-click="cpnClick"(默认会把item穿进去) 或者 @item-click 这里要注意绝对不能用驼峰，不然会报错，一般来讲，只要是vue里面，能不用驼峰绝对不用驼峰

然后 cpnClick(item) {

console.log("cpnlog", item)

}

v-bind不支持驼峰，需要把驼峰v-bind:cInfo转成v-bind:c-info

有多个标签，比如多个h2，那么需要放在div里面，不然会报错 exactly one root element，所以定义template模板的时候，一半都要放在div里面

父子组件传递信息，用props，然后要父子组件绑定 v-bind: cmovies= "movies"

cpn = {

template: '',

props： ['cmovies']

}

new Vue.(

data:{

movies: ['haiwang', 'haizeiwang']

}

)

<template id = "cpn">

<div>

<p>{{cmovies}}</p>

</div>

</template>

其实props的写法还可以这样

props: {

cmovies:Array,

cmessage: {

type:String,

default: 'AAAAA'，

required: true // 这样的话，父组件使用子组件比如cpn时 必须给cmessage先赋值

},

carrays: {

type: Array,

default {

    return []

}

//类型是对象或者数组时，不能用 default: [],否则会报错

}

}

props用法如下

同时props还可以自定义类型

组件语法糖:

const cpn = 

 {

template: 'xxx' 

}

new Vue( {

components: {cpn

}

}

)

组件声明子组件还可以这么写

其实Vue实例，也可以当成一个component，当成是root component

Vue.components（'cpn', {

template: xxx

}）

或者直接

new Vue( {

components: {

'cpn', {

template: '#cpn' // 要有#号, 很关键

}

}

}

)

但这样template很乱，可以这样写

<script type=‘text/x-template’ id=‘cpn’>

<div>

</div>

</script >

或者

<template id='cpn'>

</template>

可以这样:

Vue.components（'cpn', {

template: xxx,

data():{

return {

title： ’abc‘

}

}

}

components里面的data一定要有括号，这是一个函数，如果没有括号，就是一个对象，而为了组件之间不相互干扰，必须是一个函数，是对象会相互干扰

父组件和子组件: 都需要注册。特别是在有多个app，比如有app1，app2，那么都要如下注册（如果有CN1,CN2俩组件）:

components: {

C1: CN1

C2:CN2

}

因为父组件会被替换掉，所以不能在未定义的app里面用父组件，除非你注册了

new Vue({}), {}里面都是option，可以有data,methods,computed，conponents

插值 {{message}}

v-bind: "src = resource"

v-bind: "href = "

v-bind: 可以简写为 :

v-bind: "class= { active: true, line: false}"

v-bind: "style= { fontSize: '50px' }"

其中active 的true, line的false, ‘50px’，可以用data里面的数据代替，比如

data() : {

isActive: true,

isLine: false

finalSize: 50px

},

methods: {

}

可以写成

v-bind: "class= { active: isActive, line: isLine}"

v-bind: "style= { fontSize: finalSize }"

v-on click= "clickmethod" 不需要()，因为点击不要加参数？ 不是的，也可以用clickmethod(item)这种写法，这样就能把参数从div里面传到对应methods里面

v-bind :"src= 'finalSize'" 这里面abc是一个字符串 

v-bind :"src= finalSize " 这里面finalSize是一个变量，比如对应上面的50px

`` 这个在vue可以输入多行

component必须放在div里面

创建组件:  const cpnC = Vue.extend(

template: `

<div>

<h2>我是标题</>

</div>

`

)

注册组件: Vue.component('cpn', cpnC)

分局部组件和全局组件，局部组件就要这么写

1.  npm是包管理器

2. node js安装，cli 安装

写博客其实是给自己看的，看看狂神写博客

export用来将vue导出，给其他vue文件improt引用，

npm install webpack -g

很多东西静下心来，学起来就很快

npm i element-ui -S 

npm install

安装sass加载器

cnpm install sass-loader node-sass --save -dev

npm run dev

layui 分页很方便

docsify.js.org 自动生成文档

npm install报错的话，用cnpm install试试

所有内容要写在<div>里面，不能写在根节点（最外面）

传递参数的两种方式：

一种 props: true，然后路径传参

另一种，通过route.param.id，传导

mode 模式： # 和不带#号的 history

路由钩子:

next((vm) => {

vm.getData()

} 

axios  ({

get: ' '

url：' '

}). then( response) {

}