Vue常用属性功能

分类: IT文章 • 2022-06-01 10:21:46

一、过滤器

　　1、简介：在vue对象内自定义的，用于控制数据输出。

　　2、实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="id_div1">
    <div>{{name|upper}}</div>
</div>
<script>
    var vueObj = new Vue({
        el: '#id_div1',
        data: {
            name: 'tom'
        },
        filters: {
            upper: function (x) {  // 定义过滤器
                return x.toUpperCase()  // 返回过滤结果
            }
        }
    })
</script>
</body>
</html>

View Code

　　3、全局过滤器，在实例化vue对象之前，可以用vue的类方法：Vue.filter(全局过滤器名, function(形参){return}。

二、计算属性

　　1、简介：将data属性中的数据进过计算后输出。

　　2、实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="id_div1">
    <div>第一个数：<input type="text" v-model="num1"></div>
    <div>第二个数：<input type="text" v-model="num2"></div>
    <div>结果：<input type="text" v-model="sum" disabled></div>
</div>
<script>
    var vueObj = new Vue({
        el: '#id_div1',
        data: {
            num1: 0,
            num2: 0
        },
        computed: {
            sum: function () {
                return Number(this.num1) + Number(this.num2)
            }
        }
    })
</script>
</body>
</html>

View Code

三、监听属性

　　1、简介：给一个数据绑定监听属性，一旦该数据发生变化，捕获其变化前后的值，并按照定义好的方法输出。

　　2、实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="id_div1">
    <div>修改前：{{old_num}}</div>
    <div>修改后：{{new_num}}</div>
    <input type="button" @click="num++">
</div>
<script>
    var vueObj = new Vue({
        el: '#id_div1',
        data: {
            num: 0,
            old_num: null,
            new_num: null
        },
        watch: {
            num: function (old_v, new_v) {
                this.old_num = old_v
                this.new_num = new_v
            }
        }
    })
</script>
</body>
</html>

View Code

四、vue对象生命周期与钩子函数

　　1、生命周期：vue对象从初始化创建到销毁，会经过若干个阶段，这些阶段合起来就是生命周期。

　　2、钩子函数：在生命周期的各个阶段的固定节点，有内置的的函数，可以自定义这些函数的输出格式。

　　3、实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="id_div1">

</div>
<script>
    var vueObj = new Vue({
        el: '#id_div1',
        data: {},
        beforeCreate: function () {
        },  // vue对象即将创建
        created: function () {
        },  // vue对象创建完成，已经绑定好标签
        beforeMount: function () {
        },  // 准备同步data数据
        mounted: function () {
        },  // data数据已同步到页面
        beforeUpdate: function () {
        },  // 某个data数据即将更新
        updated: function () {
        },  // data数据的更新结果已同步到页面
        beforeDestroy() {
        },  // vue对象即将销毁
        destroyed() {
        }  // vue对象已销毁
    });
</script>
</body>
</html>

View Code

五、事件冒泡

　　1、定义：父子标签的事件响应区域重叠导致的连锁触发。

　　2、坏处：可能会发生功能或数据错乱。

　　3、好处：正确使用这个机制，可以实现事件委托，提高性能。

　　4、阻止事件冒泡，实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="id_div1">
    <div style=" 100px; height: 100px; border: red 5px solid" @click="alert(1111)">
        <div style=" 30px; height: 30px; border: red 5px solid" @click.stop="alert(2222)"></div>
    </div>
</div>
<script>
    var vueObj = new Vue({
        el: '#id_div1',
        data: {},
    })
</script>
</body>
</html>

View Code

　　5、事件委托，实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="id_div1">
    <div style=" 150px; height: 150px; border: red 5px solid" @click="func1">
        <div style=" 30px; height: 30px; border: red 5px solid">222</div>
        <div style=" 30px; height: 30px; border: red 5px solid">333</div>
        <div style=" 30px; height: 30px; border: red 5px solid">444</div>
    </div>
</div>
<script>
    var vueObj = new Vue({
        el: '#id_div1',
        data: {},
        methods: {
            func1: function (tri) {
                var self = tri.target  // 获取原始触发标签
                alert(self.innerText)
            }
        }
    })
</script>
</body>
</html>

View Code

六、默认事件

　　1、定义：某些标签如果触发了一个事件后会额外执行默认的响应，如button按钮的默认刷新页面。

　　2、阻止默认事件，实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="id_div1">
    <form action="">
        <input type="text">
        <button @click.prevent="alert(11111)">提交</button>
    </form>
</div>
<script>
    var vueObj = new Vue({
        el: '#id_div1',
        data: {},
    })
</script>
</body>
</html>

View Code

　　3、阻止冒泡事件和阻止默认事件的方法可以链式使用。

Vue常用属性功能

相关推荐