一、关于Vue的介绍
1、 Vue 官网
地址：https://cn.vuejs.org/
image.png
2、Vue 内容简介
-
响应式系统（简单理解 响应式===双向绑定）
DOM =>HTML片段
{ } => JavaScript对象
1624790114(1).png 前端开发库
Vue.js (读音、vju:/ 类似于view) 是一套构建用户界面的渐进式框架
3、为什么使用Vue
- 因为如果使用传统方式（javascript）,因为数据和视图全部混合在HTML中，处理起来不容易。
- 如果使用jQuery ，随着嵌套DOM元素越来越多，修改起来也会比较麻烦。
而Vue.js 具有以下特点
- 轻量级 （读者容易理解，能够快速上手）
- 数据双向绑定。
- 指令：通过内置的指令，将相应的某些行为作用到DOM 上
- 组件 可以分装可重用的代码(减少代码的开发)，支持热重载（即做了修改时不会刷新页面，只是对组件本身进行了重载）
- 状态管理： state->View->Action
二、安装
1）安装准备
npm安装方式（国内可以更改为cnpm）
说明:如果npm 不是内部命令，需先安装node.js
安装流程如下
1、cnpm install vue
2、#安装手脚架vue-cli
cnpm install --gloabl vue-cli
3、#创建一个基于webpack 模板的新项目
vue init webpack my-project
# 如果 webpack 未安装则先执行
#cnpm install -g webpack
4、#进入项目安装项目依赖
cnpm install
5、#运行项目
cnpm run dev
2）安装步骤
-
方式一： 登录官网下载 Vue.js,然后通过<script> 引入
eg: <script src="js/vue.js"></script>
image.png
方式二：通过cdn 引入
原型或学习 的引入如下，生产环境的可以查阅官网。
eg:<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
备注：
- Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性
三、常用指令
1、什么是指令
用来扩展html标签的功能。
2、常用指令介绍
- v-bind
- v-model
- v-for
- v-on
- v-if
