Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说Vue基础（3）,希望能够帮助你!!!。

1. Vue中组件(Component)

1.1 组件作用

用来减少Vue实例对象中代码量，日后在使用Vue开发过程中，可以根据 不能业务功能将页面中划分不同的多个组件，然后由多个组件去完成整个页面的布局，便于日后使用Vue进行开发时页面管理,方便开发人员维护。

1.2 组件使用

1.2.1 全局组件注册

说明:全局组件注册给Vue实例,日后可以在任意Vue实例的范围内使用该组件

//1.开发全局组件
Vue.component('login',{
    template:'<div><h1>用户登录</h1></div>'
});
//2.使用全局组件  在Vue实例范围内
<login></login>  

# 注意:
    1.Vue.component用来开发全局组件 
        参数1: 组件的名称  参数2: 组件配置{}  
        template:''用来书写组件的html代码template中必须有且只有一个root元素.
    2.使用时需要在Vue的作用范围内根据组件名使用全局组件
    3.如果在注册组件过程中使用 驼峰命名组件的方式 在使用组件时 必须将驼峰的所有单词小写加入-线进行使用

1.2.2 局部组件注册

说明:通过将组件注册给对应Vue实例中一个components属性来完成组件注册,这种方式不会对Vue实例造成累加

(1)第一种开发方式

//局部组件登录模板声明
let login ={   //具体局部组件名称
    template:'<div><h2>用户登录</h2></div>'
};

const app = new Vue({
    el: "#app",
    data: {},
    methods: {},
    components:{  //用来注册局部组件
        login:login  //注册局部组件
    }
});

//局部组件使用 在Vue实例范围内
<login></login>

(2)第二种开发方式

//1.声明局部组件模板  template 标签 注意:在Vue实例作用范围外声明
<template id="loginTemplate">
    <h1>用户登录</h1>
</template>

//2.定义变量用来保存模板配置对象
let login ={   //具体局部组件名称
    template:'#loginTemplate'  //使用自定义template标签选择器即可
};

//3.注册组件    
const app = new Vue({
    el: "#app",
    data: {},
    methods: {},
    components:{  //用来注册局部组件
        login:login  //注册局部组件
    }
});

 //4.局部组件使用 在Vue实例范围内
<login></login>

1.3 Prop的使用

作用:props用来给组件传递相应静态数据或者是动态数据的

1.3.1 通过在组件上声明静态数据传递给组件内部

//1.声明组件模板配置对象
let login = {
    template:"<div><h1>欢迎:{{ userName }} 年龄:{{ age }}</h1></div>",
    props:['userName','age']  //props作用 用来接收使用组件时通过组件标签传递的数据
}

//2.注册组件
const app = new Vue({
    el: "#app",
    data: {},
    methods: {},
    components:{
        login //组件注册
    }
});

//3.通过组件完成数据传递
<login user-name="小黑" age="23"></login>

# 总结:
    1.使用组件时可以在组件上定义多个属性以及对应数据
    2.在组件内部可以使用props数组生命多个定义在组件上的属性名 日后可以在组件中通过{{ 属性名 }} 方式获取组件中属性值

1.3.2 通过在组件上声明动态数据传递给组件内部

//1.声明组件模板对象
const login = {
    template:'<div><h2>欢迎: {{ name }} 年龄:{{ age }}</h2></div>',
    props:['name','age']
}
 
//2.注册局部组件
const app = new Vue({
    el: "#app",
    data: {
        username:"小黑黑",
        age:23
    },
    methods: {},
    components:{
        login //注册组件
    }
});

//3.使用组件
<login :name="username" :age="age"></login>  
//使用v-bind形式将数据绑定Vue实例中data属性,日后data属性发生变化,组件内部数据跟着变化

1.3.3 prop的单向数据流

单向数据流:所有的 prop 都使得其父子 prop 之间形成了一个**单向下行绑定**：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。---摘自官网

1.4 组件中定义数据和事件使用

(1). 组件中定义属于组件的数据

//组件声明的配置对象
const login = {
    template:'<div><h1>{{ msg }} Vue3.0欢迎您的加入！</h1><ul><li v-for="item,index in lists">{{ index }}{{ item }}</li></ul></div>',
    data(){   //使用data函数方式定义组件的数据   在templatehtml代码中通过插值表达式直接获取
        return {
            msg:"hello",
            lists:['java','spring','springboot']
        }//组件自己内部数据
    }
}

(2)).组件中事件定义

const login={
    template:'<div><input type="button" value="点我触发组件中事件" @click="change"></div>',
    data(){
        return {
            name:'小黑'
        };
    },
    methods:{
        change(){
            alert(this.name)
            alert('触发事件');
        }
    }
}

# 总结    
    1.组件中定义事件和直接在Vue中定义事件基本一致 直接在组件内部对应的html代码上加入@事件名=函数名方式即可
    2.在组件内部使用methods属性用来定义对应的事件函数即可,事件函数中this 指向的是当前组件的实例

1.5 向子组件中传递事件并在子组件中调用改事件

在子组件中调用传递过来的相关事件必须使用 this.$emit('函数名') 方式调用

//1.声明组件
const login = {
    template:"<div><h1>Vue3.0欢迎您的加入！ {{ uname }}</h1> <input type='button' value='点我' @click='change'></div>",
    data(){
        return {
            uname:this.name
        }
    },
    props:['name'],
    methods:{
        change(){
            //调用vue实例中函数
            this.$emit('aaa');  //调用组件传递过来的其他函数时需要使用 this.$emit('函数名调用')
        }
    }
}
    
 //2.注册组件
const app = new Vue({
    el: "#app",
    data: {
        username:"小黑"
    },
    methods: {
        findAll(){  //一个事件函数  将这个函数传递给子组件
            alert('Vue 实例中定义函数');
        }
    },
    components:{
        login,//组件的注册
    }
});

//3.使用组件
<login  @find="findAll"></login>    //=====> 在组件内部使用  this.$emit('find')

---

2.Vue中路由(VueRouter)

2.1 路由

路由:根据请求的路径按照一定的路由规则进行请求的转发从而帮助我们实现统一请求的管理

2.2 作用

用来在vue中实现组件之间的动态切换

2.3 使用路由

(1)引入路由

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  //vue 路由js

(2)创建组件对象

//声明组件模板
const login = {
  template:'<h1>登录</h1>'
};

const register = {
  template:'<h1>注册</h1>'
};

(3)定义路由对象的规则

 //创建路由对象
const router = new VueRouter({
  routes:[
    {path:'/login',component:login},   //path: 路由的路径  component:路径对应的组件
    {path:'/register',component:register}
  ]
});

(4)将路由对象注册到Vue实例

const app = new Vue({
  el: "#app",
  data: {
    username:"小黑",
  },
  methods: {},
  router:router   //设置路由对象
});

(5)在页面中显示路由的组件

<!--显示路由的组件-->
<router-view></router-view>

(6)根据连接切换路由

<a href="#/login">点我登录</a>
<a href="#/register">点我注册</a>

2.4 router-link使用

作用:用来替换我们在切换路由时使用a标签切换路由

好处:就是可以自动给路由路径加入#不需要手动加入

<router-link to="/login" tag="button">我要登录</router-link>
<router-link to="/register" tag="button">点我注册</router-link>

# 总结:
    1.router-link 用来替换使用a标签实现路由切换 好处是不需要书写#号直接书写路由路径
    2.router-link to属性用来书写路由路径   tag属性:用来将router-link渲染成指定的标签

2.5 默认路由

作用:用来在第一次进入界面时显示一个默认的组件

const router = new VueRouter({
  routes:[
    //{ path:'/',component:login},
    { path:'/',redirect:'/login'},  //redirect: 用来当访问的是默认路由 "/" 时 跳转到指定的路由展示  推荐使用
    { path:'/login', component:login},
    { path:'/register', component:register},
  ]
});

2.6 路由中参数传递

(1)第一种方式传递参数 传统方式

• 通过?号形式拼接参数

 <router-link to="/login?id=21&name=zhangsan">我要登录</router-link>

• 组件中获取参数

const login = {
  template:'<h1>用户登录</h1>',
  data(){return {}},
  methods:{},
  created(){
    console.log(this.$route.query.id+"==>"+this.$route.query.name);
  }
};

(2)第二种方式传递参数 restful

• 通过使用路径方式传递参数

<router-link to="/register/24/张三">我要注册</router-link>
var router = new VueRouter({
  routes:[
    {path:'/register/:id/:name',component:register}//定义路径中获取对应参数
  ]
});

• 组件中获取参数

const register = {
  template:'<h1>用户注册{{ $route.params.name }}</h1>',
  created(){
    console.log("注册组件中id: "+this.$route.params.id+this.$route.params.name);
  }
};

2.7 嵌套路由

(1)声明最外层和内层路由

<template id="product">
    <div>
        <h1>商品管理</h1>
        <router-link to="/product/add">商品添加</router-link>
        <router-link to="/product/edit">商品编辑</router-link>
        <router-view></router-view>
    </div>
</template>

//声明组件模板
const product={
  template:'#product'
};

const add = {
  template:'<h4>商品添加</h4>'
};

const edit = {
  template:'<h4>商品编辑</h4>'
};

(2)创建路由对象含有嵌套路由

const router = new VueRouter({
    routes:[
        {
            path:'/product',
            component:product,
            children:[
                {path:'add',component: add},
                {path:'edit',component: edit},
            ]
        },
    ]
});

(3)注册路由对象

const app = new Vue({
    el: "#app",
    data: {},
    methods: {},
    router,//定义路由对象
});

(4)测试路由

<router-link to="/product">商品管理</router-link>
<router-view></router-view>

---

3. Vue CLI 脚手架

3.1 什么是CLI

命令行界面（英语：command-line interface，缩写：CLI）是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。也有人称之为字符用户界面（CUI）

3.2 什么是Vue CLI

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。使用Vue 脚手架之后我们开发的页面将是一个完整系统(项目)。

3.3 Vue CLI优势

• 通过 vue-cli 搭建交互式的项目脚手架。bootstrap css js jquery js 通过执行命令方式下载相关依赖
• 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发 vue页面 vuejs 、 vuerouter 、 axios(一条命令)
• 一个运行时依赖 (@vue/cli-service)，该依赖：可升级；一条命令基于 webpack 构建，并带有合理的默认配置； webpack 项目打包方式 编译好的项目源码===>部署到服务器上直接使用可以通过项目内的配置文件进行配置； 默认配置文件,通过修改默认配置文件达到自己想要的项目环境 可以通过插件进行扩展。 vue v-charts elementui
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。Nodejs(tomcat) Vue VueRouter webpack yarn
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面

3.4 Vue CLI安装

1. 环境准备

#1.下载nodejs
    http://nodejs.cn/download/
    windows系统:   .msi  安装包(exe)指定安装位置   .zip(压缩包)直接解压缩指定目录
    mac os 系统:   .pkg  安装包格式自动配置环境变量  .tar.gz(压缩包)解压缩安装到指定名

#2.配置nodejs环境变量
    windows系统:
    1.计算上右键属性---->  高级属性 ---->环境变量 添加如下配置:
        NODE_HOME=  nodejs安装目录
        PATH    = xxxx;%NODE_HOME%
    2.macos 系统
        推荐使用.pkg安装直接配置node环境
 
#3.验证nodejs环境是否成功
        node -v 
        
#4.npm介绍
    node package mangager    nodejs包管理工具       前端主流技术  npm 进行统一管理
        maven 管理java后端依赖   远程仓库(中心仓库)      阿里云镜像
        npm   管理前端系统依赖    远程仓库(中心仓库)      配置淘宝镜像
        
#5.配置淘宝镜像
      npm config set registry https://registry.npm.taobao.org
      npm config get registry

#6.配置npm下载依赖位置
     windows:
        npm config set cache "D:\nodereps\npm-cache"
        npm config set prefix "D:\nodereps\npm_global"
     mac os:
        npm config set cache "/Users/xiaohei/dev/nodereps"
        npm config set prefix "/Users/xiaohei/dev/nodereps"

#7.验证nodejs环境配置
    npm config ls
    
    ; userconfig /Users/xiaohei/.npmrc
    cache = "/Users/xiaohei/dev/nodereps"
    prefix = "/Users/xiaohei/dev/nodereps"
    registry = "https://registry.npm.taobao.org/"

2.安装脚手架

#0.卸载脚手架
    npm uninstall -g @vue/cli  //卸载3.x版本脚手架
    npm uninstall -g vue-cli  //卸载2.x版本脚手架

#1.Vue Cli官方网站
        https://cli.vuejs.org/zh/guide/

#2.安装vue Cli
        npm install -g vue-cli

3.第一个vue脚手架项目

# 1.创建vue脚手架第一个项目
    vue init webpack 项目名
# 2.创建第一个项目
    hello   ------------->项目名
    -build  ------------->用来使用webpack打包使用build依赖
    -config ------------->用来做整个项目配置目录
    -node_modules  ------>用来管理项目中使用依赖
    -src           ------>用来书写vue的源代码[重点]
      +assets      ------>用来存放静态资源 [重点]
      components   ------>用来书写Vue组件 [重点]
      router       ------>用来配置项目中路由[重点]
      App.vue      ------>项目中根组件[重点]
      main.js      ------>项目中主入口[重点]
    -static        ------>其它静态
    -.babelrc      ------> 将es6语法转为es5运行
    -.editorconfig ------> 项目编辑配置
    -.gitignore    ------> git版本控制忽略文件
    -.postcssrc.js ------> 源码相关js
    -index.html    ------> 项目主页
    -package.json  ------> 类似与pom.xml 依赖管理  jquery 不建议手动修改
    -package-lock.json ----> 对package.json加锁
    -README.md         ----> 项目说明文件

# 3.如何运行在项目的根目录中执行
        npm start/ npm run dev 运行前端系统

# 4.如何访问项目
        http://localhost:8081    

# 5.Vue Cli中项目开发方式
     注意: 一切皆组件   一个组件中   js代码  html代码  css样式
     
 1. VueCli开发方式是在项目中开发一个一个组件对应一个业务功能模块,日后可以将多个组件组合到一起形成一个前端系统
 2. 日后在使用vue Cli进行开发时不再书写html,编写的是一个个组件(组件后缀.vue结尾的文件),日后打包时vue cli会将组件编译成运行的html文件    

# Vue基础示例讲解持续中，关注我一下呦.

今天的分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。