知道vue-cli工具使用，能够创建一个vue项目

库

本质是一些方法的集合。每次调用方法，实现一个特定的功能。如：moment、axios

框架

是一套完整的解决方案。框架实现大部分功能，需要按照特定的规则写代码。如：vue、react、angular（虽然使用特定的规则，但是高效）

1. 了解vue

1. 一个渐进式的JavaScript框架

2. 渐进式

   1. ​ 逐渐增强，通过逐步学习，集成更多功能

3. 了解库和框架

   1. 库： 方法的集合
   2. 框架： 一整套完整的项目解决方案

2 MVVM

M：model 数据模型
V：view 视图
VM： viewModel 视图模型

3 原生和vue思想的对比

原生：dom驱动，修改视图，操作dom

vue：数据驱动，修改数据，操作数据即可

4 vue组件化思想

将一个页面，拆分成一个个小组件的过程，就是组件化。
每个组件包含自己的 html+css+js

5 vue的基本使用

1. 全局安装

npm i  @vue/cli  -g    或    yarn global add @vue/cli

2. 查看vue版本

vue --version

3. 初始化一个项目

vue create 项目名（不能用中文）

6 如何覆盖脚手架下的webpack配置：

修改vue.config.js文件，覆盖webpack配置

7 文件代码意思

脚手架里主要文件和作用

1. node_modules – 下载第三方的包
2. public/index.html – 运行的浏览器网页
3. src/main.js – webpack打包的入口
4. src/App.vue – vue页面的入口
5. package.json – 依赖包列表文件

一个 .vue文件就是一个组件

vue 提供数据 — data（函数）

methods（对象）

Vue在函数内部使用data中的数据，需要加this

在 data 中提供，data是一个函数
函数的返回值是一个对象，对象就是vue提供的数据

插值表达式 {{ }}

1. 作用 使用data中的数据渲染视图（模板）

2. 支持基本语法, 支持三元运算符

3. 注意点

   ​ （1）使用数据在 data 中必须存在
   ​ （2）能使用表达式，但是不能使用语句 if for …
   ​ （3）不能在标签属性中使用 {{ }} 插值

vue 指令 特殊的 html 标签属性, 特点: v- 开头

v-bind

v-on – 注册事件

简写 ： v-on — 》 @

获取事件对象

​ 两种情况 ： 1. 传参 2. 无传参

事件修饰符

快速阻止默认事件和冒泡事件

1. 阻止默认 .prevent
2. 阻止冒泡 .stop

从头搭建一个vue项目

vue脚手架的基本使用：

1. 全局安装
   1. win+r
   2. npm i @vue/cli -g

2. 查看vue版本
3. vue -V(大写)
4. （或者） vue --version

3. 初始化一个vue项目

   1. vue create 项目名（不能用中文）
      
      

   2. 创建项目成功

4. 配置端口号

5. 目录分析与清理

   1. public/index.html不用动，提供一个最基础的页面

   2. src/main.js不用动， 渲染了App.vue组件

   3. src/App.vue默认有很多的内容，可以全部删除

   4. assets 文件夹 和 components 直接删除

到此完成项目的搭建以及初始化 ！

template 只能有一个根路径

style

1. css

2. less
   2. src/main.js不用动， 渲染了App.vue组件

   3. src/App.vue默认有很多的内容，可以全部删除

   4. assets 文件夹 和 components 直接删除