Vue

组件components

1. 组件:一个小的功能分区
2. 意义：复杂项目拆分简单的组件，让团队开发更高效
3. 组件是可以重复使用的模块
4. 组件注册

    components:{steper}

5. 组件的使用

    <steper></steper>

组件的参数传递

父传子

将父组件的值逐渐传递之子组件

子传父

子组件的值发生变化，需要通知父组件进行修改

插槽

嵌套内容

    <step>
     内容
    </step>

可以通过slot标签获取组件的嵌套内容

    <slot></slot>

命名插槽

实例:

    <step> 
    <template v-slot:pre>
            插槽内容
    </template>
    </step>

插槽的作用域

实例:

    <step>
        <template v-slot:default="scope">
           {{scope.item}}
        </template>
    </step>

动画

进入整个过程:.v-enter-active

1. 进入开始状态:.v-enter-from
2. 进入结束状态:.v-enter-to

离开过程:(类名)-leave-active

1. 离开开始状态:.v-leave-from
2. 离开结束状态:.v-leave-to

transition

1. 模式:mode
2. 名字:name
3. 自定义进入class名称:enter-active-class
4. 自定义离开class名称:leave-active-class 写在css中,如:

    <style type="text/css">
	.slide-enter-active,.slide-leave-active {
            transition: all ease 1s;
	}
	.slide-enter-from {
            opacity: 0;
            transform: translate(0,-80px);
	}
	.slide-enter-to {
            opacity: 1;
            transform: translate(0,0);
        }
	.slide-leave-active {
            position: absolute;
	}
			
	.slide-leave-from {
            opacity: 1;
            transform: translate(0,0);
	}
			
	.slide-leave-to {
            opacity: 0;
            transform: translate(-100%,0);
	}
	.slide-move{
            transition: all ease 1s; 
	}
    </style>

transition-grop

1. 包裹标签名:tag
2. 正在移动的的元素:.v-move

节点引用ref

为input标签添加ref

    <input ref="inp">this.$refs.inp

访问节点

	<btn ref="btn">
        this.$refs.btn.add()// 访问组件的方法
        this.$refs.btn.num //访问组件的属性

cmd的小秘密

1. win+R打开运行
2. 输入cmd打开命令窗口
3. 切换盘符:d：f：
4. 切换目录:cd 目录地址
5. 创建目录:md 目录地址
6. 删除目录:rd 目录地址 rd /s /q 静默删除目录与目录内容
7. / 根目录./ 当前目录../ 上一层目录
8. help 查看所有命令 help 命令 查看当前命令用法
9. 在cd进入文件夹时可以使用tab键提示
10. 上箭头可以调出上次输入的命令
11. ipconfig 查看ip
12. ping 主机/ip 查看与别的主机与ip的联通状态
13. cls 清屏
14. calc 打开计算器(其实在win+R后输入就可以掉出)
15. ctrl+c 结束当前运行命令

创建vue3项目

1. 在命令窗口输入vue -V查看vue版本,看看是否有版本提示信息,如果没有,输入命令:npm i @vue/cli -g就可以了
2. 使用cd /进入根目录,再输入vue create myv3,myv3为自定义文件名
3. 回车后通过上下键选择最后一项,译文是手动设置
4. 再次回车后,上下键调节,空格键确认取消,其中的Linter/Formatter为标准语言格式,工作中必选
5. 选择3,回车
6. 输入n,不使用历史记录
7. 回车到下面页面,输入n,回车,不存入预设
8. 出现下方页面,再依次运行cd myv3 和 npm run serve
9. 可以得到下方页面,在谷歌浏览器中打开网址,第二张图为创建成功 图片:

总结

1. 主要学习了组件、插槽、动画、节点及vue项目的创建
2. 随着对Vue一步一步深入的学习,我越来越有信心了