Vue.js 是什么

是一套用于构建用户界面的 渐进式 框架.
Vue 被设计为可以 自底向上逐层应用
Vue 的核心库只关注视图层
便于与第三方库或既有项目整合
单页面应用 — 只有一个页面 — （局部刷新）
组件化的开发 ----- 模块化的开发
(组件化的开发带结构，模块化开发只逻辑)

如何使用vue

使用 cdn 服务器上的 vue连接（cdn） - 初学者极力推荐

拓展：内容分发网络，构建在现有网络基础之上的智能虚拟网络，
依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。 ------ 你需要jquery，你把jquery上传到自己的服务器请求，和使用 cdn 服务器上请求， cdn请求的优势 — 减少了自己服务器的http请求数（性能优化），cdn服务器响应速度快 ----- 使用script的src属性直接链接即可 ------------------ 是什么，怎么样，怎么做，你是怎么做的 ---- 经验

// 开发环境下的cdn链接  -----  开发阶段
// 开发环境版本，包含了有帮助的命令行警告
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

// 生产环境下的cdn链接  ----- 项目上线运维维护
// 生产环境版本，优化了尺寸和速度 -  没有所谓的console
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

拓展：

环境：开发环境 + 测试环境 + 生产环境

接口：开发接口 + 测试接口 + 生产接口

有的公司环境以及接口是不分的

在这里插入图片描述

使用npm模块安装（临时安装）

cnpm / npm i vue

在这里插入图片描述

复制vue.js 以及vue.min.js至项目中

在这里插入图片描述

命令行工具 ---- 脚手架 ---- 后续介绍

模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

插值

文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

原始 HTML

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

Attribute

Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令

使用 JavaScript 表达式

对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，

指令

在这里插入图片描述

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

<body>
  <div id="app">
    <h2>绑定属性用 v-bind 指令</h2>
    <h1 v-bind:testattribute="test"></h1>
    <h1 :testattribute="test"></h1>
    <div :class="active"></div>
    <h2>条件判断 v-if v-else v-else-if v-show</h2>
    <h2>列表循环 v-for</h2>
    <h2>事件绑定 v-on</h2>
    <a href="https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4">vue中的指令</a>
  </div>
  
</body>
<script>
  new Vue({
    el: '#app',
    data: {
      test: '11111111111',
      active: 'active'
    }
  })
</script>

缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

在这里插入图片描述