前言:

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

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

插槽slot

内容分发

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

简单测试

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

  • 定义待办事项

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 插槽
    // 待办事项组件 todo
    Vue.component("todo",{
    template:
    '<div>\
    <slot name="todo-title"></slot>\
    <ul>\
    <slot name="todo-items"></slot>\
    </ul>\
    </div>'
    });
  • 定义待办标题

    1
    2
    3
    4
    5
    // 待办标题 todo-title
    Vue.component("todo-title",{
    props: ['title'],
    template: '<div>{{title}}</div>'
    });
  • 定义待办内容

    1
    2
    3
    4
    5
    // 待办内容 todo-items
    Vue.component("todo-items",{
    props: ['item'],
    template: '<li>{{item}}</li>'
    });
  • 初始化数据

    1
    2
    3
    4
    5
    6
    7
    let vm = new Vue({
    el: "#app",
    data: {
    title: '书籍列表',
    todoItems: ['Java','JavaScript','Python']
    }
    });
  • 绑定到页面

    1
    2
    3
    4
    5
    6
    7
    <!--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('自定义事件名',参数),操作如下:

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    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);// 一次删除一个
    }
    }
    });
  2. 使用this.$emit自定以事件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    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);
    }
    }
    });
  3. 通过页面绑定方法

    1
    2
    3
    4
    5
    <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>
  4. 小结

    常用属性:

    • 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下载包非常慢的问题,可以选择使用淘宝提供的国内镜像源解决下载速度慢

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

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

安装vue-cli

1
2
3
4
5
6
7
npm install vue-cli -g
# 淘宝镜像安装
cnpm install vue-cli -g

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

创建一个vue-cli应用程序

  1. 创建一个Vue项目

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

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    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
  3. 初始化并运行

    1
    2
    3
    cd myvue
    npm install
    npm run dev

    漫长的安装过程

    安装好可能会提示需要修复,按提示修复即可,修复完成后运行npm run dev

    1
    2
    DONE  Compiled successfully in 2894ms                                               
    I Your application is running here: http://localhost:8080

    访问:http://localhost:8080

    查看我们搭建vue项目

    image-20220705160722935