vue day01

1.mvvm 分别代表什么？

MVVM模式是Model、View、ViewModel的简称：
1.Model（数据模型）
2.View（视图模型，即DOM结构）
3.ViewModel（同步对象new Vue）
视图更新：1.使用数组的length属性去改变数组的时候，不会触发视图更新；2.使用数组下标去改变数组的时候，不会触发视图更新
解决办法：(1) 使用vue.set（arr,index,newVal）arr是需要改变的数组，index是数组里的项，newVal 是改变后的值;(2) 数组的方法：Array.prototype.splice()

2.插值表达式 （{{}}）是用来干什么的？

应用js表达式:渲染文本，数据绑定（加减乘除,字符串拼接,方法调用）

3.v-text指令

使用场景：在元素的属性节点上，添加v-text指令，如：<p v-text="name"></p>
与插值表达式的区别：
1.插值表达式只是一个占位符，但v-text会把内容区域之前的内容覆盖掉
2.插值表达式有闪烁问题，v-text不存在闪烁问题
3.插值表达式适合在 前后追加一个元素的内容；
4.如果想要防止插值表达式闪烁问题，同时，没有其它内容，推荐使用 v-text

4.v-html 指令

可渲染带标签的文本
插值表达式和v-text会将数据解释为纯文本，而非HTML，如果没有html 标签的数据被绑定，则会当做纯文本解释，作用同{{}}和v-text

5.v-bind 指令

给html元素或组件动态绑定一个或者多个属性

6.v-for 指令

渲染数组和对象

1. 渲染数组
   (1) 在标签属性位置上写上v-for="item in array"，item表示数组中的每一项，array代表需要遍历的数组
   (2) 在标签属性上写v-for="(item,index) in arr"，item表示数组中的每一项，index表示数组的索引，array代表需要遍历的数组
2. 渲染对象
   (1) 在标签属性位置上写上v-for="value in obj"，value表示对象键的值，obj代表需要遍历的对象
   (2) 在标签属性上写v-for="(value,key,index) in obj"，value表示对象键的值，key代表键，index代表索引，obj代表需要遍历的对象
   注意：v-for必须结合key 属性来使用，当数组中的某一项发生改变时，会只更新那一项，提升性能，key的值是唯一的，不能重复，使用方法：在v-for后边加‘：key=" 循环当前目标唯一不重复的标示 " ’

7. v-model

实现双向数据绑定
只能在input，select，textarea，components(Vue中的组件) 这些元素中使用

8.v-on

绑定事件监听，只能监听原生DOM事件。
常用事件：
v-on：click；
v-on：keydown;
v-on：keyup;
v-on：mousedown;
v-on：mouseover;
v-on：submit;
使用方法：
(1) 在标签的属性位置上写上：v-on：事件名="执行函数"
(2) 在标签的属性位置上写上：@：事件名="执行函数"(推荐使用)
(3) 通过执行函数添加参数
(4) 通过执行函数中添加event参数传递事件对象，只能是event，且不加引号
(5) 事件修饰符可以给事件添加特殊功能，常用的有：.stop(阻止事件冒泡) 和.prevent(阻止默认行为)
(6) 按键修饰符：只有按下指定键的时候才会执行事件处理函数，常用的有.enter

9.v-if 和 v-show

控制元素的显示和隐藏
写法：v-if="布尔值"， v-show="布尔值"，为true的时候为显示，false为隐藏
区别：
v-if通过控制dom来控制元素的显示与隐藏，适用于异步数据渲染的时候，v-show通过控制样式display来控制元素的显示与隐藏，适用于涉及大量dom操作的时候