本文已参与「新人创作礼」活动，一起开启掘金创作之路。

Vue 简介

Vue的特性

数据驱动视图

使用Vue页面，vue会监听数据的变化，从而自动重新渲染页面的结构。

双向数据绑定

不需要手动操作Dom元素，获取表单中的元素最新的值

MVVM

指Model、View、ViewModel，它把页面都拆分为三个部分

Model：页面渲染时依赖的数据源

View：表示页面渲染的Dom

ViewModel：表示vue实例，把数据源Model和页面结构View连接起来，实现双向数据绑定。

Vue 标签/属性学习

$event 原生Dom对象

. 事件修饰符

- .prevent 阻止默认事件行为
- .stop 阻止事件冒泡
- .capture 以捕获模式触发当前事件处理函数
- .once 绑定事件只触发一次
- .self 只有在event.target是当前元素自身时触发事件处理函数

按键修饰符

.esc 当按下esc时触发
.enter

双向数据绑定指令

v-model

v-model 修饰符

.number 自动将用户输入值转换为数值类型
.trim 自动过滤用户输入首尾空白字符
.lazy 在"change"时而非"input"时更新

条件渲染指令

v-if

动态创建删除元素(页面初始化时判断条件，且不会频繁加载时使用最佳)
v-else-if(配合v-if)
v-else(配合v-if)
v-show

使用display：none 控制元素的显示
v-for

使用时绑定一个:key（只能是字符串/数字）

过滤器

基础过滤器

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

<p>{{message | capitalize}}</p>

<div v-bind:id="rawId | formtId"></div>

私有过滤器和全局过滤器

在filter节点下定义的过滤器，成为私有过滤器.

<!--
全局过滤器 - 独立于每个vm实例之外

Vue.filter()方法接收两个参数：
1. 全局过滤器的名字
2. 全局过滤器处理的函数
-->

<script>
	Vue.filter('capitalize',(str)=>{
        return str.chatAt(0).toUpperCase() + str.slice(1)+"~~"
    })
</script>

其他

1. 过滤器可以连续调用，多个过滤器套娃
2. 调用过滤器时，可以传参(参数从第二开始获取)

Vue学习 第二天