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

最新推荐文章于 2024-08-09 15:29:32 发布

Grimoire_ll

最新推荐文章于 2024-08-09 15:29:32 发布

阅读量379

点赞数

分类专栏：学习Vue遇坑之路文章标签： vue.js

本文链接：https://blog.csdn.net/qq_42264597/article/details/114649148

版权

学习Vue遇坑之路专栏收录该内容

15 篇文章 1 订阅

订阅专栏

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）设置过滤器

以下以表格做过滤器为例

<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元素上的属性。

<a v-bind:href = "url"></a>
//缩写
<a :hreg="url"></a>

在这种数据绑定中，最常见的就是两个需求就是元素的样式名称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>