Vue.js阶段汇总

最新推荐文章于 2022-11-23 22:53:20 发布

SanPhantom

最新推荐文章于 2022-11-23 22:53:20 发布

阅读量159

点赞数

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/qq_36752728/article/details/83017327

版权

前端专栏收录该内容

45 篇文章 2 订阅

订阅专栏

Vue.js阶段汇总

一、Vue指令

系统自带指令

v-if：判断指令
v-for：遍历指令
v-show：判断指令
v-model：数据绑定指令
v-text：文本指令
v-html：代码指令
v-bind：绑定指令

通常与节点的属性共同使用，一般可简写为：class=" "
v-on：绑定指令

通常与方法共同使用，一般可简写成@click=" "

自定义指令

自定义指令就是通过 v- 来完成我们自身需要的指令，可以通过自身的需求来完成。

自定义全局和局部的自定义指令：

    // 自定义全局指令 v-focus，为绑定的元素自动获取焦点：

    Vue.directive('focus', {

      inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用

        el.focus();

      }

    });



    // 自定义局部指令 v-color 和 v-font-weight，为绑定的元素设置指定的字体颜色 和 字体粗细：

      directives: {

        color: { // 为元素设置指定的字体颜色

          bind(el, binding) {

            el.style.color = binding.value;

          }

        },

        'font-weight': function (el, binding2) { // 自定义指令的简写形式，等同于定义了 bind 和 update 两个钩子函数

          el.style.fontWeight = binding2.value;

        }

      }

自定义指令的使用方式：

<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900" />

二、Vue过滤器

vue中的过滤器主要是调用filter方法，在filter中有两个参数，第一个参数为过滤器的名称，第二个参数为回调函数。

Vue.filter('过滤器名'， function() {
    
})

调用过滤器的方法为：

<td>{{item.ctime | dataFormat()}}</td>

三、methods和computed

methods

methods中包含的主要是方法，需要用户通过各种事件来触发其中的方法。

computed

computed又称计算属性，也就是说这是属性，而非方法。

两者的区别

methods中包含的是方法，computed中属性
computed必须要返回值
methods只要触发便会发生，computed只能当条件改变时才会发生。

四、Vue生命周期

在这里插入图片描述

什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
生命周期钩子：就是生命周期事件的别名而已；
生命周期钩子 = 生命周期函数 = 生命周期事件
主要的生命周期函数分类：
创建期间的生命周期函数：
- beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
  - created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始编译模板
  - beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
  - mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
运行期间的生命周期函数：
- beforeUpdate：状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
  - updated：实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
销毁期间的生命周期函数：
- beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
  - destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

举例说明：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <button @click="msg='no'">修改msg</button>
        <h1 id="text">{{msg}}</h1>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data:{
                msg: 'ok'
            },
            methods: {
                show() {
                    console.log('执行了show方法');
                }
            },
            beforeCreate() {
                //第一个生命周期  表示实例被创建出来之前会执行
                console.log(this.msg);
                this.show(); //
                //data和methods中的方法还没被实例化
            },
            created() {
                //第二个生命周期  表示实例被创建时会执行
                console.log(this.msg);
                this.show();
            },
            beforeMount() {
                //第三个生命周期  表示模板已经存在
                console.log(document.querySelector('h1').innerHTML);
            },
            mounted() {
                console.log(document.querySelector('h1').innerHTML);
            },
            beforeUpdate() {
                console.log('页面内容：'+document.querySelector('h1').innerHTML);
                console.log('内存data内容：'+this.msg);
            },
            update() {
                console.log('页面内容：'+document.querySelector('h1').innerHTML);
                console.log('内存data内容：'+this.msg);
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

SanPhantom

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js阶段汇总

Vue.js阶段汇总一、Vue指令系统自带指令v-if：判断指令v-for：遍历指令v-show：判断指令v-model：数据绑定指令v-text：文本指令v-html：代码指令v-bind：绑定指令通常与节点的属性共同使用，一般可简写为：class=" "v-on：绑定指令通常与方法共同使用，一般可简写成@click=" "自定义指...
复制链接

扫一扫