本文详细介绍了Vue项目的启动、组件定义与注册、变量的使用、路由配置及子路由应用，重点讲解了如何通过v-bind、$emit和sync实现父子组件间的数据同步，以及使用弹框组件时的数据清空策略。
目录
第1部分:启动项目
Vue前段项目启动：npm run serve
第2部分:组件
2.1 定义组件component
- 一个页面 模块/组件（json传值）：html+css+js
组件构成：
<template>
<div /> :html
</template>
<script />:动态数据 js
<style scoped lang=“less”>：css
▶Scoped:下面的选择器（标签）只在当前组件生效。——-避免：重名选择器，影响其他组件样式
▶lang=“less”：.父选择器 .子选择器=.父选择器{.子选择器}
定义样式变量
- 该组件(含html/js)可单独作为一个js页面被引入
<script>
Const component = {
Name:
Template:
Data(){
return()}
}
</script>
属性Template（等于html） 标签与动态数据拼接,不便查看
<template>标签下只允许写一个<div>标签，在<div>标签下可以多个子标签
2.2 注册组件components
<script>
Const component = {
Name:
Template:
Data(){
return()}
}
components:{
导入名/标签名1: component
导出名2（key：value即导入导出name一样，只写一遍）
}
</ script>
2.3 独立标签（呈现页面）
<body>
<标签名1></标签名1>
</body>
第2部分:变量
2.1 return变量
定义变量，但没return值，就不展示页面（整体报错）
2.1 导出变量（别人引用）
<script>
Export default {
数据名：数据值（json）
}
2.2 导入变量（必须已导出）
格式: Import 自定义变量名 from “路径（1.后缀名可忽略2.若组件名index.vue可省略文件名，地址到上一级目录即可）”
第3部分:路由
3.1 路由
3.1.1 原因
Vue单页开发（只有一个页面 index.html）——路由(将其他页面都作为组件/模块：导入)：根据不同地址，浏览器中显示不同模块（页面）
@ =&#
最低0.47元/天 解锁文章
扫一扫
1993
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
