vue初级知识总结

从我第一篇博客的搭建环境开始,就开始学习vue了,一直想将这些基本知识点整理出来,但是一直不知如何下手,今天刚好实战了两个小demo,所以就想趁这机会将以前的一起整理出来,这是vue最基础的知识,我有附加代码,方便阅读与学习,近期还会更新我实战的两个demo ,我保证我不会拖太久的。相信我啦~

vue初级知识总结

一、初始化vue项目

相信大家对vue项目的初始化已经很熟练了, vue 的官网有给出安装的步骤,如果你的电脑上已经安有node,webpack和淘宝镜像,那么你只需按官网的安装步骤进行项目的安装即可。

vue初级知识总结

如果你的电脑尚未安装以上工具,那建议你看下我的第一篇博客,里面有详细的介绍呢。

二、vue的结构及生命周期

1、vue结构

app.vue是vue组件树上的最顶层

index.html是页面,vue的所有组件都会通过main.js挂载到html上才会显示

main.js中会引入需要的依赖

index.html

| --->main.js通过一个vue实例(el:"#app",此处的#app是连接index.html中的id)将所有页面挂载至页面中

app.vue

|

所有页面

2、vue的生命周期、

vue初级知识总结

三、vue的基础

1.组件的创建与使用:

新建一个.vue文件作为组件,写入组件内容,template里只可以存在一个根容器。

在app.vue文件里引入组件:import  组件名 from '组件文件的路径名',components对象里注册组件名,dom页面上加入组件渲染<组件名></组件名>

 

vue初级知识总结

vue初级知识总结


 

2、组件之间的交互(重点) a、父组件向子组件传递数据:props,插槽(slot) 从父组件向子组件传递数据

vue初级知识总结

在子组件里声明一个props ,接受父组件传递的数据

vue初级知识总结

插槽的使用: 子组件中:放一个<slot></slot>接收

vue初级知识总结

父组件:在子组件的dom渲染处通过标签传递值

vue初级知识总结

b、子组件向父组件传递数据:emit 子组件向父组件传递数据:

vue初级知识总结

 

父组件接受数据:

vue初级知识总结

vue初级知识总结

3、vue的指令

a>.vue自带指令介绍

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpppyf.html