VUE集合：npm安装,创建，发布VUE项目,下载及使用模块,接收后台返回数据，渲染页面，组件传值

1.vpm安装步骤（自行安装node.js），项目根目录下安装模块使用 cnpm 代替npm 速度较快

2.创建，发布Vue项目

创建vue项目，到文件路径下，打开图形化界面命令，例如：D盘下
vue ui  

成功之后，自动打开网址，例如：http://localhost:8000/
手动创建vue项目

发布Vue项目，在项目根目录下执行命令
npm vue serve 或者 npm vue dev (根据package.json执行)

发布成功之后会显示相应的文件地址，访问即可

3.下载模块，以axios为例

在项目目录下执行下载命令
cnpm install axios --save

引入及使用组件或模块

引入iview组件
import iViewfrom 'iview'
Vue.use(iView)

4.vue前端用axios方式与后台数据进行交互

    教程链接：https://www.runoob.com/vue2/vuejs-ajax-axios.html

下面以get方式查询id=1的数据为例，发送请求：

export default{
	name: 'app',
	components: {
		Button,
		Input1,
		Table
	},
	data(){
		return{
			value : ''
		}
	},
methods:{
		clickFunc: function(){
			var id = this.$refs.inputText.value;
			// axios({
			// 	methods:'post',
			// 	url:'http://localhost:8088/commodityController/selectSingle',
			// 	data:id	
			// })
						
			axios.get('http://localhost:8088/commodityController/selectSingle/'+id)	
			.then(function (response) {
			window.console.log(response);
			})
			.catch(function (error) {
			window.console.log(error);
			});
		},
	}
}
后台代码:
@GetMapping(value = {"/selectSingle/{id}","/selectSingle"})
    public CommodityDTO selectSingle(@PathVariable(required = false) Integer id) {
        System.out.println("selectSingle"+id);
        return iCommodityService.selectSingle(id);
    }

5.获取后台数据并渲染到前台页面

            axios.get('http://localhost:8088/commodityController/selectSingle/'+id)	
			.then((response)=> {
				window.console.log(response);
				var resdata = response.data;   //resdata  为响应数据
				this.$set(this.data1,0,{       //set 使用set方法
					id: resdata.id,
					name: resdata.name,
					price: resdata.price
				})
			})
			.catch((error)=> {
				alert(error);
				window.console.log(error);
			});
注*：可能遇到的问题
set方法：https://blog.csdn.net/panyang01/article/details/76665448
数据绑定问题：https://blog.csdn.net/weixin_30809333/article/details/94931980
组件信息传递参考链接：https://blog.csdn.net/Alva112358/article/details/93732001
                     https://www.jb51.net/article/114588.htm

效果图如下：

6.vue传值问题，组件传值问题。

  1. 通过 props 传值.（父组件向子组件传值）

单文件组件Diglog:
<template>
	<div id="alert-dialog">
		<div>
			<h3> 确定要查询为：{{ diglogTitle }} 的数据吗？ </h3>
			<Button v-model="btnOK" @click="bcancel">取消</Button>
			<Button  v-model="btnCancel" type="primary" @click="bok">确定</Button>
		</div>
	</div>
</template>
<script>
export default{
	name:'Diglog',
	props:{
		diglogContent:{
			type:String,
			default:' '
		},
		diglogTitle:{
			type:String,
			default:'标题'
		}
	},
	data(){
		return{
			modal1: false
		}
	},
	methods:{
		bok:function(){
			this.$emit('on-ok');
		},
		bcancel:function(){
			this.$emit('on-cancel');
		}
	}
}
-------------------------------------------------------------------------
输入框组件 Input，按钮组件Button，点击Button后将Input中的值传入Diglog组件中：
<template>
	<div id="app">
		<div id="search">
			<Input id="input" v-model="value" ref="inputText" placeholder="请输入..."/>
			<Button id="btn" type="info" @click="chaxunClick" >查询</Button>
			<Diglog v-if="diglog1" diglog-title="diglog-title" :diglogContent='diglogContent' v-model="diglog1"></Diglog>
			
		</div>
	</div>
</template>

<script>
import axios from 'axios'
import Diglog from './components/Diglog.vue'

export default{
	name: 'app',
	components: {
		Diglog
	},
	data(){
		return{
			value:'',
			diglog1: false,
			diglogContent:''
		}
	},	
	methods:{
		chaxunClick:function(){
			this.diglog1 = true;
			this.diglogContent = this.$refs.inputText.value;
		}
	}
}
</script>

效果图：

2.事件传递 （子组件传递给父组件）

子组件：
<template>
	<div id="alert-dialog">
		<div>			
			<input v-model="id" @change="inputChange"/>input
		</div>
	</div>
</template>
<script>
export default{
	name:'Diglog',
	props:{
		
	},
	data(){
		return{
			id:''
		}
	},
	methods:{
		inputChange:function(){
			this.$emit("transmit-id",this.id);
		}
	}
}
</script>
父组件中部分代码：
			<Diglog @transmit-id="transmit" v-if="diglog1" diglog-title="diglog-title" :diglogContent='diglogContent' v-model="diglog1" @on-ok="ok" @on-cancel="cancel"></Diglog>

transmit(msg){
			alert("子组件向父组件传递信息"+msg);
			this.value = msg;
		}

 

 

 

组件传值参考博客地址：https://blog.csdn.net/zhanghl150426/article/details/90665423