Vue03

<div id="app">
    <addnum></addnum>
    <addnum></addnum>

</div>
<script>
    Vue.component("addnum",{
        template:‘<div><input type="text" v-model="num"><button @click="num+=1">点击</button></div>‘,
        data: function(){
            // 写在这里的数据只有当前组件可以使用
            return {
                num:1,
            }
        }
    });

    var vm = new Vue({
        el:"#app",
        // 这里写的数据是全局公用的，整个文件共享
        data:{

        }
    })
</script>

# settings.txt
root: C:\tool\nvm    [这里的目录地址是安装nvm时自己设置的地址,要根据实际修改]
path: C:\tool\nodejs
arch: 64
proxy: none
node_mirror: http://npm.taobao.org/mirrors/node/ 
npm_mirror: https://npm.taobao.org/mirrors/npm/

npm install -g 包名              # 安装模块   -g表示全局安装，如果没有-g，则表示在当前项目安装
npm list                        # 查看当前目录下已安装的node包
npm view 包名 engines            # 查看包所依赖的Node的版本 
npm outdated                    # 检查包是否已经过时，命令会列出所有已过时的包
npm update 包名                  # 更新node包
npm uninstall 包名               # 卸载node包
npm 命令 -h                      # 查看指定命令的帮助文档

npm install -g vue-cli

// 生成一个基于 webpack 模板的新项目
vue init webpack 项目名
例如：
vue init webpack myproject


// 启动开发服务器 ctrl+c 停止服务
cd myproject
npm run dev           # 运行这个命令就可以启动node提供的测试http服务器

src 主开发目录，要开发的单文件组件全部在这个目录下的components目录下

static 静态资源目录，所有的css，js文件放在这个文件夹

dist项目打包发布文件夹，最后要上线单文件项目文件都在这个文件夹中[后面打包项目,让项目中的vue组件经过编译变成js 代码以后,dist就出现了]

node_modules目录是node的包目录，

config是配置目录，

build是项目打包时依赖的目录

src/router 路由,后面需要我们在使用Router路由的时候,自己声明.

<template>  //template 编写html代码的地方
  <div id="Home">
    <span @click="num--" class="sub">-</span>
    <input type="text" size="1" v-model="num">
    <span @click="num++" class="add">+</span>
  </div>
</template>


<script> // script编写vue.js代码
  export default {
    name:"Home",
    data: function(){
      return {
        num:0,
      }
    }
  }
</script>

<style scoped> // style编写当前组件的样式代码 scoped以表示它的样式作用于当下的模块，很好的实现了样式私有化的目的，这是一个非常好的机制。
  .sub,.add{
    border: 1px solid red;
    padding: 4px 7px;
  }
</style>

<template>
  <div id="app">
   <Home></Home>
  </div>
</template>

<script>
import Home from ‘./components/Home‘
  var vm = new Vue({
        el:"#app",
        data:{
        components: {
            Home,
        },   
    })
</script>
<style scoped>
</style>

//  组件中代码必须写在同一个标签中(被包裹在同一个标签内)
<template>
    <div id="menu">
      <span>{{msg}}</span>
      <div>hello</div>
  </div>
</template>

<script>
  export default {
    name:"Menu",
    data: function(){
      return {
        msg:"这是Menu组件里面的菜单",
      }
    }
  }
</script>

<Menu :mynum="num" title="home里面写的数据"/>

# 上面表示在父组件调用Menu子组件的时候传递了2个数据：
  如果要传递变量[变量可以各种类型的数据]，属性名左边必须加上冒号:，同时，属性名是自定义的，会在子组件中使用。
  如果要传递普通字符串数据，则不需要加上冒号:

<script>
  export default {
    name:"Menu",
    props:["mynum","title"],
    data: function(){
      return {
        msg:"这是Menu组件里面的菜单",
      }
    }
  }
</script>

// 上面 props属性中表示接受了两个数据。

<template>
    <div id="menu">
      <span>{{msg}}，{{title}}</span>
      <div>hello，{{mynum}}</div>
  </div>
</template>

使用父组件传递数据给子组件时, 注意一下几点:

1. 传递数据是变量,则需要在属性左边添加冒号.

    传递数据是变量,这种数据称之为"动态数据传递"

    传递数据不是变量,这种数据称之为"静态数据传递"

2. 父组件中修改了数据,在子组件中会被同步修改,但是,子组件中的数据修改了,是不是影响到父组件中的数据.

    这种情况,在开发时,也被称为"单向数据流"

npm install axios

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue‘
import App from ‘./App‘ // 这里表示从别的目录下导入 单文件组件
import axios from ‘axios‘; // 从node_modules目录中导入包
Vue.config.productionTip = false

Vue.prototype.$axios = axios; // 把对象挂载vue中

/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  components: { App },
  template: ‘<App/>‘
});

<script>
  export default{
    ...
    
    methods:{
      get_data:function(){
         // 使用axios请求数据
        this.$axios.get("http://wthrcdn.etouch.cn/weather_mini?city=深圳").then((response)=>{
            console.log(response);
        }).catch(error=>{
            console.log(error);
        })
      }
    }
  }
</script>

 npm install --save vue-router

import Vue from ‘vue‘
import Router from ‘vue-router‘

// 导入路由中需要使用的组件
// @ --> 默认是从 src 目录开始查找，也可以自己配置一些其它路径或者符号
import Home from ‘@/components/Home‘
import AddNum from ‘@/components/AddNum‘
import HelloWorld from ‘@/components/HelloWorld‘

Vue.use(Router);

export default new Router({
  routes:[
    // 路由信息
    {
      path:"/",
      name: "Home",
      component: Home
    },
    {
      path:"/num",
      name: "AddNum",
      component: AddNum
    },
    {
      path:"/hw",
      name: "HelloWorld",
      component: HelloWorld
    },
  ]
})

<router-link to="/">站点首页</router-link>
<router-link to="/num">AddNum</router-link>

// name对应的是路由中定义的一个path对应的name属性
    <router-link :to=‘{name:"UpDate",params:{code:item.code}}‘>

// 当前页面重新加载
this.$router.go(‘/user‘);

// 跳转到另外一个路由
this.$router.push({path:‘/user‘});

// 获取当前的路由地址
var sPath = this.$route.path;