Vue2学习笔记01——Vue的使用

一、class与style绑定

绑定class样式： :class="XXX" , xxx为data中的样式变量名称（v-bind）,适用于样式的类名不确定，需要动态指定。

绑定class样式—— 字符串写法，适用于：样式类名不确定，需要动态指定
绑定class样式—— 数组写法，适用于：要绑定的样式个数不确定，名字也不确定

绑定class样式—— 对象写法，适用于：要绑定的样式个数确定，名字也确定，但需要动态决定用不用的场景。

    <div id="app">
        <!-- 字符串样式 -->
        <div class="one" :class="style1"></div> <br/><br/>
        <!-- 数组样式 -->
        <div class="two" :class="style2">文字</div> <br/><br/>
        <!-- 对象样式 -->
        <div class="three" :class="style3"></div> <br/><br/>
    </div>

</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                style1: "normal",
                style2: ['fanda1', 'fanda2', 'fanda3'], //里面加入的为三个类名
                //两个样式名，均为false则均不会给元素添加样式
                style3: {
                    back1: true,
                    back2: false
                }

            }
        },
    })
 </script>

绑定style样式：

字符串写法

对象写法

  new Vue({
  el: "#app",
  data() {
      return {
          style1: "normal",
          style2: ['fanda1', 'fanda2', 'fanda3'], //里面加入的为三个类名
          //两个样式名，均为false则均不会给元素添加样式
          style3: {
              back1: true,
              back2: false
          },
          skf: "red",
          fsize: 100,
          styleObj: {
              color: "red",
              fontSize: "100px"
          }
       }
   },
})

数组写法

<!-- 绑定style样式 ,普通写法-->
<div class="four" :style="{fontSize:fsize+'px'}">天天</div>
  <!-- 对象写法 -->
 <div class="five" :style="styleObj">对象写法</div>

二、条件渲染

使用v-show=""做条件渲染
- 写法：v-show="表达式"
- 适用于：切换频率较高的场景
- 特带：不展示DOM元素未被移除，仅仅使用样式隐藏掉
使用v-if=""做条件渲染
- 写法：v-if="表达式", v-else-if="表达式", v-else="表达式"
- 适用于：切换频率较低的场景
- 特点：不展示DOM元素直接被移除
- 注意: v-if可以和v-else-if 、v-else一起使用，但是要求结构不能被打断
使用v-if的时候，元素可能无法获取到，但使用v-show的时候，元素一定能够获取到

如果想给多个元素增加相同的条件渲染可以使用template进行包裹，不会影响原先的DOM结构

<!-- template只能和v-if配合使用 -->
 <template v-if="n==2">
    <h2>Agular</h2>
    <h2>React</h2>
    <h2>Vue</h2>
 </template>

三、列表渲染

v-for指令
- 用于展示列表数据
- 语法：v-for=”(item,index) in xxx” :key=”yyy”
- 可遍历：数组，对象，字符串（用得很少），指定次数（用得很少）
key的作用与原理
虚拟DOM中key的作用：
- key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】
- 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
对比规则：
- 旧虚拟DOM中找到与新虚拟DOM相同的key:(1)若虚拟DOM内容没变，直接使用之前的真实DOM；（2）若虚拟DOM中的内容发生变化了，则生成新的真实DOM,随后替换掉页面中之前的真实DOM
- 旧虚拟DOM中未找到与新虚拟DOM相同的Key，创建新的真实DOM，随后渲染到页面
使用index作为key会引发的问题：
- 若对数据进行：逆序添加、逆序删除等破坏顺序的操作：会产生没有必要的真实DOM更新=>界面显示没问题，但是效率比较低
- 如果结构中还包含输入类DOM：会产生错误DOM更新=>页面问题
开发中应该尽量采用唯一的数据标识作为 key 绑定的值

四、列表过滤

对列表中的元素进行一定条件的筛选

显示包含输入框字符的字符串

按年龄升序排列个人信息等

new Vue({
 el: "#app",
 data() {
     return {
         val: "",
         user: [{
                 id: 1,
                 name: "马冬梅",
                 age: 45,
                 sex: "女"
             }, {
                 id: 2,
                 name: "周冬雨",
                 age: 34,
                 sex: "女"
             }, {
                 id: 3,
                 name: "周杰伦",
                 age: 39,
                 sex: "男"
             }, {
                 id: 4,
                 name: "温兆伦",
                 age: 43,
                 sex: "男"
             }   
         ],
        // filuser: [],
     }
 },
 //计算属性实现
 computed: {
     filuser() {
         return this.user.filter((p) => {
             return p.name.indexOf(this.val) !== -1
         }   
     }
 }
 //watch属性实现
  // watch: {
  //     val: {
  //         immediate: true, //立即执行，在加载时会执行一次
  //         handler(val) {
  //             this.filuser = this.user.filter((p) => {
  //                 return p.name.indexOf(val) !== -1
  //             })
  //         }
  //     }
  // }

计算属性实现升序降序排列

  computed: {
   filuser() {
       const arr = this.user.filter((p) => {
           return p.name.indexOf(this.val) !== -1
       })
       //istype=0代表原来顺序，1为升序，2为降序
       if (this.istype != 0) {
           arr.sort((p1, p2) => {
              return this.istype == 1 ? p1.age - p2.age : p2.age - p1.age
           })
       }
       console.log(arr);
       return arr;
   }
}

五、Vue监测数据的原理-对象，数组

Vue会监视data中所有层次的数据
如何监测对象中的数据：
- 通过setter实现监视，且需要在new Vue 时就传入要监视的数据
- 对于对象中后追加的属性，Vue默认不做响应式处理
- 如果需要给后添加的属性做响应式需要使用API：（1）Vue.set(target, propertyName/index, value )；（2）vm.$set( target, propertyName/index, value )
如何监测数组中的数据：
- 通过包裹数组更新元素的方法实现，本质上就是做了两件事：
- 调用原生对应的方法对数组进行更新
- 重新解析模板进而更新页面
在Vue修改数组中的某个元素一定要使用如下方法：
- 使用API:push() , pop() ,shift , unshift() , splice() , reverse() , sort()
- Vue.set() 或者 vm.$set()
- 注意： Vue.set() 和 vm.$set() 不能给vm 或vm的根数据对象添加属性。

六、收集表单数据

若: <input type="text"/>,则v-model收集的是value值，用户输入的就是value值
若: <input type="radio"/>,则v-model收集的是value值，需要给标签设置value值
若: <input type="checkbox"/>
- 没有配置input的value值属性，那么收集的就是checked（勾选or未勾选，为布尔值）
- 配置input的 value 属性之后：（1）v-model的初始值是非数组，那么收集的就是checked（勾选or未勾选，为布尔值）；（2）v-model的初始值是数组，那么收集的就是value值组成的数组
注:v-model的三个修饰符:
- lazy： 失去焦点时再收集数据
- number: 输入的字符串转为有效的数字
- trim: 输入首尾空格过滤

七、过滤器

过滤器：对需要显示的数据进行特性格式化之后再进行显示（适用于一些简单逻辑的处理）
语法：
- 注册过滤器：Vue.filter(name,callback) 或者 new Vue({ filters:{}})
- 使用过滤器： {{ XXX | 过滤器名称 }}, v-bind: 属性="xxx | 过滤器名称"
注：
- 过滤器也可以接收额外的参数，多个过滤器也可以串联使用
- 并没有改变原本数据，是产生新的对应数据进行渲染

具体实践：

 <body>
    <div id="app">
        <!-- 显示时间戳 -->
        <h2>现在的时间为：{{datetime}}</h2>
        <!-- 显示时间，正常格式 -->
        <h2> 现在时间为： {{datetime | formtime}}</h2>
        <!-- 显示时间，正常格式 时分秒-->
    <h2> 现在时间为： {{datetime | formtime('YYYY年MM月DD日 HH:mm:ss')}}</h2>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            datetime: Date.now(),

        },
        filters: {
            formtime(value, str = "YYYY年MM月DD日") {
                return dayjs(value).format(str)
            }
        }
    })
</script>

八、内置指令

v-text:指令
- 作用：向其所在节点渲染文本内容
- 与插值语法的区别：v-text会替换掉节点中的内容，则不会
v-html：指令
- 作用：向指定节点中渲染包含html结构的内容
- 与插值语法的区别：
  - v-html会替换掉节点中所有的内容，不会
  - v-html可以识别html结构
- 严重注意v-html的安全性问题
  - 在网站上动态渲染任意HTML是危险的，容易导致xss攻击
  - 一定要在可信的内容上使用v-html,永远不要在用户提交的内容上使用
v-cloak指令（没有值）
- 本质是一个特殊的属性，Vue实例创建完毕并接管实例之后，会删除v-cloak属性。
- 使用css的属性选择器配合使用可以解决网速慢时页面展示出的问题
v-once指令（没有值）
- v-once所在节点在初次渲染后，视为静态内容
- 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
v-pre指令（没有值）
- 跳过其所在节点的编译过程
- 可以用它跳过没有使用指令语法、没有使用插值语法的节点，会加快编译

九、自定义指令`directives:{}`

定义语法：

局部指令：

new Vue({
    //写法1
   directives:{
       指令名: 配置对象
   }
   //或者写法2，函数形式
    directives:{
       指令名(){}  
   }
})
//具体代码对比
directives: {
big(element, binding) {
    element.innerText = binding.value * 10
},
fbind: {
    //指令与元素成功绑定时（一上来）
    bind(element, binding) {
        element.value = binding.value
    },
    //指令所在元素被插入页面时
    inserted(element, binding) {
        element.focus() //获得焦点
    },
    //指令所在模板被重新解析时调用
    update(element, binding) {
        element.value = binding.value
     },
  }
}

全局指令：

1
2
3

Vue.directive('指令名','配置对象')
//或者
Vue.directive('指令名','回调函数')

配置对象中从常用的三个回调
- bind():指令与元素成功绑定时调用
- inserted():指令在元素被插入页面时候调用
- update(): 指令所在模板结构被重新解析时调用
备注：
- 指令定义时不加 v- ,但是使用时需要加 v-
- 指令如果有多个单词，要使用kebab-case命名方式，不要使用camelCase命名方式

十、生命周期

生命周期：又叫生命周期回调函数、生命周期函数、生命周期钩子
生命周期函数时Vue在关键时刻帮我们调用的一些特殊名称的函数
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
生命周期中的this指向是vm或者组件实例对象。
常用的生命周期钩子：
- mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始操作】
- beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】
关于销毁Vue实例
- 销毁后借助Vue开发工具看不到任何信息
- 销毁后自定义事件会消失，但原生DOM事件依然有效。
- 一般不会在beforeDestory操作数据，因为即便操作数据，也不会再触发更新流程了。