vue使用相关总结

一、前期准备

1.Node.js 安装 https://nodejs.org/download/release/v8.9.4/
2.一些相关的dos命令

#查看 版本
node -v
npm -v

安装淘宝镜像加速npm

npm install -g cnpm --registry=http://registry.npm.taobao.org

使用cnpm来替代npm

cnpm install -g vue-cl

npm安装cnpm报错

npm set registry https://registry.npm.taobao.org # 注册模块镜像
npm set disturl https://npm.taobao.org/dist    #node-gyp 编译依赖的 node 源码镜像
npm cache clean --force # 清空缓存·
npm install -g cnpm --registry=https://registry.npm.taobao.org  #再进行安装淘宝镜像

运行vue脚手架相关

#安装依赖（生成node_modules文件夹）
cnpm install
npm install
#启动项目
npm run dev
#打包
npm build

二、vue 父组件与子组件之间的参数传递

子组件 child.vue

<template>
	<div>
			父组件传过来的值{{actionId}}
			<button @click="handleTake"></button>
	</div>
<template>
<script>
  export default {
    name: "test",
    //父组件传递的值，data中不可再定义actionId
    prop:['actionId'],
    data(){
	    return{
	    	msg:'我是给父组件传递的值'
	    }
    }
    methods:{
    	handleTake(){
    	this.$emit('func',this.msg)
    	}
    }
}

父组件 test.vue

<template>
	<div>
	外围只可有一个div
	{{str}}
	<child @func="getChildMsg"></child>
	</div>
<template>
import child from './child.vue'

<script>
  export default {
    name: "test",
    //注册组件
     components:{
        child
    },
    data(){
    	return{
		    str:'hello wrold!'
    	}
    },
    methods:{
    	handleDemo(){
    		console.log(123);
    	},
    	getChildMsg(msg){
	    	//打印子组件传过来的值
    	    console.log(msg);
    	}
    },
    /**
    *vue生命周期
    * 1、beforeCreate 实例未创建，调用不到data数据
    * 2、created 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载
    * 3、beforeMount (实例创建完)el未挂载到实例上,获取的是vue启动前的最初DOM
    * 4、mounted (实例创建完)且el挂载到实例上后调用，页面首次进入执行只执行一次（经常用到）
    * 5、 beforeDestroy 实例销毁之前调用
    * 6、 destroyed 实例销毁之后调用
    * 7、beforeUpdate 获取数据更新前的原DOM
    * 8、updated 获取数据更新后的DOM
  */
    mounted(){
    
    }，
    //监听
    watch:{
	    //str改变后会执行
    	str(n,o){
    		this.handleDemo();
    	}
    }
}