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();
        }
    }
}