VUE基础

脚手架安装：npm i @vue/cli -g

Vue的特点：一个MVVM框架。

                        MVVM是一种架构模式，这个模式让开发者不需要关注dom的渲染过程，而只需要关注数据模型的构建

安装项目：vue create vue-demo

关于项目的常规操作：

- 启动项目
  - 进入项目目录，运行`yarn serve`或者`npm run serve`

（项目启动成功）
- 关闭项目
  - 在项目启动命令界面，按下键盘`ctrl+c`就可以关闭项目
- 修改启动命令
  - 找到package.json内的script配置项，将`serve`修改为你想要的启动命令
- 安装vetur扩展
- 安装 Vue VSCode Snippets 

 项目结构介绍：

- public
  - 静态文件目录
  - 主要包含index.html文件，和ico图标
  - public中的index.html就是单页面应用内的唯一那个html文件
- src
  - 项目开发主目录
  - 所有vue开发相关内容都在src中
  - **下文会仔细解析**
- .gitignore
  - git忽略文件配置
- babel.config.js
  - babel是一个js的编译器，可以将浏览器不支持的预编译语言编译成浏览器能支持的结果
  - babel.config.js主要的作用是配置vue项目内的编译
- package.json
  - 依赖管理
- yarn.lock(小重点)
  - 这个文件的作用是记录yarn安装的所有依赖地址
  - 以后使用yarn安装会首选.lock中的地址
  - 有时候npm服务资源不稳定，就导致原本lock中的地址失效，从而多次yarn也会失败
  - 此时，我们应该，删除.lock文件，再重新yarn一次
- vue.config.js
  - vue脚手架配置工具
  - 默认安装的项目并没有这个文件，需要手动创建
  - 主要作用是——
    - 设置代理
    - 设置编译
    - 配置多页面
    - 配置本地服务

前置工作：

安装两个扩展：

vetur;识别vue文件，进行语法检查和代码高亮。

vue vscCode Snippets：快速生成vue模块代码

组件：

        - template
          - template内主要书写html视图结构
        - script
          - script内主要书写当前组件的业务逻辑
        - style
          - sytle内主要书写当前组件的样式

组件语法：

组件使用步骤：

1. 引入
   1. import语法引入自己定义的组件
2. 注册
   1. 使用components属性注册你的组件
3. 使用
   1. 将组件标签放到template中使用，使用形式同html标签一致

定义数据：

vue定义数据在data中定义，data中的数据可以在组件内部的script中参与计算，也可以在template模板中使用参与渲染

// data:用于定义数组的数据

       // data语法：

        // 必须是函数;

        // 必须return一个全新对象

        // 对象属性就是定义的数据

Mustach模板编译语法：

Mustach语法让我们可以将组件内部定义的数据渲染到视图template模板上

Mustach:-模板渲染语法；

                -内部传递：=》数据名

                                   =》表达式：由计算符和计算元组成且具备返回值