Vue03

Vue组件

一、组件介绍

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

根组件：

    
    


    
app之上
    

        
{{ msg }}
    
    
app之下

二、局部组件

三、全局组件

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

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

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

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

六、父子组件实现todoList

    

        
        提交
    
    

        
    

七、搭建Vue开发环境

1、安装nodeJS

• 官网下载安装：https://nodejs.org/zh-cn/
• 命令行输入：node -v 检查是否安装成功

2、安装脚手架

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

命令行输入以下代码块：

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

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

切换到项目目录下：cd my-project（项目名）

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

项目启动成功后，浏览器输入：http://localhost:8080/

3、项目创建

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

4、vue基础模板

上课代码

局部组件：

全局组件：

父组件传递信息给子组件：

子组件传递信息给父组件：

    
    


    

        
        {{ n }}
    

组件化todoList：

    
    


    

        

            
            提交