VUE指令和基础方法

v-show :根据状态的布尔值来决定节点的显示属性

v-if: 是否渲染

注意：两者相似，但是如果需要频繁的切换应用，就使用v-show(性能损耗更小,执行效率越高),不需要引起网页整个节点的变化。  v-if是整个文档的渲染

v-else:可以紧跟着v-if使用

v-bind : 属性的绑定 

可以简写成     :属性名=" "

class的绑定:

注意v-bind:class 不会覆盖原有的class

1.数组法

:class="[class1  class2]"

2.对象写法

:class="{ c1:true,c2:true}" 类名根据布尔值决定。 false则不是类名

style的绑定:

:style="{ fontSize:'50px',color:'red' }"

v-text:绑定的是文本

v-html:绑定的是html代码

v-on:

使用方法 v-on:事件名="methods里面的自定义函数名"  可以简写为   @事件名=" "

v-model:事件的双向绑定

v-model="f"

{{f}} 

v-once ： 只执行一次

方法

注意：方法在 const vm = new Vue({

                                                        })中定义。

1.data:{}  

data里面声明的就是状态

2.computed:{}    计算属性

声明经过计算后的状态

computed:{
  kfc:function(){
    ...代码
    return ....
  }
}

可以在html代码中直接调用 :{{ kfc }} 显示得到的返回值

3.methods:{}  //里面是自定义函数

例如：

methods:{
    fn1(){
      this.d[1] =  {id:2,title:'我是标题啦啦啦'}
      console.log(this.d[1]);
      this.d = [...this.d]
    }
  }