对Vue的模板语法,计算属性,侦听器的分析

来源：懂视网责编：小采时间：2020-11-27 19:33:27

对Vue的模板语法,计算属性,侦听器的分析

对Vue的模板语法,计算属性,侦听器的分析:本篇文章给大家分享的内容是关于对Vue的模板语法,计算属性以及侦听器的分析。有需要的朋友可以参考一下。模板语法、计算属性和侦听器目标：1、熟练使用vue的模板语法2、理解计算属性与侦听器的用法以及应用场景 1. 模板语法<div id="app&

推荐度：

点击下载本文 文档为doc格式

导读对Vue的模板语法,计算属性,侦听器的分析:本篇文章给大家分享的内容是关于对Vue的模板语法,计算属性以及侦听器的分析。有需要的朋友可以参考一下。模板语法、计算属性和侦听器目标：1、熟练使用vue的模板语法2、理解计算属性与侦听器的用法以及应用场景 1. 模板语法<div id="app&

本篇文章给大家分享的内容是关于对Vue的模板语法,计算属性以及侦听器的分析。有需要的朋友可以参考一下。

模板语法、计算属性和侦听器

目标：

1、熟练使用vue的模板语法

2、理解计算属性与侦听器的用法以及应用场景

1. 模板语法

<div id="app">
<!-- 以下说绑定的值都可以写成js表达式形式 -->
<!-- {{}}: 双大括弧语法 -->
<!-- 如果不想让它响应更新,可以添加v-once指令(只渲染一次) -->
<p>
first: {{firstName}}<br>
last: {{lastName}}<br>
{{firstName + ' ' + lastName}}
</p>
<!-- 以下的绑定都会优先显示,也就是原本标签之间的值的会无效 -->
<!-- 使用v-html: html会被解析 -->
<p v-html="test"></p>
<!-- 使用v-text: html不会被解析,直接以文本

输出 --> <p v-text="test">123</p>  <img v-bind:height="imgHeight" :width="imgWidth" style="border: 1px solid #000"></img> </div> <script> var vm = new Vue({ el: '#app', data: { firstName: 'Chi', lastName: 'Chan', test: '<h1>哈哈哈<h1>', imgHeight: '200px', imgWidth: 200 } }) </script>

2. 计算属性(computed)

计算属性和方法时不一样, 计算属性是基于他们的依赖,进行缓存, 当计算属性的相关变量发生变化才会重新进行计算, 否则都是直接从缓存中读取之前的计算结果.(这样可以降低性能的消耗)

计算属性有getter和setter, 可以分别定义其设值和取值时会执行的函数.

3. 侦听器(watch)

如果我们只需要侦听一个数据,或者要在一个数据变化的时候执行一些操作(去改动多个数据),而且这些改动可能和这个数据没有依赖关系, 那么就可以使用侦听器了.

侦听器,可以侦听一个数据的变化,然后执行相应的操作.

4. 使用场景

1.watch擅长处理的场景：一个数据影响多个数据 (一个变化)
2.computed擅长处理的场景：一个数据受多个数据影响 (多个变化,最终返回一个数据)

3.method相对普通,需要主动去触发,还可能会让代码变得复杂,而且如果像以上这些场景的话,使用method会有更大的性能消耗.