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过滤器的兼容性



最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • vue.js 轻量级的MVVM框架数据驱动+组件化的开发 一、基本指令1、 v-if是条件渲染指令,它根据表达式的...
    时间追随者阅读 535评论 0 1
  • 1. Vue.js 实例和数据绑定 通过构造函数 Vue() 就可以创建一个 Vue 的根实例,并启动 Vue 应...
    养乐多__阅读 229评论 0 1
  • 理解MVC(数据层和表现层)的使用逻辑 使用Vue组件的生命周期和钩子函数 使用全局的Filters Slot、r...
    就换一颗红豆阅读 336评论 0 0
  • Vue的基础入门 一、Vue的基础入门 简介作者:尤雨溪 版本:2.X版本 预估4-5月份3.0版本会发布 官网...
    learninginto阅读 572评论 0 7
  • 本文目录: 1.安装 2.使用vue 3.创建vue实例 4.事件处理 5.基础指令 6.样式绑定 7.表单输入 ...
    前端辉羽阅读 395评论 0 10