Vue day1

##　ＭＶＶＭ　是什么？

---

+　M　是modle 的

---

+ VM 是 连接 m 和v 的一种方式,让两个之间彼此有联系 监听m和v的

+ V 是



## 插值表达式的用法:

+ 两种方式,主要是用来渲染页面内容

+  可以使用表达式直接使用以两个相互曝光的大括号{{name}}

+  可以使用三元运算符来表达 例: {{age>=18 ? "已成年": "未成年"}} 注意: 三元运算符和if语句在这边不合适

## 插值表达式使用场景

1.  一般情况下使用的比较广泛,和v-text相比书写简单,

## v-text 使用场景

1.  渲染数据,直接用在标签上,把数据添加到标签上

2. 相比较插值表达式就有点麻烦

## v-html 使用场景

1. 容易受到XSS攻击,所以在用户提交表单切勿使用,只在可信内容使用

2. v-html在Model中如果有html标签会自动解析的

##  v-bind 绑定的是什么

1. 可以绑定class属性名 v-bind: class = "{'类名': ture/false}" true 表示确认绑定 false表示不要这个属性

2. 因为在以后的工作中可能会用的比较多, 这个可以采用的简写方式 以冒号 : 代替 例: :class= '类名'

4. 可以通过在vue.js的网站查询[vue.js](https://cn.vuejs.org/)

## v-for  在v-for中数据和页面的内容是实时更新的

#### 只有这两种情况下不是实时更新

1. 当时用数组的length属性时不是实时更新

2. 在一种就是使用数组的角标时,也不是实时更新

##### 解决这两种情况的方法

1. 使用Vue.set(arr, index, newVal) arr是需要改变的数组，index是数组里面的项， newVal是改变后的值

2. Array.prototype.splice()

### 3.    注意 v-for必须结合key属性来使用，它会唯一标识数组中的每一项，未来当数组中的那一项改变的时候，它会只更新那一项，好处就是提升性能。注意key的值唯一，不能重复

##### 1,渲染数组的形式

1. v-for= 'item in 数组名' item表示每一项

2. v-for= '(item, index) in 数组名' index表示索引

#####2, 渲染对象的形式

1. v-for= 'value in 对象名' value表示对象的每一个值

2. v-for='(value,key, index) in 对象名' value表示对象的每一个值 key表示键

## v-on

1.  v-on:click = '事件名' 

2. ** 简写方式 @click = "事件名" **

      v-on指令用来监听dom事件

        使用方法：

          1. 在标签的属性位置写上v-on:任意的事件类型="执行的函数"

          2. 简写：@任意的事件类型="执行的函数" （推荐）

          3. 通过执行函数添加参数

          4. 通过执行函数中添加$event参数传递事件对象，注意只能是$event,并且不能加引号

          5. 事件修饰符可以给事件添加特殊功能 .stop .prevent

          6. 可以给和按键相关的事件添加按键修饰符 常用的有 .enter

## v-if 和v-show

1. v-if 和v-show是通过 布尔值来设置的,如果为true则显示,如果为false则 隐藏

2. v-if 是通过控制dom设置元素的隐藏或者显示

3. v-show是通过设置display: none的方式来控制显示还是隐藏

####  4. 用法 : v-if在异步数据渲染的时候使用  .... v-show在页面有很多的dom元素时使用