Vue_Vue简介

特性

1. 数据驱动视图

   • vue会监听数据的变化，从而自动渲染页面的结构

     好处：当页面数据发生变化时，页面会重新渲染

     注意：数据驱动视图时单向的数据绑定

2. 双向数据绑定

   • js数据的变化，会自动渲染到页面上

   • 在填写表单时，双向数据绑定可以辅助开发者在不操作DOM的前提下，自动把用户填写的内容同步到数据源中

     form负责采集，ajax负责提交

     好处：无需操作DOM元素就可以获取最新数据

数据驱动视图和双向数据绑定的底层原理是MVVM

---

MVVM

MVVM指的是Model、View、ViewModel

Model表示当前页面渲染时所依赖的数据源。

View表示当前页面所渲染的DOM结构。

ViewModel表示vue的实例，它是MVVM的核心。

1. 当数据源发生变化时，会被ViewModel监听到，VM会根据最新的数据源自动更新页面的结构
2. 当表单元素的值发生变化时，也会被VM监听到，VM会把变化过后最新的值自动同步到Model数据源中

---

vue指令

1.内容渲染指令

1. v-text 指令缺点：会覆盖元素内部原有的内容

2. {{}} 插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容

   注意：插值表达式只能用在内容部分，不能用在属性部分

3. v-html 指令的作用：把带有标签的字符串渲染成html的内容

2.属性绑定指令

1. 在vue中，可以使用v-bind：指令，为元素的属性动态绑定值
2. 简写为英文:
3. 如果绑定内容需要动态拼接，字符串外部需要包裹单引号

<input type="text" v-bind:placeholder="tip">
<input type="text" :placeholder="tip">//等价
<div :title = "'box' + index">
    This is a div
</div>

3.事件绑定指令

1. v-on:简写是@

2. 语法格式为：

   <button @click = "add"></button>
   
   methods:{
   	add(){
   	this.count += 1
   	}
   }
   

3. $event的应用场景：如果默认的事件对象e被覆盖了，则可以手动传递一个$event

4. 事件修饰符

   • .prevent：禁用默认功能

     <a @click.prevent = ‘xxx’></a>
     

   • .stop：阻止冒泡

     <a @click.stop = ‘xxx’></a>
     

5. 按键修饰符

   <input @keyup.enter = "">
   <input @keyup.esc = "">
   

4.双向绑定指令

<input type = "text" v-model = "username">

v-bind是单向数据绑定，显示数据取决于data，不能改变数据源，而v-model是双向数据绑定，可以对数据源进行显示和修改

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

5.条件渲染指令

1. v-show的原理是:动志为元索添加或移除display: none 样式，来实现元素的显示和陶藏

   • 如果要频繁的切换元素的显示状态,用v-show性能会更好

2. v-if的原理是:每次动态创建或移除元素，实现元素的显示和隐藏

   • 如果刚进入页面的时候。某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来,此时v-if性能更好

   • v-else-if

   • v-else

     v-else-if 和 v-else 指令必须配合 v-if 指令一起使用，否则它将不会被识别

6.列表渲染指令

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

• items是待循环的数组
• item 是被循环的每一项

key的注意事项

1. key 的值只能是字符串或数字类型
2. key 的值必须具有唯一性(即: key的值不能重复)
3. 建议把数据项id属性的值作为key的值(因为id属性的值具有唯一性)
4. 使用index的值当作key的值没有任何意义(因为index的值不具有唯一性)
5. 建议使用v-for指令时一定要指定key的值(既提升性能、又防止列表状态紊乱)