Vue学习（一）——Vue基础知识总结

偏执的太偏执、 2021-09-07 06:16 553阅读 0赞

#### Vue基础知识总结（一） ####

el用于指定一个页面中已存在的DOM元素来挂载实例，它可以是HTMLElement，也可以是CSS选择器

###### 1、生命周期 ######

每个Vue实例创建时，都会经历一系列的初始化过程，同时也是调用响应的生命周期钩子，我们可以利用这些钩子，在合适的时机执行我们的业务逻辑。

(1)created 实例创建完成后调用，这个阶段完成了数据的观测，但尚未挂载

(2)mounted: el挂载到实例上后调用，一般我们的第一个业务逻辑从这里开始

(3)beforeDestroy: 实例销毁之前使用，主要用于解绑一些使用addEventListener监听的事件等

这些钩子与el 和data 类似 ，也是作为选项写入Vue实例内，并且钩子的this所指向的是调用它的Vue实例

###### 2、过滤器 ######

Vue支持在\{ \{\}\}插值的尾部添加一个管道符“(|)”,对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币犍为使用逗号分隔等。过滤的规则是自定义的，通过给Vue实例添加选项filters来设置。

比如 写时间过滤器

（1）设置过滤器

\{ \{scope.row.ntime | formatDate\}\}

以下以表格做过滤器为例

<el-table-column prop="ntime" label="发布时间" width="170px">
              <template slot-scope="scope">{
       {scope.row.ntime | formatDate}}</template>
            </el-table-column>

(2)全局设置时间表示不够10，前面+0

var padDate = function (value) {
      return value < 10 ? '0' + value:value ;
      
    }

(3)写过滤器代码

filters:{
        formatDate(value){
          var date = new Date(value);
          var year = date.getFullYear();
          var month = padDate(date.getMonth() +1 );
          var day = padDate(date.getDate());
          var hours = padDate(date.getHours());
          var minutes = padDate(date.getMinutes());
          var seconds = padDate(date.getSeconds());
          return year + '-' + month + '-' + day + '-' + hours + ':' + minutes +':' + seconds;
        }
      },

设置过滤器后的时间显示

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hd3Fj1lE-1615388402829)(G:\\可可爱爱的个人学习笔记\\springboot集成mybatis\\1615384026(1)\].jpg)

###### 3、V-bind及class 与style 绑定 ######

DOM元素经常会动态绑定一些class类名或者style样式

（1）V-bind: 主要用法是动态更新HTML元素上的属性。

在这种数据绑定中，最常见的就是两个需求就是元素的样式名称class和内联样式style的动态绑定

（2）v-bind绑定class的几种方法

第一种：给v-bind:class设置一个对象，可以动态地切换class

例如：

<template>
        <div>
            <div ；class = "{'active':isActive}"></div>
        </div>
    </template>
    
    <script>
    export default {
        name:'playing',
        data(){
            return{
                isActive:true,
            }
        }
    }
    </script>

上面的代码中active依赖于数据isActive，当它为true时，div才会拥有类名active，当它为false时，则没有类名active.

第二种：对象中也可以传入多个属性，来动态切换class，（：class可以与普通的class共存）

<template>
        <div>
            <div class="static" :class="{'active' :isActive,'error'}"></div>
        </div>
    </template>
    
    <script>
    export default {
        name:'playing',
        data(){
            return{
                isActive:true,
                isError:false
            }
        }
    }
    </script>

当：class内的表达式每项为真时，对应的类名就会被加载

第三种：：class的表达式过长或者逻辑复杂时，还可以绑定一个计算属性

（3）v-bind绑定内联样式

使用v-bind:style,可以给元素绑定内联样式，方式和：class类似，看起来就像是直接在元素上写CSS.

<template>
        <div>
            <div :style= "'color':color"></div>
        </div>
    </template>
    
    <script>
    export default {
        name:'playing',
        data(){
            return{
                color:'red',
            }
        }
    }
    </script>

###### 4、内置指令： ######

（1）

基本指令：v-cloak

v-cloak不需要表达式，它会在Vue实例结束编译后从绑定的HTML元素移除，经常与CSS的display:nine配合使用；

一般情况下，v-cloak是一个解决初始化慢导致页面闪动的最佳实践

基本指令：v-once

v-once是一个不需要表达式的指令，作用就是定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。首次渲染后，不再随着数据的变化重新渲染，将被视为静态内容。

（2）

条件渲染指令：v-if v-else

与JavaScript的条件语句if、else、else if类似，vue.js的条件指令可以根据表达式的值在DOM中渲染或销毁元素或者组件

条件渲染指令v-show

v-show的用法与v-if的用法基本一致，只不过v-show是改变元素CSS的属性display,当v-show的表达式为false时，元素会隐藏，查看DOM结构会看到元素上加载了内联样式，display:none;