Vue学习笔记三 vue3入门教程

一：Vue的指令??

指令会影响元素的渲染行为，指令始终以v-开头。1.循环指令?v-for循环遍历数组：

 <li v-for="(one,i) in orgList">
	机构名称：{{one.name}} 
 </li>

2.条件渲染指令?

v-if v-else-if v-else:控制元素的生成。

 <span v-if="one.num>0"> 数据：{{one.num}}条</span> 
 <span v-else>数据：无</span>

3.v-html 和 v-text指令?

v-html 可以识别HTML标签，解析后输出。?v-text 不会识别HTLM标签，把HTML标签当做字符串输出。

 <div v-html="变量名"></div>
 <div v-text="变量名"></div>

4.事件绑定指令?

该指令十分常用，因此提供了简写：v-on:click = @click；?

事件支持一些指令修饰符：如prevent （阻止默认事件）、stop（阻止事件冒泡）等；?事件参数会自动传递；

 <button @click="changeNum(one,one.num-1)">减少</button>

5.动态绑定指令?

v-bind:绑定动态属性，可以简写为一个冒号：?

该指令的值是js代码，可以是变量，也可以是函数。

<div :style='JavaScript代码'>文本</div>

6.v-show指令?

v-show：控制元素可见度。它其实是将元素的display属性设置为none。指令的内容最终会被解析成布尔值。值为true元素显示，值为false元素隐藏。

<div v-show='true'>是否显示</div>

7.v-model指令?

双向绑定指令，指的就是vue实例中的data与其渲染的dom元素上的内容保持一致。常用于表单元素。

 <input v-model="绑定的变量名"/>

8.v-slot指令?

具名插槽：指定的位置输出插槽，v-slot后写的是插槽的名称。

<template v-slot:header>
  //值与组件slot的name属性对应。
</template>
<slot name='header' />

作用域插槽：在写插槽时可以获取到插槽作用域的值。

<template v-slot:header="message">
   <div>{{message.name}}</div>
</template>
 <slot name='header' :name="name" />

二：Vue的特殊属性

1.最重要的特殊属性Key：?

在v-for循环渲染视图的时候，需要用来key标识循环的元素，不用的时候会有警告提示。该属性可以干预diff算法，在同一层级，key值相同的节点会进行比对，key值不同的节点则不会。不加key属性，不会刷新虚拟DOM 树。?

在循环节点中，Vue建议为每个节点添加key值，而且必须是稳定的key值，一般为id，不能是下标，因为下标是可变的。

2.计算属性?在需要进行对数据进行计算的时候，直接在页面的{{}}中写计算式是可以实现功能，但代码可读性较差。当然用method写方法也可以实现，但事实上，vue给我们提供了一个更好的解决方案叫计算属性computed。

 computed:{
	 allSum:function(){
	     return this.num1+ this.num2;
	 }

计算属性和方法的区别：?

计算属性可以赋值，而方法不行；?

计算属性会进行结果缓存，如果依赖不变，会直接使用缓存结果，不会重新计算；

凡是根据已有数据计算得到新数据的无参函数，都应该尽量写成计算属性而不是写成方法。