vue 框架学习（4）指令和计算属性computed

迷南。 2022-10-29 04:28 151阅读 0赞

## 第三节：Vue模板语法（插值、指令、缩写） ##

#### 一、插值 ####

##### 1.1 文本 #####

**数据绑定最常见的形式就是使用“Mustache”语法 (`双大括号`) 的文本插值，使用方式就是直接用\{ \{vue.data.变量\}\}**

##### 1.2 展示HTML v-html指令 #####

`<h1 v-html="urlStr"></h1>`

##### 1.3 Attribute属性 #####

`v-bind 指令`

**对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同**

**如果 disabledVal 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 元素中。**

#### 二、指令 ####

**指令 (Directives) 是带有`v- 前缀的特殊 attribute`。指令 attribute 的值预期是单个 `JavaScript 表达式`。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。**

## 第四节：Vue的指令说明和使用 ##

#### 一、常用指令使用说明 ####

##### 2.1 v-text #####

v-text指令的作用是：设置标签的文本值（textContent）  
缺点：就是会替换原来的本事上的内容，不够灵活使用，如果有结合使用还有用\{ \{-\}\}会好一点，然后使用表达式

##### 2.2 v-html #####

v-html指令的作用是：设置标签的innerHTML，内容中有html结构会被解析为标签

##### 2.3 v-show和v-if/v-else/v-else-if #####

##### 2.4 v-if 和 v-show的使用、区别 #####

使用

v-if是我们常用的判断表达式使用，可以根据表达式的值在DOM中`生成或移除`一个元素。

v-show和v-if有同样的展示效果，但是`v-show不是生成或移除一个元素，是直接生成一个 style=“display:none”来隐藏标签或者是html`。

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8awJVLT5-1612767664021)(README\_files/1.jpg)\]

##### 2.5 v-if vs v-show 区别 #####

v-if 是`“真正”的条件渲染`，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。  
相比之下，v-show 就简单得多——`不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换`。  
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

##### 2.6 v-if / v-else-if / v-else的使用 #####

v-if / v-else-if / v-else 其实是多个条件判断使用，满足那个条件就展示那个数据或者HTML，这个我感觉这个界面判断方式有点不好，如果通过写一个函数，写好判断逻辑在界面展示会更好，这样的界面会更加简洁，没有那么多逻辑，界面仅仅是一个展示，设计太多逻辑，会加大重写负担

##### 2.7 v-for #####

当我们需要把一个数组或者一个对象循环显示的时候，这时候我们可以使用v-for，使用v-for要使用特定语法“ alias in expression”

<h1 v-for="(item, index) in strData1">{
       {item.name + ":" + index}}</h1>

##### 2.8 v-on #####

v-on 绑定事件监听器

用在`普通元素上时，只能监听原生 DOM 事件`。用在`自定义元素组件上时，也可以监听子组件触发的自定义事件`。

1) 简单使用
    	<a v-on:click="doSomething">...</a>
    	
    	<a @click="doSomething">...</a>
    	
    	<a @[event]="doSomething"> ... </a>
     2) 传参  
        方式：无参数，DOM对象，参数，参数和DOM对象
    	
    	
    	<button v-on:click="but2()">按钮2</button>
    	
    	<button v-on:click="but2">按钮2 原生DOM对象</button>
    	
    	<button v-on:click="but3(1)">按钮3</button>
    	
    	<button v-on:click="but4(1, $event)">按钮4</button>

##### 2.9 事件修饰符 #####

stop - 调用 event.stopPropagation()。

prevent - 调用 event.preventDefault()。

capture - 添加事件侦听器时使用 capture 模式。

self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

\{keyCode | keyAlias\} - 只当事件是从特定键触发时才触发回调。

native - 监听组件根元素的原生事件。

once - 只触发一次回调。

left - (2.2.0) 只当点击鼠标左键时触发。

right - (2.2.0) 只当点击鼠标右键时触发。

middle - (2.2.0) 只当点击鼠标中键时触发。

passive - (2.3.0) 以 \{ passive: true \} 模式添加侦听器

##### 2.10 v-bind #####

<div v-bind:id="idValue">你好</div>
        
        <img v-bind:src="srcUrl1">
         
        <img :src="srcUrl1">

##### 2.11 v-model #####

v-model指令放`input、select、textarea`三个元素上，会创建双向绑定，就是input、select、textarea上的值改变了会把v-model的data改变，反之v-model的data改变会改变input、select、textarea上的值

<input v-model="message" />

v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：

1.v-bind绑定一个value属性

2.v-on指令给当前元素绑定input事件

<input v-bind:value="message" v-on:input="message = $event.target.value">

\#\#\#\#修饰符：

.lazy - 取代 input 监听 change 事件  
.number - 输入字符串转为有效的数字  
.trim - 输入首尾空格过滤

##### 2.12 v-pre #####

v-pre 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。  
比如这个就会直接输出“\{ \{message\}\},你好”，不会把\{ \{message\}\}直接转译操作

##### 2.13 v-cloak #####

`v-cloak 这个指令保持在元素上直到关联实例结束编译`。和 CSS 规则如 \[v-cloak\] \{ display: none \} 一起用时，这个指令可以隐藏未编译的 Mustache 标签`直到实例准备完毕`。

实际情况：Vue的Mustache语法翻译可能可以延迟的情况，`延迟的情况下我们写的{ {data}}}就出现一个没有翻译的“{ {data}}”,在界面上展示出就会不友好`，这时候就需要可以使用v-cloak指令，这个指令就是当数据未解析完成时会渲染什么样式,当数据渲染出来之后v-cloak的样式就失效了

使用v-cloak的注意情况

在实际项目中，我们常通过 @import 来加载 css 文件.

@import "style.css"

而 @import 是在页面 DOM 完全载入后才会进行加载，如果我们将 \[v-cloak\] 写在 @import 加载的 css 文件中，就会导致页面仍旧闪烁。  
为了避免这种情况，我们可以将 \[v-cloak\] 写在`link 引入的 css 中`，或者`写一个内联 css 样式`，这样就得到了解决。

##### 2.14 v-one #####

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。就是后面最修改data的值，也不会改变之前的值

## 第五节：Vue的计算属性使用 ##

#### 一、什么是计算属性 ####

如果我们要把data这两个值拼接一起显示的时候，我之前的写法就是这个直接使用两个插值文本或者是表达式来实现效果

其实Vue的设计初衷就是为了把界面的逻辑最简单化，太多的逻辑放在界面上，后续如果修改起来会难以维护，这时候Vue给了我们更好的一个功能可以显示这个问题就是 计算属性 computed。

看下面的列子，说明一下计算属性使用，其实计算属性就是相当于一个属性，只是多了一层运算步骤。  
在例子中 name3就是我们说的计算属性，它的值是通过data的name1和name2值处理得到的。vue的计算属性有一个很好的地方就是计算属性使用的data值，会形成绑定，就说你在计算属性用了那个data的值计算，如果data的值改变了，计算属性的计算值也会跟着改变，不需要做其他操作，都是响应式的

#### 二、计算属性VS方法 ####

####  ####

计算属性的使用我们都知道了，根据之前我们写的实现模式中，我们把计算属性改成方法实现也是可以实现同样的效果。

但是两个又有什么不同的地方，两者之间最大的区别就是：缓存。

计算属性是基于它们的响应式依赖进行缓存，只有相关响应式依赖发生改变时才会重新计算值。其他时候都是直接返回的，不需要在次计算。  
\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cs2Eo36r-1612767664024)(README\_files/2.jpg)\]

在界面上多次使用了name3 和getName3。根据控制台的输出情况，`计算属性只执行了一次，而方法是你用了几次就会执行几次`。当name1和name2发生改变时，也是一样的情况，计算属性只执行了一次，而方法是你用了几次就会执行几次

注意

1.如果你的一个属性使用很频繁，而且运算量很大，如果是你用方法就有一个问题，就是性能开销特别大，就会界面出现卡顿的现象

2.两者之前的使用，都是开具体需求决定的，`你不想缓存起来就用方法，想缓存起来就用计算属性`

#### 三、计算属性set和get ####

是属性都会有set、get方法，计算属性也是一样。只是我们平时都是直接使用它的get，那我们要怎么写set呢

看下面例子

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>hello Vue</title>
    </head>
    <body>
    <div id="app">
        <h1>{
       {name1}} {
       {name2}}</h1>
        <h1>{
       {name1 + ' ' + name2}}</h1>
        
        <h1>{
       {name3}}</h1>
    	 
        <h1>{
       {getName3()}}</h1>
    	
    	<h1>{
       {name3}}</h1>
    	<h1>{
       {getName3()}}</h1>
    	
    	<h1>{
       {name4}}</h1>
    </div>
    </body>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                name1: "hello",
                name2: "Vue"
            },
            computed:{
                name3 : function () {
    				console.log("使用属性")
                    return this.name1 + ' ' + this.name2;
                },
    			name4: {
    				get: function () {
    					console.log("get值")
    					return this.name1 + ' ' + this.name2
    				},
    				/*控制台直接修改 app.name3 = 'a b'，name1改成a, name2改成b */
    				set: function (value) {
    					console.log("set值")
    					let names = value.split(' ');
    					this.name1 = names[0];
    					this.name2 = names[1];
    				}
    		    }
            },
    		methods:{
    			 getName3: function () {
    				console.log("使用方法methods")
    				return this.name1 + ' ' + this.name2;
    			}
    		}
        });
    </script>
    </html>