Vue (三)

Vue组件

一、组件介绍

• 每一个组件都是一个vue实例
• 每个组件均具有自身的模板template，根组件的模板就是挂载点
• 每个组件模板只能拥有一个根标签
• 子组件的数据具有作用域，以达到组件的复用

二、局部组件

三、全局组件

四、父组件传递数据给子组件

• 通过绑定属性的方式进行数据传递

五、子组件传递数据给父组件

• 通过发送事件请求的方式进行数据传递

六、父子组件实现todoList

    

        
        提交
    
    

        
    

七、搭建Vue开发环境

1、安装nodeJS

• 官网下载安装：https://nodejs.org/zh-cn/

2、安装脚手架

• vue官网 => 学习 => 教程 => 安装 => 命令行工具(CLI)

安装全局vue：npm install -g @vue/cli

在指定目录创建vue项目：vue create my-project

进入项目目录启动项目：npm run serve

通过指定服务器路径访问项目页面：http://localhost:8080/

3、项目创建

babel：是一个 JavaScript 编译器。
eslint：是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。

4、vue基础模板