Vue04--v-once、v-html、v-text、v-pre、v-cloak、v-bind(单向绑定)、v-bind 样式、computed 计算属性、watch监听属性

指令

v-once

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

<div id="app" v-once >

v-html

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

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

v-html的使用存在安全问题，容易XSS攻击，如：
若跳转地址，则会被携带cookie信息

	vht:'<a href="javascript:alert(document.cookie)">擦速度</a>',

<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

按表达式解析
数据单向绑定:数据从data流向界面
语法糖（简写）: :

eg: <a v-bind:href="url">百度</a>’
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"
      }
    }

简写

直接写计算属性名，其默认就为get方法

  computed: {
  	xy() {
  		return this.x+"-"+this.y 
  	}
  },

watch 监听属性

监听已有属性
deep: true 开启深度监视

  watch:{
	  所监听的属性名:{
		  handler(newValue,oldValue){
			  console.log(newValue)
		  }
	  }
  },

简写

watch:{
属性名(newValue,oldValue){

}

},

watch和computed区别

1、computed等完成的watch也可以完成
2、watch能完成的computed不移动完，例如watch可以进行异步操作等

  watch:{
	xy(val){
		setTimeout(() => {
			console.log(999999)
		}, 2000);
	}
  },