Vue常用属性功能

一、过滤器

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

  2、实例:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>Titletitle>
    <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>Titletitle>
    <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>Titletitle>
    <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>Titletitle>
    <script src="vue.min.js">script>
head>
<body>
<div id="id_div1">
    <div style="width: 100px; height: 100px; border: red 5px solid" @click="alert(1111)">
        <div style="width: 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>Titletitle>
    <script src="vue.min.js">script>
head>
<body>
<div id="id_div1">
    <div style="width: 150px; height: 150px; border: red 5px solid" @click="func1">
        <div style="width: 30px; height: 30px; border: red 5px solid">222div>
        <div style="width: 30px; height: 30px; border: red 5px solid">333div>
        <div style="width: 30px; height: 30px; border: red 5px solid">444div>
    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>Titletitle>
    <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常用属性功能)