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:

效果图：

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

子组件：


父组件中部分代码：
			

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

 

 

 

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