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>