Vue基础入门（Ⅰ）

内容一览

建议配合原图使用

vue简介

1.什么是vue

2. vue的特性

2.1数据驱动视图

2.2双向数据绑定

2.3 MVVM

2.4 MVVM的工作原理

vue的基本使用

1.基本使用步骤

2.基本代码与MVWM的对应关系

vue的调试工具

1.安装vue. devoos调试工具

2.配置Chrome浏览器中的vue devtools

3.使用vue- devtools调试vue页面

vue的指令与过滤器

1.指令的概念

指令(Directives) 是vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。

1.1内容渲染指令

内容渲染指令用来辅助开发者渲染DOM元素的文本内容。常用的内容渲染指令有如下3个:

°v-text

{}}

v-html

1.2属性绑定指令

’如果需要 为元素的属性动态绑定属性值，则需要用到v bind属性绑定指令。

属性绑定指令的简写形式

使用Javascript表达式

1.3事件绑定指令

vue提供了v-on事件绑定指令，用来辅助程序员为DOM元素绑定事件监听。

事件绑定的简写形式

事件参数对象

绑定事件并传参

$event

事件修饰符

按键修饰符

1.4双向绑定指令

vue提供了v-model双向数据绑定指令，用来辅助开发者在不操作DOM的前提下，快速获取表单的数据。

v-model指令的修饰符

1.5条件渲染指令

条件渲染指令用来辅助开发者按需控制DOM的显示与隐藏。条件渲染指令有如下两个，分别是: .

v-if和v-show的区别

v-else

1.6列表渲染指令

vue提供了v-for列表渲染指令，用来辅助开发者基于-个数组来循环渲染一个列表结构。

v-for中的索引

使用key维护列表的状态

key的注意事项

2.过滤器

过滤器(Filters) 是vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方:插值表达式和v-bind 属性绑定

2.1定义过滤器

2.2私有过滤器和全局过滤器

2.3连续调用多个过滤器

2.4过滤器传参

2.5过滤器的兼容性