【博学谷学习记录】超强总结,用心分享|前端开发基础知识总结-Vue基础二

盒子的显示隐藏:v-show 和v-if v-else v-else-if

 v-show='true' :实质是控制元素的css样式:display:none,适合频繁切换

v-if='true' :实质是在动态的创建或者删除元素节点,是惰性的,如果初始值为false,那么这些元素就直接不创建

v-model:给表单元素使用,双向数据绑定

        数据变化,视图会跟着变,视图变化,数据要跟着变 v-model='值',会忽略掉表单元素原本的value,checked等初始值

• .number 转数字,以parseFloat转成数字类型
• .trim 去除首位空白字符
• .lazy 在change时触发,而非input时,等表单失去焦点,才把值赋值给vue数据变量

vue指令

1. v-for:遍历数组或者对象         
   1. 遍历语法:v-for='item in 数组名'     v-for='(item,index)in 数组名'
   2. 遍历对象的语法:v-for='(value,key) in 对象名'
   3. 遍历数字: v-for='item in 数字'

动态设置class和style

        语法:   :class='对象/数组'

                        对象:如果键值对的值为true,那么就有这个类,否则没有这个类

                        数组:数组中所有的类,都会添加到盒子上

        语法::style='对象/数组'

                        :style='{css属性名:值}'

计算属性

1. 计算属性必须定义在computed节点中
2. 计算属性必须是一个function,计算属性必须有返回值
3. 计算属性不能被当做方法调用,要作为属性来用

特点:1.计算完了一次，就会自动进行缓存

        2.如果依赖项不变，下次使用直接直接从缓存区

        3.直到依赖项改变，函数才会重新执行并重新缓存

完整写法：get(){}set(value){给计算属性变量赋值的使用，使用完整写法}

侦听器：watch 监听数据的变化

        watch：可以侦听到data/computed属性值的变化

        深度侦听&立即执行 watch:{

                                                要真听的属性名:{immediate:true,//立即执行

                                                                          deep:true,

                                                                           handler(new,old){}      }

                                                }