2021-06-14 Vue 简单介绍、安装与常用指令

一、关于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