今日学习内容：
1.Vue 是什么
Vue 是一套用于**构建用户界面**的**渐进式 JavaScript 框架**。
- 全称是Vue.js或者Vuejs；
- 它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型；
- 帮助你高效地开发用户界面，无论任务是简单还是复杂；
2.什么是渐进式框架呢？
可以和传统的网站开发架构融合在一起，例如可以简单的把它当作一个类似 JQuery ==库===来使用。
也可以使用Vue==全家桶====框架==来开发大型的单页面应用程序 。
使用它的原因
vue.js 体积小，编码简洁优雅，运行效率高，用户体验好.
无Dom操作，它能提高网站应用程序的开发效率
Vue核心思想
==组件化和数据驱动==
3.组件化:
为什么要组件化？
可能存在的问题：相同功能的代码冗余，维护性差。
定义：
- 将页面UI进行自上而下的拆分
- 把**通用的、可复用**的功能封装到一个组件中（例如：头部导航，轮播图，按钮）
核心：代码复用
数据驱动视图（DOM）
定义：通过**数据变化**直接影响**更新DOM**展示，避免DOM操作。
主动：数据
被动：页面（DOM）
4.MVVM 模型
MVC和MVVM都是一种软件的体系结构
MVC是Model – View –Controller的简称，是在前期被使用非常框架的架构模式，比如iOS、前端；
MVVM是Model-View-ViewModel的简称，是目前非常流行的架构模式；
MVVM** 是 Model-View-ViewModel 的**缩写**，它是一种软件架构风格，把我们的每一个HTML页面拆成这三部分，如上图。
Model：模型，当前页面渲染时依赖的数据。
View：视图，模板页面（DOM结构）。
ViewModel：视图模型，Vue实例，它是MVVM的核心。
在MVVM架构中，是**不允许数据和视图直接通信的**，**只能通过ViewModel来通信**，ViewModel是连接View和Model的**中间件**。
- ViewModel能够观察到**数据的变化**，并对视图对应的内容进行更新。
- ViewModel通过DOM监听器监听到**视图的变化**，并能够通知数据发生变化。
- MVVM设计模式最大的特点就是支持**数据的双向传递**
如何理解前端渲染？
（数据+模板）:请求后端接口数据，然后将数据通过模板绑定语法绑定到页面中，最终呈现给用户。这个过程就是我们这里所指的渲染
5.什么是指令？
是一种vue的模板语法，辅助开发者渲染页面的基本结构。
- 本质：==自定义属性==，
- 格式：以**v-**开始（比如：v-text, v-html, v-model，v-once）
插值语法：**双大括号语法** **{{}}**
- 格式： {{表达式}}
- 作用： 使用在**标签体中**，用于获取数据 ,可以使用 JavaScript 表达式
- 使用频率：最多
v-text 输出Text指令
- 格式： v-text='xxxx'
- v-text指令用于将数据**填充到标签中**（会覆盖原标签中的默认值），作用于插值表达式类似,更简洁
- **填充纯文本**：如果数据中有HTML标签会将html标签一并输出
- 注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值
- 使用频率：少
v-html 输出HTML指令
- 格式： v-html='xxxx'
- 作用：用法和v-text 相似，但是他可以将HTML片段填充到标签中
可能有安全问题, 本网站内部数据可以使用，来自第三方的数据不可以用,
Vue 为了防止 XSS 攻击，在此指令上做了安全处理，当发现输出内容有 script 标签时，则不渲染。
XSS 攻击主要利用 JS 脚本注入到网页中，读取 Cookie 值（Cookie一般存储了登录身份信息），读
取到了发送到黑客服务器，从而黑客可以使用你的帐户做非法操作。
v-html与v-text区别**:
v-text: 输出的是**纯文本**，浏览器不会对其再进行html解析，就相当于过去学习的**innerText**
v-html: 会将其当**html标签解析后**输出, 就相当于过去学习的**innerHTML**
v-model 双向数据绑定
默认情况下Vue只支持数据单向传递 M -> VM -> V
但是由于Vue是基于MVVM设计模式的, 所以也提供了双向传递的能力
在**input、select、text、checkbox、radio等表单元素**元素上可以用 v-model 指令创建双向数据绑定
v-once ：一次性插值
让界面不要跟着数据变化, 只渲染一次
v-bind 属性绑定指令
- 完整格式：v-bind:属性名称="绑定的数据"
- 缩写格式：**:属性名称="绑定的数据"**
作用：将数据动态绑定到指定的元素上
- 在企业开发中想要给"元素"**绑定数据**, 我们可以使用**{{}}, v-text, v-html**
但是如果想给"**元素的属性**"绑定数据, 就必须使用**v-bind**
所以v-bind的作用是专门用于给"元素的属性"绑定数据的
v-on：事件绑定指令**
- 完整格式： ==v-on:事件名称="事件处理函数名"==
例：点击事件 v-on:click = " 事件处理函数名"
- 缩写格式： ==@事件名称="事件处理函数名"==
注意： **@ 后面没有冒号**
那么在指定事件名称的时候**不需要写on**
- 作用：用于监听 DOM 事件
- 注意点： **增加methods配置项**，属性值也是对象，data后面要加逗号分隔。
- 原生DOM事件：onclick onmouseup onkeyup
对应v-on: 的事件名为 click mouseup keyup (去掉on)
@click @mouseup @keyup
事件修饰符
在事件中有很多东西需要我们处理, 例如事件冒泡,事件捕获, 阻止默认行为等
Vue不推荐我们操作DOM 为了解决这个问题，Vue.js 为 `v-on` 提供了**事件修饰符**
常见修饰符（集体亮相）
**.once** - 只触发一次回调。
**.prevent** - 调用 event.preventDefault()。
**.stop** - 调用 event.stopPropagation()。
**.self** - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
**.capture** - 添加事件侦听器时使用 capture 模式。
.prevent
如果想**==阻止元素的默认行为==**, 那么可以使用.prevent修饰符
html
<!--如果想阻止元素的默认行为, 那么可以使用.prevent修饰符-->
<a href="http://www.baidu.com" v-on:click.prevent="myFn">我是A标签</a>
.stop
默认情况下载嵌套的元素中, 如果都监听了相同的事件, 那么会触发事件冒泡
如果想**==阻止事件冒泡==**, 那么可以使用.stop修饰符
.self
如果想让回调**只有当前元素触发事件的时候才执行**, 那么就可以使用.self修饰符
按键修饰符
我们可以通过按键修饰符监听特定按键触发的事件
例如: 比如登录页面,回车表示提交
可以监听当前事件是否是回车触发的, 可以监听当前事件是否是ESC触发的等
Class的绑定v-bind
通过 *class* 列表和 *style* 指定样式是数据绑定的一个常见需求。它们都是元素的属性，都用 v-bind 处理，其中表达
式结果的类型可以是：**字符串、对象或数组。**
语法格式
v-bind:class='表达式'
简写 **:class='表达式'**
class 的表达式可以为：
字符串 :class="activeClass"
对象 :class="{active: isActive, error: hasError}"
数组 :class="['active', 'error']" 注意要加上单引号,不然是获取data中的值
[active, error]
注意点:
直接赋值一个类名
:class="需要绑定类名"
(没有放到数组中)默认回去Model中查找
原来的class设置方式
style的绑定
v-bind:style='表达式' 或 **:style='表达式'**
style 的表达式一般为对象
|
