vue初识

vue 入门

---

前言

一、vue是什么？

示例 ：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二、vue特性

重要特性：
1.双向数据绑定
2.组件化
其他特性：
1.轻量级的框架
2.指令
3.客户端路由
4.状态管理
兼容性：vue不支持ie8及以下版本，因为使用ie8无法模拟的ECMAScript5特性。但它支持所有兼容ECMAScript5的浏览器。

三、vue基础知识

1.使用vue
1)安装
开发版本：开发环境中使用
生产版本：生产环境中使用
2)实例化
创建vue对象的实例（在创建之前，需要传递一个参数）

该处使用的url网络请求的数据。

四、指令系统

1.内容展示
（1） 文本插值语法
{{ }} 文本插值语法，用来展示内容或者执行单行js代码
（2）v-text
v-text可以实现和文本插值相似的功能，但是它只能写在标签的开始标签中，如果标签内部有内容，则会被v-text对应的变量值进行覆盖。
（3）v-html
如果要解析的内容中包含了html标签，用v-text和文本插值语法都会把内容原样展示，使用v-html就可以解析html标签。

文本插值、v-text、v-html的区别
相同：都可以在标签内展示内容
不同：使用场景不同
（4）v-bind
用法：v-bind：HTML 标签属性=“变量/表达式”
功能：可以将原生的HTML属性改变为能够支持表达式和变量的属性
v-bind 简写为 ：
（5）条件指令
v-if 指令的值为真，则标签显示，值为假，则标签不显示
用法：v-if=“变量/表达式”
v-else
v-else-if
v-else-if=“变量/表达式”
撰写时间：2020. 10.19
（6）v-show
使用：v-show=“变量/表达式”
功能：值为真，则标签显示，为假则标签隐藏
v-show和v-if的区别
v-show 无论条件成立与否，节点都存在，条件成立的才会显示！
v-if条件成立节点存在，不成立节点不存在！
什么时候使用
需要反复展示的内容使用v-show指令，渲染一次的就用v-if
（7）v-for
列表渲染
用法：
1）v-for=“变量 in 数组/对象”
2）v-for=“（item，key）in 数组/对象” item 遍历中的数据 key键
3）v-for=“（item，key，index） in 对象” 。。。 index指顺序的序号

1）若使用了多层的列表渲染，一定要注意遍历目标
2）遍历过程中第一个是值，第二个是索引
3）不推荐将v-if和v-for在同一个标签上使用，若在同一个标签上使用了v-for和v-if，则v-for的优先级会更高
（8）“就地更新”策略