【Vue】Vue基础教程(4)

前言：

本文内容：插槽slot、自定义事件内容分发、第一个vue-cli程序

推荐免费Vue基础教程视频：【狂神说Java】Vue最新快速上手教程通俗易懂_哔哩哔哩_bilibili

插槽slot

内容分发

在Vue.js中我们使用<slot>元素作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中。

简单测试

准备制作一个待办事项组件(todo)，该组件由待办标题(todo-title)和待办内容(todo-items)组成，但这三个组件又相互独立

定义待办事项

// 插槽
   // 待办事项组件 todo
   Vue.component("todo",{
       template:
           '<div>\
               <slot name="todo-title"></slot>\
               <ul>\
                   <slot name="todo-items"></slot>\
               </ul>\
           </div>'
   });

定义待办标题

// 待办标题 todo-title
    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    });

定义待办内容

// 待办内容 todo-items
    Vue.component("todo-items",{
        props: ['item'],
        template: '<li>{{item}}</li>'
    });

初始化数据

let vm = new Vue({
        el: "#app",
        data: {
            title: '书籍列表',
            todoItems: ['Java','JavaScript','Python']
        }
    });

绑定到页面

<!--view层 模板-->
<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
    </todo>
</div>

运行效果
1
2
3
4
书籍列表
Java
JavaScript
Python

自定义事件内容分发

通过以上代码不难发现，数据在Vue实例中，若删除操作要在组件中完成，那么组件如何才能删除Vue实例中的数据呢？此时就涉及到参数传递与事件分发，Vue为我们提供了自定义事件的功能很好帮助我们解决了这个问题；使用this.$emit('自定义事件名'，参数)，操作如下：

在Vue的实例中，增加了methods对象并定义了一个名为removeItems的方法

let vm = new Vue({
        el: "#app",
        data: {
            title: '书籍列表',
            todoItems: ['Java','JavaScript','Python']
        },
        methods: {
            removeItems: function(index){
                console.log("删除"+this.todoItems[index]);
                this.todoItems.splice(index,1);// 一次删除一个
            }
        }
    });

使用this.$emit自定以事件

Vue.component("todo-items",{
       props: ['item','index'],
       template: '<li>{{item}}<button @click="remove">删除</button></li>',
       methods: {
           remove: function(index){
               // alert('remove')
               // 自定义事件
               this.$emit('remove',index);
           }
       }
   });

通过页面绑定方法

<todo>
    <todo-title slot="todo-title" :title="title"></todo-title>
    <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                :item="item" v-bind:index="index" v-on:remove="removeItems(index)"></todo-items>
</todo>

小结

常用属性：
- v-if
- v-else-if
- v-else
- v-for
- v-on 绑定事件，简写@
- v-model数据双向绑定
- v-bind给组件绑定参数，简写:
组件化
- 组合组件slot插槽
- 组件内部绑定事件需要使用到this.$emit('事件名',参数)
- 计算属性的特色，缓存计算数据
遵循SoC关注度分离原则，Vue是视图框架，并不包含通信，我们一般使用Axios框架做异步通信

第一个vue-cli程序

什么是vue-cli

vue-cli是官方提供的一个脚手架，用于快速生成一个vue的项目模板

预先定义好的目录结构及基础代码，类似创建Maven项目时可选择创建一个父项目，就如同vue中的脚手架，便于更快速的开发；

主要功能：

统一的目录结构
本地调试
热部署
单元测试
集成打包上线

需要的环境

Node.js：Node.js 中文网 (nodejs.cn)

Git：Git - Downloads (git-scm.com)

node安装成功验证：

cmd中输入node -v打印版本号
cmd中输入npm -v打印版本号

npm就是软件包管理工具

[可选]安装Node.js淘宝镜像加速(cnpm)

国内会出现npm下载包非常慢的问题，可以选择使用淘宝提供的国内镜像源解决下载速度慢

# -g 全局安装
npm install cnpm -g
# 方法二
npm install --registry=https://registry.npm.taobao.org

默认安装位置：C:\Users\你的电脑用户名\AppData\Roaming\npm

安装vue-cli

npm install vue-cli -g
# 淘宝镜像安装
cnpm install vue-cli -g

# 测试是否安装成功
# 查看可以基于哪些模板创建vue应用程序，通常我们选择 webpack
vue list

创建一个vue-cli应用程序

创建一个Vue项目

创建一个基于webpack模板的vue应用程序

1 2	# 这里是基于webpack模板的vue应用程序 vue init webpack myvue

执行选择(基本都选择No，我们自己手动来配置)

D:\Project\project3\Vue>vue init webpack myvue

? Project name myvue
? Project description A Vue.js project
? Author Joker Daxiong
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) no

说明：

Project name：项目名称默认
Project description：项目描述，默认
Author：项目作者
Intall vue-router：是否安装vue-router，选择n不安装(手动添加)
Use ESLint to lint your code：是否使用ESLint做代码检查，选择n
Set up unit tests：单元测试，选择n
Setup e2e tests with Nightwatch：单元测试，选择n
Should we run npm install for you after the project has been created：创建完成后直接初始化，选择n

初始化并运行