vue指令+计算属性computed

一、v-text
二、v-html
三、v-show
- 1、v-if和v-show对比
- 2、如何选择
四、v-if
五、 v-else
六、v-else-if
七、v-for
- 1、遍历数组
  - 1.1、不含索引
  - 1.2、含索引
- 2、遍历对象
  - 2.1、获取value
  - 2.2、获取value和key
  - 2.3、获取value、key和index
- 3、v-for绑定key和不绑定key的区别
八、v-on
- 1、v-on参数
  - 1.1、情况一（方法不需参数）
  - 1.2、情况二（方法需要一个参数）
  - 1.3、情况三（方法需要其他参数和event）
- 2、修饰符
  - 2.1、.stop
  - 2.2、.prevent
  - 2.3、.{keyCode | keyAlias}
  - 2.4、.once
  - 2.5、.native
九、v-bind
- 1、绑定基本属性
- 2、绑定class
  - 2.1、对象语法
  - 2.2、数组语法（了解）
- 3、绑定style
  - 3.1、对象语法
  - 3.2、数组语法（了解）
十、v-model
- 1、修饰符
  - 1.1、lazy
  - 1.2、number
  - 1.3、trim
- 2、v-model原理
- 3、v-model结合radio类型
- 4、v-model结合checkbox类型
- 5、v-model结合select类型
十一、v-slot
- 1、插槽类型
  - 1.1、匿名插槽（隐含name=“default”）
  - 1.2、具名插槽
  - 1.3、作用域插槽（父组件替换插槽的标签，但是内容由子组件来提供）
- 2、v-slot
十二、v-pre（不需要表达式）
十三、 v-cloak（不需要表达式）
十四、v-once（不需要表达式）
十五、计算属性computed
- 1、计算属性的setter和getter
- 2、计算属性的缓存

一、v-text

与 Mustache比较相似：都用于将数据显示在界面中（没有Mustache灵活）

v-text

二、v-html

会将string的html解析出来并进行渲染

v-html

三、v-show

用法与v-if相似，也用于决定一个元素是否渲染

1、v-if和v-show对比

v-if：当条件为false时，包含v-if指令的元素，根本就不会存在于dom中
v-show：当条件为false时，v-show只是给我们的元素添加一个行内样式 display：none

2、如何选择

需要在显示与隐藏之间频繁切换时，使用v-show
只有一次切换时，使用v-if（根据服务器传入数据决定是否渲染，大量使用）

四、v-if

与js中if类似
Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件
原理：v-if后面的条件为false时，对应的元素以及其子元素不会渲染，根本没有不会有对应的标签出现在DOM中

五、 v-else

与js中else类似
Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件

六、v-else-if

与js中else if类似
Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件

七、v-for

1、遍历数组

1.1、不含索引

{{ item }}

1.2、含索引

{{ index+1 }}.{{ item }}

2、遍历对象

2.1、获取value

{{ item }}

2.2、获取value和key

{{ value }}-{{ key }}

2.3、获取value、key和index

{{ value }}-{{ key }}-{{ index }}

3、v-for绑定key和不绑定key的区别

主要在于虚拟dom的复用，绑定key可以更好的复用
不推荐使用index作为key（在最后插入输入，重新渲染最后一条，使用index没有问题。但在中间插入时，后面数据的index都会发生改变，都会重新进行渲染，与不绑定key效果一样）
有相同父元素的子元素必须有独特的key，重复的key会造成渲染错误
官方示例：
{{ item.text }}

v-for

八、v-on

绑定事件监听器
语法糖 @

1、v-on参数

1.1、情况一（方法不需参数）

调用方法时可以加()，也可以不加()

1.2、情况二（方法需要一个参数）

调用方法时不加()：该形参被赋值为原生事件event
调用方法时加()：()中传入形参对应的实参。如果不传参数，形参会被赋值为undefined

1.3、情况三（方法需要其他参数和event）

调用方法时不加()：第一个形参被赋值为event，其他参数为undefined
调用方法时加()：()中传入形参对应的实参。如果传入参数个数少于方法需要的参数个数（包含不传），其他形参会被赋值为undefined。可以通过$event传入event事件

2、修饰符

2.1、.stop

调用event.stopPropagation()
停止冒泡

v-on.stop

2.2、.prevent

调用event.prevenDefault
阻止默认行为（如点击按钮表单自动提交）

v-on.prevent

2.3、.{keyCode | keyAlias}

只当事件是从特定键触发时才触发回调

v-on.keyCode

2.4、.once

只触发一次回调

v-on.once

2.5、.native

监听组件根元素的原生事件，不限于click事件（例如：调用组件时，直接使用@click无法监听到点击事件）
- // 无法监听click
- // 可以监听click

九、v-bind

动态绑定数据
语法糖 :

1、绑定基本属性

v-bind-base

2、绑定class

2.1、对象语法

v-bind-classObj

2.2、数组语法（了解）

v-bind-classArr

3、绑定style

3.1、对象语法

v-bind-styleObj

3.2、数组语法（了解）

v-bind-styleArr

十、v-model

1、修饰符

1.1、lazy

默认情况下，v-model默认是在input事件中同步输入框的数据的，也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变
lazy修饰符可以让数据在失去焦点或者回车时才会更新

1.2、number

默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理，但如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理
number修饰符可以让输入框中输入的内容自动转成数字类型
{{typeof age}}

1.3、trim

如果输入的内容首尾有很多空格，通常我们希望将其去除，trim修饰符可以过滤内容左右两边的空格

2、v-model原理




{{ message }}

3、v-model结合radio类型

v-model结合radio

4、v-model结合checkbox类型

v-model结合checkbox

5、v-model结合select类型

v-model结合select1
v-model结合select2

十一、v-slot

1、插槽类型

1.1、匿名插槽（隐含name=“default”）


    匿名插槽默认内容

1.2、具名插槽

1.3、作用域插槽（父组件替换插槽的标签，但是内容由子组件来提供）



    



{{ slotProps.data }}

作用域插槽示例：子组件中包括一组数据，比如：pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']，需要在多个界面进行展示（某些界面是以水平方向一一展示的，某些界面是以列表形式展示的）

v-slot1
v-slot2

2、v-slot

在vue2.6及已上版本，slot 和slot-scope已经开始废弃，有了新的替代: v-slot，v-slot只能用在template 上，和组件标签上
语法糖 #



    




{{ slotProps.data }}

十二、v-pre（不需要表达式）

v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法

v-pre

十三、 v-cloak（不需要表达式）

这个指令保持在元素上直到关联实例结束编译（vue解析完成后，元素上的v-cloak属性消失）

v-cloak

十四、v-once（不需要表达式）

元素和组件只渲染一次，不会随着数据的改变而改变

v-once

十五、计算属性computed

1、计算属性的setter和getter

每个计算属性都包含一个setter和一个getter
计算属性一般没有set方法，只读属性
使用时作为一个属性，不用加()
注意：如果计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过仍然可以将其实例作为函数的第一个参数来访问

var vm = new Vue({
    data: { a: 1 },
    computed: {
        // 仅读取 
        aDouble: function () { 
            return this.a * 2 
        }, 
        // 读取和设置 
        aPlus: { 
            get: function () {
                return this.a + 1
            }, 
            set: function (v) { 
                this.a = v - 1 
            }
        } 
    }
})
vm.aPlus // => 2
vm.aPlus = 3 
vm.a // => 2 
vm.aDouble // => 4

2、计算属性的缓存

计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算
注意：如果某个依赖 (比如非响应式 property) 在该实例范畴之外，则计算属性是不会被更新的

vue