【Vue.js】之常用指令、监听与计算属性、Class与Style

指令、插值

• 插值，表达式
• 指令，动态属性
• v-html: 会有XSS风险，会覆盖子组件,解析html标签
• v-text: 会有XSS风险，会覆盖子组件,不解析html标签

<template>
  <div>
    <h3>Tpl的使用</h3>
    <p>文本插值 {{message}}</p>
    <p>JS 表达式{{ flag ? 'yes' : 'no' }} (只能是表达式, 不能是JS语句)</p>
    <p :id = "dynamicId">动态属性{{dynamicId}}</p>
    <hr/>
    <p v-html = "rawHtml">
      <span>有XSS风险</span>
      <span>【Attention】使用v-html后将会覆盖子元素</span>
    </p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: 'hello vue',
      flag: false,
      dynamicId: `id-${Date.now()}`,
      rawHtml: `指令 -原始html <b>加粗</b> <i>斜体</i>`
    }
  }
}
</script>

<style scoped>

</style>

2.computed与watch

computed有缓存, data不变不会重新计算

在Vue应用中，在模板中双向绑定一些数据或者表达式，但是表达式如果过长，或者逻辑更为复杂时，就会变得臃肿甚至难以维护和阅读

computed: {
	name () {
		return 值
	}
}

computed: {
	name: {
		get () {
			return 值
		},
		set (value) {
			
		}
	}
}

<template>
  <div>
    <h3>Computed Demo</h3>
    <div>
      <p>num {{num}}</p>
      <p>double1 {{double1}}</p>
      <input v-model="double2">
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      num: 20
    }
  },
  computed: {
    double1 () {
      return this.num * 2
    },
    double2: {
      get () {
        return this.num * 2
      },
      set (val) {
        this.num = val / 2
      }
    }
  }
}
</script>

<style>
</style>

computed里面可以放置一些业务逻辑代码，一定记得return

计算属性的名称不能和data里面的属性重名, 也不能和methods里面的名称重名

watch如何进行深度监听？

watch监听引用类型, 拿不到oldValue

<template>
  <div>
    <input v-model="name" />
    <input v-model="info.city" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      name: '双越',
      info: {
        city: '北京'
      }
    }
  },
  watch: {
    name (oldVal, val) {
      // eslint-disable-next-line
      console.log("watch name", oldVal, val); // 值类型，可正常拿到 oldVal 和 val
    },
    info: {
      handler (oldVal, val) {
        // eslint-disable-next-line
        console.log("watch info", oldVal, val); // 引用类型，拿不到 oldVal 。因为指针相同，此时已经指向了新的 val
      },
      deep: true // 深度监听
    }
  }
}
</script>

watch监听器的用法相当于是我们监视一个数据的变化，在这个数据变化时执行一些操作，这个操作可以是任何操作

声明：

watch: {
	要监听的属性: function (newValue, oldValue) {},
	要监听的属性: '函数名' // methods中的函数
	要监听的属性: {
        handler (newValue, oldValue) {
        	console.log('watch', newUser)
        }
    }
}

如果监听的属性是引用类型(对象/数组)时，默认不会监听引用类型内部数据的改变， 需要开启深度监听才能监听内部数据的改变

user: {
    handler (newUser) {
    	console.log('watch', newUser)
        if (newUser.username === 'admin') {
            this.usernameError = '账号已经注册'
        } else {
            this.usernameError = '可以使用'
        }
    },
    deep: true // 是否开启深度监听, 不推荐使用
}

推荐使用：

'user.username' (newValue) {
	console.log('watch', newValue)
}

数组的定义方式

'user.username': [
    'checkUserName1', // methods中的函数
    'checkUserName2',
    function (newValue) {
    	console.log('watch checkUserNam3', newValue)
    },
    {
        handler (newValue) {
            console.log('watch handler', newValue)
        }
    }
]

初始化时触发监听

msg: {
handler () {
	console.log('watch msg')
},
	immediate: true // 是否初始化时触发监听
},

computed与watch的区别

computed:
计算属性的结果会被缓存, 除非依赖的响应属性变化时才会改变
watch: 监听某一个值，当被监听的值发生改变时，执行相关操作
与computed的区别是: watch更加适用于监听某一个值的变化，并做对应的操作，而computed适用于计算已有的值并返回结果。

Class与Style

• 使用动态属性
• 使用驼峰式写法

<template>
  <div>
      <p :class="{black:isBlack, yellow:isYellow}">使用class</p>
      <p :class="[black, yellow]">使用class(数组)</p>
      <p :style="styleData">使用 style</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isBlack: true,
      isYellow: true,

      black: 'black',
      yellow: 'yellow',

      styleData: {
        fontSize: '40px',
        color: 'red',
        backgroundColor: '#ccc'
      }
    }
  }
}
</script>

<style scoped>
.black {
  background-color: #999;
}
.yellow {
  color: yellow;
}
</style>

style的绑定

• 字符串

<div :style="`font-size: ${fontSize}px;`">hello world</div>

• 对象

<div :style="divStyle">hello world</div>
divStyle: {
  color: 'red',
  fontSize: '40px' // 不会主动添加单位
}

• 数组

<div :style="[divStyle, divStyle2]">hello world</div>
<!--divStyle, divStyle2必须都是对象-->
divStyle: {
  color: 'red',
fontSize: '40px' // 不会主动添加单位
},
divStyle2: {
  textDecoration: 'underline'
}

绑定的style会和非绑定的style合并

<div :style="[divStyle, divStyle2]" style="font-weight: 700;">hello world</div>

绑定class

• 字符串

<div :class="divClass1">您好，世界！</div>

• 对象

{
	属性: boolean  属性就是class的名称
}
<div :cla ss="{div2: false, a: true}">您好，世界！</div>