Vue基础-day01

vm

-是用来监听view和model

插值表达式

-写法 {{}}
-渲染data数据

v-text

-也是渲染data数据，直接用在标签上，把数据添加在标签里

-渲染文本，v-开头的都是指令，增强html标签的功能，和插值表达式的 
-区别：插值表达式写在innerhtml位置，v-text写在属性位置，推荐使用 
           插值表达式{{}}

插值表达式、v-text、v-html的区别及应用场景

-插值表达式、v-text会将数据解释为纯文本，而非html

-v-text可以将一段文本渲染到指定的元素中

-v-html可以渲染带标签的文本，不可以随便使用

v-bind

 -绑定给标签

 -v-bind可以动态绑定属性，使用方法 v-bind：属性名=“data里面的属性”

 -v-bind简写形式：属性名=“data里面的属性”

 v-bind想绑什么属性就绑什么属性，在后面组件开发的时候很常用

 v-bind动态绑定样式 :class="{'类名':布尔值}"

v-for

 -渲染数组和对象 能够根据data中的数据变化自动刷新视图 当时用数组 
  的length属性去改变

 -数组的时候，不会触发视图更新。数组的下标 也不会触发。

 -解决办法：a.使用vue.set（arr，index，newVal）arr是需要改变的数 
                       组，index是数组里的项，newVal是改变后的值。

                     b.Array.prototype.splice()

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

    -key的使用方法：在循环后面：key="唯一"

    -渲染数组2个参数  item > index

    -渲染对象3个参数  item > key > index

v-model

   -用来双向数据绑定，就是model和view的值进行同步变化，实时更新

   -只能用在这几个input textarea select标签里

v-on

  -用来监听dom事件

  -使用方法：a.在标签的属性位置写上v-on：任意的事件类型=“执行的                  
   函数”

                     b.简写形式 @任意的事件类型=“执行的函数” 推荐使用

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

                     d.通过执行函数中添加$event参数传递事件对象，只能是 
                        $event，不能加引号

                    e.事件修饰符可以给事件添加特殊功能 .stop阻止事件冒泡 
                      .prevent阻止默认事件

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

v-if和v-show

   -v-if和v-show指令可以用来控制元素的显示和隐藏，v-if="布尔值" v- 
     show="布尔值"，布尔值为true元素显示，false元素隐藏

    -两者区别：       v-if通过dom来控制元素的显示和隐藏

                             v-show通过控制样式display：none来控制元素的显 
                             示和隐藏

    使用场景区别：涉及到大量dom操作的时候，我们需要使用v-show

                             涉及到异步数据渲染的时候就要使用v-if