1. 什么是 vue
vue 是用于构建用户页面的前端框架、
1.1 构建用户界面
用vue往html页面中填充数据,非常的方便
1.2框架
框架是一套现成的解决方案,程序员只能遵守框架的规范,去编写自己的业务功能!
2. vue 的特性
2.1 vue 框架特性主要体现两方面
2.2.1 数据驱动视图
2.2.2 双向数据绑定
2.2 数据驱动视图
在使用了 vue 的页面中,vue 会监听数据的变化,从而自动重新渲染页面的结构
![](https://i-blog.csdnimg.cn/blog_migrate/900a5cef6fe4a3990c25481a85b3fd28.png)
好处:当页面数据发生变化时,页面会自动重新渲染
注意:数据驱动视图是单向的数据绑定
单向的数据绑定是:数据的变化导致页面的更新
2.3 双向数据绑定
在填写表单时,双向数据绑定可以辅助开发者在不操作 DOM 的前提下,自动把用户填写的内容同步到数据源中
好处:开发者不再需要手动操作 DOM 元素,来获取表单元素最新的值
2.3.1 js数据的变化,会被自动渲染到页面上
2.3.2 页面上表单采集的数据发生变化的时候,会被vue自动获取到,并更新到js数据中
2.4 MVVM
MVVM
是 vue 实现
数据驱动视图
和
双向数据绑定
的核心原理。MVVM 指的是
M
odel、
V
iew 和
V
iew
M
odel, 它把每个 HTML 页面都拆分成了这三个部分
在 MVVM 概念中:
Model
表示当前页面渲染时所依赖的数据源。
View
表示当前页面所渲染的 DOM 结构。
ViewModel
表示 vue 的实例,它是 MVVM 的核心
2.4 MVVM 的工作原理
ViewModel 作为 MVVM 的核心
,是它把当前页面的
数据源
(Model)和
页面的结构
(View)连接在了一起。
当
数据源发生变化
时,会被 ViewModel 监听到,VM 会根据最新的数据源
自动更新
页面的结构
当
表单元素的值发生变化
时,也会被 VM 监听到,VM 会把变化过后最新的值
自动同步
到 Model 数据源中
注意:数据驱动视图和双向数据绑定的底层原理是mvvm (Model数据源,View页面结构,ViewModel 是vue的实例)
vue 的调试工具
1. 安装 vue-devtools 调试工具
2. 配置 Chrome 浏览器中的 vue-devtools 点击 Chrome 浏览器右上角的 按钮,选择
更多工具
->
扩展程序
->
Vue.js devtools 详细信息
,并勾选如下 的两个选项:
注意:修改完成配置以后重启浏览器才生效
3. 使用 vue-devtools 调试 vue 页面
在浏览器中
访问一个使用了 vue 的页面
,打开浏览器的
开发者工具
,
切换到 Vue 面板
,即可使用 vue-devtools 调试当前的页面。
vue 的指令与过滤器
1. 指令的概念
指令(Directives)
是 vue 为开发者提供的
模板语法
,用于
辅助开发者渲染页面的基本结构
。
vue 中的指令
按照不同的用途
可以分为如下 6 大类:
①
内容渲染
指令
②
属性绑定
指令
③
事件绑定
指令
④
双向绑定
指令
⑤
条件渲染
指令
⑥
列表渲染
指令
1.1 内容渲染指令
内容渲染指令
用来辅助开发者
渲染 DOM 元素的文本内容
。常用的内容渲染指令有如下 3 个:
v-text 指令的缺点会覆盖元素内部原有内容
{{ }} 插值表达式:在实际开发中用的最多,只是内容的占位符,不会覆盖原有内容
v-html 指令的作用:可以把带有标签的字符串,渲染成真正的HTML内容
1.2 属性绑定指令
注意:
插值表达式只能用在元素的内容节点中,不能用在元素的属性节点中
如果需要为元素的属性动态绑定属性值,则需要用到v-bind属性绑定指令。
简写是英文的 :
在使用v-bind 属性绑定期间,如果绑定内容需要进行动态拼接,则字符串的外面应该包裹单引号,例如 <div :title=" 'box' + index ">这是一个 div</div>
1.3 事件绑定指令
vue 提供了v-on 事件绑定指令,用来辅助程序员为DOM元素绑定事件监听。
简写@事件名称
例如: <button @click="add(1)">+1</button>
1.3.1 事件对象$event
$event
是 vue 提供的
特殊变量
,用来表示
原生的事件参数对象 event
。$event 可以解决事件参数对象 event 被覆盖的问题,他是固定写法必须是$event
1.3.2 事件修饰符
在事件处理函数中调用
event.preventDefault()
或
event.stopPropagation()
是非常常见的需求。因此,
vue 提供了
事件修饰符
的概念,来辅助程序员更方便的
对事件的触发进行控制
。常用的 5 个事件修饰符如下
事件修饰符加在事件后,语法格式如下:
<a href="http://www.baidu.com" @click.prevent="show">跳转到百度首页</a>
按键修饰符
在监听
键盘事件
时,我们经常需要
判断详细的按键
。此时,可以为
键盘相关的事件
添加
按键修饰符
,例如:
1.4 双向绑定指令
vue 提供了 v-model 双向数据绑定指令,用来辅助开发者在不操作 DOM 的前提下,快速获取表单的数据。
![](https://i-blog.csdnimg.cn/blog_migrate/471acc4091432c9b122f3311be2493fc.png)
v-model 指令的修饰符
为了方便对用户输入的内容进行处理
,vue 为 v-model 指令提供了 3 个修饰符,分别是:
示例用法如下:
![](https://i-blog.csdnimg.cn/blog_migrate/6d916d603d7dc0f00107a2a978f67262.png)
注意:v-model 只用于表单元素
1.5 条件渲染指令
条件渲染指令
用来辅助开发者
按需控制 DOM 的显示与隐藏
。条件渲染指令有如下两个,分别是:
v-if
v-show
v-if 和 v-show 的区别
实现原理不同:
v-if 指令会
动态地创建或移除 DOM 元素
,从而控制元素在页面上的显示与隐藏;
v-show 指令会动态为元素
添加或移除 style="display: none;" 样式
,从而控制元素的显示与隐藏;
性能消耗不同:
v-if
有更高的
切换开销
,而
v-show
有更高的
初始渲染开销
。因此:
如果需要
非常频繁地切换
,则使用 v-show 较好
如果在
运行时条件很少改变
,则使用 v-if 较好
v-else
v-if 可以单独使用,或配合 v-else 指令一起使用:
注意
:v-else 指令
必须配合
v-if 指令一起使用,否则它将不会被识别!
v-else-if
v-else-if 指令,顾名思义,充当 v-if 的“else-if 块”,可以连续使用:
![](https://i-blog.csdnimg.cn/blog_migrate/8c9493502cf71997dd86af9a3505cbe6.png)
注意:v-else-if 指令必须配合 v-if 指令一起使用,否则它将不会被识别!
1.6 列表渲染指令
vue 提供了
v-for
列表渲染指令,用来辅助开发者
基于一个数组来循环渲染一个列表结构
。v-for 指令需要使
用
item in items
形式的特殊语法,其中:
items 是
待循环的数组
item 是
被循环的每一项
v-for 中的索引
v-for 指令还支持一个
可选的
第二个参数,即
当前项的索引
。语法格式为
(
item
,
index
)
in items
,示例代码如下:
注意:v-for 指令中的 item 项和 index 索引都是形参,可以根据需要进行重命名。例如 (user, i) in userlist
使用 key 维护列表的状态
当
列表的数据变化
时,默认情况下,vue 会
尽可能的复用
已存在的 DOM 元素,从而
提升渲染的性能
。但这种 默认的性能优化策略,会导致
有状态的列表无法被正确更新
。
为了给 vue 一个提示,以便它能跟踪每个节点的身份,
从而在
保证
有状态的列表被正确更新
的前提下,
提升渲 染的性能
。此时,需要为每项提供一个
唯一的 key 属性
:
key 的注意事项
①
key 的值只能是
字符串
或
数字
类型
②
key 的值
必须具有唯一性
(即:key 的值不能重复)
③
建议把
数据项 id 属性的值
作为 key 的值(因为 id 属性的值具有唯一性)
④
使用
index 的值
当作 key 的值
没有任何意义
(因为 index 的值不具有唯一性)
⑤
建议使用 v-for 指令时
一定要指定 key 的值
(既提升性能、又防止列表状态紊乱)
2. 过滤器
过滤器
(
Filters
)是 vue 为开发者提供的功能,常用于
文本的格式化
。过滤器可以用在两个地方:
插值表达式
和
v-bind 属性绑定
。
过滤器应该被添加在 JavaScript 表达式的
尾部
,由“
管道符
”进行调用,示例代码如下:
2.1 定义过滤器
在创建 vue 实例期间,可以在
filters 节点
中定义过滤器,示例代码如下:
2.2
私有过滤器
和
全局过滤器
在 filters 节点下定义的过滤器,称为“
私有过滤器
”,因为它
只能在当前 vm 实例所控制的 el 区域内使用
。
如果希望
在多个 vue 实例之间共享过滤器
,则可以按照如下的格式定义
全局过滤器
:
2.3 连续调用多个过滤器
过滤器可以
串联地
进行调用,例如:
2.3 连续调用多个过滤器
示例代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/d2de8adbf55f40cac9afe7ef7c7c8866.png)
2.4 过滤器传参
过滤器的
本质
是
JavaScript 函数
,因此可以接收参数,格式如下: