1、Vue是什么
Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
- 易用
已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
- 灵活
不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
- 高效
20kB min+gzip 运行大小、超快虚拟 DOM、最省心的优化
2、Vue简介
1）、学习的基础
如果想要学习Vue，官方指南建议了解关于 HTML、CSS 和 JavaScript 的中级知识。如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的主意。
2）、库和框架的区别
- 库(如jQuery)
库是工具. 提供大量API，体现了封装的思想、需要自己调用这些API
- 框架（Vue）
框架提供了一套完整解决方案,使用者要按照框架所规定的某种规范进行开发
3）、为什么要学Vue
传统开发模式: JQuery+RequireJS/SeaJS+artTemplate+Gulp/Grunt
随着项目业务场景的复杂,传统模式已无法满足需求
就出现了Angular/React/Vue等框架
- 企业需求
- 主流框架之一(React Angular Vue)
- 易用、灵活、高效
4）、Vue能做什么
- 最大程度上解放了 DOM 操作
- 单页web项目(SinglePageApplication项目,例如Worktile官网)开发
- 传统网站开发
5）、Vue核心特性
双向数据绑定vue(借鉴了react的虚拟DOM,借鉴了angular双向数据绑定)
3、安装Vue
1）、通过cdn的方式安装
或者：
2）、NPM方式安装
# 最新稳定版
$ npm install vue3）、直接下载源码然后通过路径引入
- 开发版本：https://vuejs.org/js/vue.js
- 生产版本：https://vuejs.org/js/vue.min.js
Vue.js 不支持 IE8 及其以下版本
4、第一个项目HelloWorld
代码说明：
el
- 作用:当前Vue实例所管理的html视图
- 值:通常是id选择器(或者是一个 HTMLElement 实例)
- 不要让el所管理的视图是html或者body!
data
- Vue 实例的数据对象，是响应式数据(数据驱动视图)
- 可以通过 vm.$data 访问原始数据对象
- Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a
- 视图中绑定的数据必须显式的初始化到 data 中
methods
- 其值为可以一个对象
- 可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
- 方法中的 this 自动绑定为 Vue 实例。
- 注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined
除了以上常用的三个Vue实例选项, 还有很多选项,后续课程会陆续讲解
5、术语解释
插值表达式
- 作用:会将绑定的数据实时的显示出来:
- 通过任何方式修改所绑定的数据,所显示的数据都会被实时替换
- {{js表达式、三目运算符、方法调用等}}
- 不能写 var a = 10; 分支语句 循环语句
{{message}}
{{message}}
{{message+'啦啦啦'}}
{{age>18?'成年':'未成年'}}
{{message.split("")}}
{{var a = 10}}
指令
指令 (Directives) 是带有 v- 前缀的特殊特性。
指令特性的值预期是单个 JavaScript 表达式(v-for 是例外情况，稍后我们再讨论)。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
- Vue框架提供的语法
- 扩展了HTML的能力
- 减少DOM操作
{{message}}
6、Vue常用指令
Vue的指令扩展了html标签的功能、大部分的指令的值是js的表达式，取代DOM操作。
1）、v-text和v-html
很像innerText和innerHTML
v-text:更新标签中的内容
v-text和插值表达式的区别
- v-text 更新整个标签中的内容
- 插值表达式: 更新标签中局部的内容
v-html:更新标签中的内容/标签
- 可以渲染内容中的HTML标签
- 注意:尽量避免使用，容易造成危险 (XSS跨站脚本攻击)
{{str}}
我是p标签中的内容
我是p标签中的内容
我是p标签中的内容
2）、v-if和v-show
作用:根据表达式的bool值进行判断是否渲染该元素。
- v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
- 因此，如果需要非常频繁地切换，则使用 v-show 较好；
- 如果在运行时条件很少改变，则使用 v-if 较好。
我是p标签中的内容
我是p标签中的内容
3）、v-on
- 作用:使用 v-on 指令绑定 DOM 事件，并在事件被触发时执行一些 JavaScript 代码。
- 语法: @事件名.修饰符 = "methods中的方法名"
- 注意: $event 可以传形参
上面的按钮被点击了 {{ count }} 次。
修饰符
- .once - 只触发一次回调。
- .prevent - 调用 event.preventDefault()。
简写: @事件名.修饰符 = 'methods中的方法名'
4）、v-for
- 根据一组数组或对象的选项列表进行渲染。
- v-for 指令需要使用 item in items 形式的特殊语法
- items 是源数据数组 /对象
- 当要渲染相似的标签结构时用v-for
Document
{{item}}
{{item}}----{{index}}
{{value}}
{{value}}----{{key}}
{{value}}----{{key}}--{{i}}
注意: 在使用v-for时,要把一个唯一值赋值给:key属性(通常是数组的index或者数据的id)
- {{item}}---{{index}}
5）、v-bind
作用: 可以绑定标签上的任何属性。
- 绑定src和id属性
![]()
内容
- 绑定class类名
（1）对象语法
如果isActive为true，则返回的结果为
.active {
color: red;
}
hei
（2）数组语法
渲染的结果
hei
- 绑定style
（1）对象语法
渲染的结果
文本内容
（2）数组语法
abc
- 简化语法
6）、v-model
作用: 表单元素的绑定
特点: 双向数据绑定
- 数据发生变化可以更新到界面
- 通过界面可以更改数据
- v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。应该在 data选项中声明初始值。
（1）绑定文本框
效果:当文本框的值发生变化后，div中的内容也会发生变化。
{{message}}
（2）绑定多行文本框
{{ message }}
注意：多行文本框中使用插值表达式 无效
（3）绑定复选框
- 绑定一个复选框
checked是布尔类型的数据
{{ checked }}- 绑定多个复选框
此种方式需要input标签提供value属性。v-model绑定的是数组。
Checked names: {{ checkedNames }}
- 绑定单选框
需要input提供value属性的值。
男
女
{{sex}}
- 绑定下拉框
您选择的是: {{selected}}
7）、v-cloak
问题:在使用vue绑定数据的时候，渲染页面有时会出现变量闪烁，例如：
{{message}}
效果: 在页面加载时,有时会在页面中看到这个:
{{message}}解决方案: 使用v-cloak
{{message}}
注意:要在css代码部分写如下代码
[v-cloak] {
display: none;
}这样:就可以防止页面闪烁。
8）、v-once
解决的问题:只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。
{{message}}
当添加v-once的指令所对应的元素, 其数据发生改变时,并不会再一次进行渲染。
v-cloak和v-once 不需要表达式, 直接将指令写在开始标签中即可。