VUE笔记1

首先先创建一个vue文件
VUE笔记1_第1张图片
VUE笔记1_第2张图片
VUE笔记1_第3张图片
想要创建子组件就在components中创建,里面分为三个部分 template script style。其中第一个是用来写内容(也就是div)的,第二个是用来定义脚本语法的。

props是子组件访问父组件数据(父向子传递数据)的唯一接口。创建子组件时这个export default一定要写,它是export 用来导出模块,Vue 的单文件组件通常需要导出一个对象,这个对象是 Vue 实例的选项对象,以便于在其它地方可以使用 import 引入。
在这里插入图片描述
父组件传下来的值由menus来接收
用for循环来遍历menus的数据
在这里插入图片描述
在父组件中添加一个data方法中加入数组的数据。
VUE笔记1_第4张图片
父组件用子子组件一定要导入并且注册
VUE笔记1_第5张图片
在div中写进子组件top-menus
在这里插入图片描述
给添加点击效果
首先在子组件中增加一个数据
VUE笔记1_第6张图片
然后在div中添加点击事件,创建一个clickHandler(index)函数用来接收点击到哪一个。中判断menuIdx是否等于点击的对象,是的话执行menu-active的css样式,不是的话执行menuss样式。
VUE笔记1_第7张图片
clickHandler函数的写法
在这里插入图片描述
子组件传给父组件,在子组件中的点击事件中用emit创建一个函数MenuClike,触发当前实例上的事件。
VUE笔记1_第8张图片
在父组件引入的子组件中写入该方法
在这里插入图片描述
然后在父组件中写该方法的内容
VUE笔记1_第9张图片
VUE笔记1_第10张图片
VUE笔记1_第11张图片
这样就完成了子向父组件传递值
VUE笔记1_第12张图片
如果需要引入css样式的话在main.js中引入 这个iconfont是阿里巴巴的图片样式
VUE笔记1_第13张图片

这样就是插入一张房子的图片这样就是插入一张房子的图片
VUE笔记1_第14张图片
:is的作用 (后面写组件名)
在这里插入图片描述
VUE笔记1_第15张图片

你可能感兴趣的:(计算机)