vue2（一）

一、vue简介

1.1 vue特性

1.1.1数据驱动视图

监听数据变化然后重新自动渲染页面结构，数据的变化会驱动视图自动更新，单向数据绑定意思是数据的变化导致页面结构变化，这个方向是单向的。

1.1.2双向数据绑定

在网页中，form表单负责收集数据，ajax负责提交数据，双向数据绑定的意思是：①js数据的变化，会被自动渲染到页面上：②页面上表单的数据发生变化的时候会被vue自动获取并且更新到js数据中

1.2 MVVM

1.2.1 MVVM工作原理

二、vue的基本使用

2.1 基本使用步骤

2.2 基本代码与mvvm的对应关系

三、vue的调试工具

3.1 初体验调试工具

点击一下root根节点就会弹出data数据源，可以直接修改，修改后被vm监听到，保存后页面数据也会被渲染，这是数据到页面的更新方向

3.2 vue的指令与过滤器

3.2.1 指令概述

3.2.2 内容渲染指令

最常用的内容渲染指令有如下三个：

• v-text
• {{}}
• v-html

①v-text
用法示例

v-text指令缺点：会覆盖标签内部原本的内容，例如性别会被添加进来的“女”给覆盖掉。

②{{}}（插值表达式）
用法示例

{{}}在实际开发中用的最多，只是内容的占位符不会覆盖原有的内容。

③v-html
用法示例
v-text指令和插值表达式只能渲染纯文本内容。如果要把包含HTML标签的字符串渲染为页面的HTML元素,则需要用到 v-html这个指令:

v-html这个指令:可以把带标签的字符串渲染成真正的html内容

el属性使用的注意点
当el：‘p’时，vm示例只会控制第一个p标签，所以只有第一个p正常在vue解析，所以尽量在最外面包含一个大div，让vue控制大div，对div里面进行渲染就行了，推荐大div的id为app

3.2.3 属性绑定指令

插值表达式只能用于元素的内容节点中，不能用于属性节点中

v-bind
在vue中可以使用v-bind这个指令为元素属性动态绑定值，简写是英文的：

注意：v-bind：指令可以简写为：

使用JavaScript表达式

在使用v-bind属性绑定期间，如果绑定的内容需要动态拼接，则字符串需要用单引号包围

3.2.4 事件绑定属性

v-on

与el和data等级的有一个methods，其作用是定义事件的处理函数

v-on用法
click是事件类型，add是函数名，指向的是methods里面的处理函数

处理函数的简写形式
处理函数**add function()**可以将function和冒号省略掉简写成下面这种形式

count是vue对象里面的数据，直接this.count修改就行

绑定数据并传参
若想传参必须在绑定事件函数的后面加括号例如

<button v-on:click="add(2)"></button>

下面的add函数括号内也要写个n形参，这样每点击一下加2。

v-on指令的简写形式
v-on：指令可以被简写为@

$event
e是事件对象，是自动创建出来的，以下可完成效果当count为偶数时按钮变红，奇数清除背景颜色，e.target指向的是触发事件的对象button，但是前提是不能调用此函数时传参否则会覆盖e。

为了解决上述不能传参的问题，vue提供了内置变量$event，他就是原生DOM的事件对象，1是传的参数，$event就是内置变量e，与此同时下面的add（n，e）也要写上两个形参，且$event与实参位置可以调换

事件修饰符prevent
在点击a链接后给a绑定点击事件，点击完打印那段文字，但是不阻止a跳转的话那段话只能一瞬间显示便消失，为了使其显现，要阻止链接跳转，使用阻止默认行为的preventDefault（），这是以前的原生代码，

vue提供了一种新方式

按键修饰符

3.2.5 双向绑定指令

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

上图用v-model将文本框与数据源双向绑定，用户名本来叫zhangsan，文本框中v-model将用户名获取过来，，然后在文本框中修改zhangsan时，==数据源中的用户名也会跟着改变
==
注：v-bind是单向绑定，是数据源到页面的方向

只有表单元素才能使用v-model，例如input输入框，textare，select下拉菜单等等

下拉菜单中因为v-model等于city原本是空的，所以下拉菜单默认选择“请选择城市”，在页面中将下拉菜单手动选择了上海city也会跟着变成2

v-model指令的修饰符

示例用法如下

如果不加number，一开始data数据中n1和n2都是数字，相加结果为3，都是这时在文本框中修改了n1后默认会把输入的值变为字符串，此时就不是数字相加了

划线处模板字符串，当在两端打空格时如果失去光标后也会自动去掉光标

lazy是为了让用户编辑文本框的时候root里面的数据没有跟着改变，只有当文本框失去光标后root里面的username才改变

3.2.6 条件渲染指令

v-if还是v-show，只要flag布尔值等于true就会显示出这两个p出来，如果是false则会隐藏这两个p

v-if和v-show的区别
实现原理不同：

• v-if 指令会动态地创建或移除元素，从而控制元素在页面上的显示与隐藏；
• v-show 指令会动态为元素添加或移除行内样式style=“display: none;” 样式，从而控制元素的显示与隐藏；

性能消耗不同：
v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此：

• 如果需要非常频繁地切换，则使用 v-show 较好
• 如果在运行时条件很少改变，则使用 v-if 较好
• 在实际开发中，不用考虑这些问题，绝大多数情况都是使用v-if。
  
  v-else
  v-if 可以单独使用，或配合 v-else 指令一起使用：
  注意：v-else 指令必须配合 v-if 指令一起使用，否则它将不会被识别！
  
  上图展示的效果是v-if判断type是否为A，是的话展示优秀，否则判断下面如果为B展示良好。以此类推，最后一个else无需判断所以后面没有type
  **注意：里面的A或者B什么的字母要加单引号

实例

3.2.7 列表渲染指令

vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使
用 item in items 形式的特殊语法，其中：

• items 是待循环的数组
• item 是被循环的每一项
  
  list是一个数组，下面的每一行都是一个对象，希望把每一个对象循环遍历一次在下方打印一个小li
  
  因为循环遍历的对象是对象，所以v-for就加给tr行即可，每一次循环执行一个对象，渲染出来的结果是

v-for中的索引
v-for 指令还支持一个可选的第二个参数，即当前项的索引。语法格式为 (item, index) in items，示例代码如下：

注意：v-for 指令中的 item 项和 index 索引都是形参，可以根据需要进行重命名。例如 (user, i) in userlist

注意，这里的name和index不仅能被tr的子元素td访问，也能被自身tr访问到，可以通过在tr添加title绑定name和index，发现会绑定成功

使用 key 维护列表的状态
官方建议，只要用到v-for这个指令，一定要绑定一个：key属性，而且要把id作为key的值，且这个值一定得是字符串或者数字类型，忘记加key这个在html文件中不会报错，但是在以后的vue文件中会报错。
注意：key的值千万不能重复否则会报错，所以才不推荐用name当key，可能会重复。id具有唯一性，使用 index 的值当作 key 的值没有任何意义（因为index 的值不具有指向性），虽然所以看似有唯一性，但是如果在一组对象前添加了一个新对象，原本是0索引的对象变成了1，索引与每一项之间不具有绑定关系

案例注意点

注意：v-model指令内部会判断绑定给哪个表单元素了，如果是绑定给CheckBox就把值绑定给check属性，如果是绑定给text就把值绑定给value属性，status为true时进去页面默认是打开的选中状态

label的作用是对复选框进行标注，鼠标点击到label的“男”后，复选框也会被选中，点哪个label就会选中对应的input，上图之前id是cd1会报错是因为，每次循环表格，每一行的复选框都是cd1，会出问题，正确做法是动态生成cd，用id区分开来

删除功能

箭头函数意思是返回和当前id不相等的项,循环完毕后得到的数组就是没有指定删除的id的其他所有项。因为id与这一项对应，所以删掉这一项就是删掉id

自增属性