【Vue】组件里面的data为什么必须是一个函数?vue的css作用域中scoped作用和原理分别是什么?组件的自定义事件触发条件是什么?组件之间传值

目录

Vue cli工具安装

vue cli脚手架使用

 脚手架目录介绍:

组件基本使用

组件的三个组成部分

组件里面的data为什么必须是一个函数?

vue的css作用域中scoped作用和原理分别是什么?

注册局部组件

子组件部分:组件名:goods.vue

父组件引入

注册全局组件

全局组件:组件名:mybutton.vue

在main.js中实现全局引入

组件的name属性

vue组件传值

父组件传值子组件(props)

父组件部分传值

子组件通过props获取父组件传输的数据

单向数据流

子组件传递数据给父组件($emit)

子组件传递数据$emit

父组件接收数据

组件的自定义事件触发条件是什么?

---

Vue cli工具安装

打开cmd输入以下代码:

npm install -g @vue/cli

等待安装

安装好后输入

vue -V

出现版本号则表示安装成功

vue cli脚手架使用

在vs code中想要创建的文件右键打开终端cmd

创建vue项目输入以下代码:

vue create 项目名称  

注意项目名称不能为中文和大写字母

然后选择创建vue2或者vue3

 脚手架目录介绍:

 vuecil-demo         # 项目目录
    ├── node_modules # 项目依赖的第三方包
    ├── public       # 静态文件目录
      ├── favicon.ico# 浏览器小图标
      └── index.html # 单页面的html文件(网站首页，vue会帮我们配置好，使用较少)
    ├── src          # 业务文件夹(项目核心文件夹，我们写的项目代码都放在这个文件夹里面)
      ├── assets     # 静态资源（一般项目图片、css都放在这里）
        └── logo.png # vue的logo图片(没啥用,vue打广告的，可删除)
      ├── components # 组件目录一般我们写的组件都放在这里）
        └── HelloWorld.vue # 欢迎页面vue代码文件 （打广告的，可删除）
      ├── App.vue    # 整个应用的根组件（网站首页index.htm默认会渲染这个根组件）
      └── main.js    # 入口js文件（入口文件，vue实例的创建，根组件的挂载都是在这里完成）
    ├── .gitignore   # git提交忽略配置（默认已经帮我们配置好 ）
    ├── babel.config.js  # babel配置（ES6转换ES5工具，一般不用管）
    ├── package.json # 依赖包列表
    ├── README.md    # 项目说明（一般公司代码规范，人员组成之类的可以写在这里）
    └── package-lock.json    # 项目包版本锁定和缓存地址
    └── vue.config.js    # 项目webpack配置项

组件基本使用

组件的三个组成部分

1.html模板部分(template)

注意点： 一个template只能有一个子元素，vue会自动把