Vuejs04--v-once、v-html、v-text、v-pre、v-cloak、v-bind、v-bind 样式、computed 计算属性

指令

v-once

只会渲染一次数据，在之后不会在随着数据的变动而切渲染dom

<div id="app" v-once >

v-html

有属性值
数据是html代码,则此指令会解析显示。

msg:"<div>aaaa</div>"
<div id="app" v-html="msg">

v-text

有属性值
显示文本数据，其显示与{{属性}}相同，但是其写法不同且不够灵活

<div id="app" v-text="msg">

v-pre

不对数据解析来显示数据

<div id="app" v-pre>{{messgae}}
--------------------显示-------------------
{{message}

v-cloak

数据未解析渲染前先将标签隐藏。等获得后在显示出来

<style>
  [v-cloak]{
    display: none;
  }
</style>
<div id="app" v-cloak>{{msg}}

v-bind

语法糖（简写）： ：

eg: ‘<a :href="url">百度</a>’

绑定数据到标签属性值

 <a v-bind:href="url">百度</a>
 const app=new Vue({
    el:'#app',
    data:{
      url:"http://www.baidu.com",
      counter:0,
      msg:"收到货卡号是"
    }
    })

v-bind 动态绑定class

<div id="app" :class={addRed:false}>{{msg}}

key:value

value字符串还是变量：给value加单引号则为字符串。否则即为变量。

格式：class={key:boolean}

如为true, class会添加属性值，否则不会
动态绑定只要动态去更改ture|false 即可，

1. 将此设置为data的一个属性值即可。当存在多个class会自动合并。

<div id="app" :class={addRed:isAdd}>{{msg}}
data:{
      isaddRed:false
      }

2. 也可设置方法返回对象过去

<div id="app" class="add" :class="addClass()">{{msg}}
addClass:function(){
          return {addRed:this.isaddRed}
      }

v-bind 动态绑定style

key:css属性

<div id="app" :style="{fontSize:fSize+'px'}">
//  省略 Vue 部分代码为data中的属性
      fSize:10,

computed 计算属性

在其中可以定义属性，其定义的属性是由方法产生的。因为是属性在对其定义的时候尽量不以get、set开头。

注:computed 其有缓存，多次使用，其计算属性只会调用一次。
methods 重复使用都会去重新调用，当methods中有大量代码时，其性能相比较computed会很差

<div id="app" >
  {{myFunName}}
 </div>
 // 省略 Vue 部分代码，其属相登记与data、methods 同级
  computed:{
  // 为get方法
    myFunName:function(){
      return this.lastName+this.firstName
    }

计算属相的本质是实现其属性的get、set方法，但是一般不需要去实现set方法因而其简写的方式为上面所示

 myFunName:{
      set:function(newValue){

      },
      get:function(){
        return "myName"
      }
    }