第95天学习打卡（Vue vue自定义事件小结第一个vue-cli项目 webpack）

补充的知识点Javascript

push()向Array的末尾添加若干个元素，pop()则把Array的最后一个元素删除掉;

var arr = [1,2];
arr.push('A','B');//返回Array新的长度：4
arr;//[1, 2, 'A', 'B']
arr.pop();//pop()返回'B'
arr;//[1 , 2, 'A']
arr.pop(); arr.pop(); arr.pop();//连续pop 3次
arr;//[]
arr.pop;//空数组继续pop不会报错，而是返回undefined

如果要往Array的头部添加若干元素，使用unshift()方法，shift()方法则把Array发第一个元素删掉；

var arr = [1, 2];
arr.unshift('A','B');//返回Array新的长度：4
arr;//['A', 'B', 1, 2]
arr.shift();arr.shift(); arr.shift();//连续shift3次
arr;//[]
arr.shift();空数组继续shift不会报错，而是返回undefined
arr;//[]

sort()可以对当前Array进行排序，它会直接修改当前Array的元素位置，直接调用时，按照默认排序。

var arr = ['B', 'C','A'];
arr.sort();
arr;//['A', 'B','C']

reverse()把整个Array的元素进行反转

var arr = ['one', 'two', 'three'];
arr.reverse();
arr;//['three', 'two', 'one']

splice()方法是修改Array的“万能方法”，它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素：

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite','Oracle'];
//从索引2开始删除3个元素，然后再添加两个元素
arr.splice(2,3,'Google','Facebook');//返回删除元素['Yahoo','AOL','Excite']
arr;//['Microsoft','Apple','Google','Facebook','Oracle']
//只删除不添加
arr.splice(2,2); //['Google','Facebook']
arr;//['Microsoft','Apple','Oracle']
//只添加，不删除
arr.splice(2,0,'Google', 'Facebook');//返回[]，因为没有删除任何元素
arr;//['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

Vue自定义事件

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--vue层 模板-->
<div id="app">
    <todo>
<!--        v-on 绑定事件 v-on:remove="removeItems"  remove 为自定义事件   :key="index"  这个可以不要 也能实现删除功能-->
        <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="removeItem(index)" :key="index"></todo-items>
    </todo>

</div>
<!--1.导入Vue.js  new一个vue对象  绑定一个元素 放数据   通过模板取出来   数组[]表示   对象{}表示-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
<!-- slot插槽   动态插槽-->
Vue.component("todo",{
    template:
    '<div>\
    <slot name="todo-title"></slot>\
    <ul>\
        <slot name="todo-items"></slot>\
    </ul>\
    </div>'
});
Vue.component("todo-title",{
    props: ['title'],
    template:'<div>{{title}}</div>'

});
Vue.component("todo-items",{
    props: ['item','index'],
    //remove移除方法  只能调当前组件todo-items的方法
    template:'<li>{{index}}------{{item}} <button @click="remove">删除</button> </li>',
    methods:{
        //当前组件绑定当前事件  上面的remove  绑定下面的remove   this.$emit事件分发
        remove:function (index) {
           this.$emit('remove',index);
        }
    }
});
    //method 控制前端的操作   与前端交互的是data
    var vm = new Vue({
        el:"#app",
        data:{
            title:"秦老师列表",
            todoItems:['狂神说JAVA',"狂神说前端","狂神说LINUX"]
        },
        methods: {
            removeItem:function (index){
                console.log("删除了" + this.todoItems[index] + "OK");
                this.todoItems.splice(index,1);//一次删除一个元素

            }
        }


    });
</script>
</body>
</html>

Vue入门小结

核心：数据驱动，组件化

优点：借鉴了AngulaJS的模块化开发和React的虚拟Dom,虚拟Dom就是把Dom操作放到内存中执行

常用属性：

v-if
v-else-if
v-else
v-for
v-on 绑定事件，简写@
v-model 数据双向绑定
v-bind给组件绑定参数简写 :

组件化：

组合组件slot插槽
组件内部绑定事件需要使用到this.$("事件名",参数);
计算属性的特色，缓存计算数据

遵循SOC关注度分离原则，VUE是纯粹的视图框架，并不包含比如Ajax之类的通信功能，为了解决通信问题，我们需要使用Axios框架做异步通信。

说明

VUE的开发都是要基于NodeJS,实际开发采用vue-cli脚手架开发，vue-router路由，vuex做状态管理。vue ui界面我们一般使用ElementUI(饿了么出品)，或者ICE(阿里巴巴出品)来快速搭建前端项目。

Vue: 第一个vue-cli 项目

什么是vue-cli

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

预先定义好的目录结构及基础代码，就好比在创建maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，使我们的开发更加的快速。

主要功能

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

需要安装的环境：

Node.js :https://nodejs.org/en/download/

确认nodejs安装成功

cmd下输入node -v 查看是否能够正确打印出版本号即可！
cmd下输入 npm -v 查看是否能够正确打印出版本号即可

这个npm就是一个阮家安包管理工具，就和linux下的apt软件安装差不多！

安装Node.js淘宝镜像加速器（cnpn）

# -g 就是全局安装
npm install cnpm -g
# 或使用如下语句解决 npm 速度慢的问题
npm install --registry=https://registry.npm.taobao.org

虽然安装了cnpm,但是尽量少用

安装的位置：C:\Users\HP\AppData\Roaming\npm

安装vue-cli

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

C:\Users\HP\Desktop

一路选择NO即可

说明

Project name:项目名称，默认回车即可
Project description:项目描述，默认回车即可
Author:项目作者，默认回车即可
Install vue-router: 是否安装vue-router, 选择n不安装（后期需要再手动添加）
Use ESLint to line 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,我们手动执行；运行结果！

创建的myvue地址：C:\Windows\System32

常见DOS命令

A: d: 回车盘符切换

B:dir(directory):列出当前目录下的文件及文件夹

C: cd(change directory) 改变指定目录（进入指定目录）注意：跨盘进入需要加一个/d参数

D:cd.. : 返回到上一级目录回退到多级目录 cd ../../

E: cd: 退回到根目录

F:cls :(clear screen) 清屏

G: exit :退回到dos命令行

h:ipconfig /all 查看本机IP网卡物理地址等信息

i:calc 打开计算器

n: mspaint 打开画板

k: notepad 打开记事本

j: hostname 获取计算机名称

ping www.baidu.com

md(make directory) :创建目录

rd(remove directory):删除目录

我们可以使用cd>a.txt, type nul>a.txt, copy nul>a.txt三种方式创建空文件：

del(delete): 删除文件，删除一堆后缀名一样的文件*.txt

删除带内容的文件夹不能直接删除所以加参数如下：

rd + /s 文件夹名称（询问是否删除）

rd + /q + /s 文件夹名称（直接删除）

运行Vue的指令

这里我的不设置也可以运行这个文件得点开桌面图标的IDEA的文件所在位置里面的这个文件进行设置然后重启

Vue :Webpack:

什么是Webpack

本质上， webpack是现代JavaScript应用程序的静态模块打包器（module bundler）。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个boundle

webpack是当下最热门的前端资源模块化管理和打包工具，它可以将松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过loader转换，任何形式的资源都可以当做模块，比如CommonsJS、AMD、ES6、CSS、JSON、CoffeeScript, LESS等

前端开发和其他开发工作的主要区别，首先是前端基于多语言、多层次的编码和组织工作，其次前端产品的交付基于浏览器的，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统。

模块化的演进

Script标签：

<script src = "module1.js"></script>
<script src = "module2.js"></script>
<script src = "module3.js"></script>
<script src = "module4.js"></script>

这是最原始的JavaScript文件加载方式，如果把每一个文件看做是一个模块，那么他们的接口通常是暴露在全局作用域下，也就是定义在window对象中，不同的模块的调用都是一个作用域。

这种原始的加载方式暴露了一些显而易见的弊端：

全局作用域下容易造成变量冲突
文件只能按照

posted @ 2021-04-13 21:47 豆豆tj 阅读(141) 评论(0) 收藏举报

刷新页面返回顶部

豆豆tj

第95天学习打卡（Vue vue自定义事件 小结 第一个vue-cli项目 webpack）