Day65 VUE过滤器、计算属性、监听属性、vue生命周期、js/vue阻止事件冒泡、TODolist...

川长思鸟来 2023-08-17 15:29 99阅读 0赞

# 1.过滤器 #

参考博文：https://www.cnblogs.com/Michael--chen/p/11261181.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>过滤器</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
    
    <div id="app">
        {
         {price}}
        <p>{
        {price|RMB}}</p>
    
        <hr>
    
        <hr>
    
    
    
    
        <p>过滤器中带有2个参数的,注意区别于Django中的模板中的过滤器。传入的data注意是数字</p>
        <p>{
        {price|p_format(3, 2)}}</p>
        <hr>
        <p>{
        {price|p_format(2,3)|RMB}}</p>
    </div>
    <script>
        // 通过Vue.filter() 进行全局声明，是在vm对象创建之前声明好的。
        // 语法：Vue.filter("过滤器名称", func);
        Vue.filter('RMB', function (data) {
            return "￥" + data;
        });
        var vm = new Vue({
            el: "#app",
            data: {
                price: 10.3333333,
            },
            // 不带参数的传法
            // filters: {
         
            //     p_format(data){
         
            //         return data.toFixed(2)
            //     }
            // }
            // 换另外一种写法，并且带参数
            filters: {
                // 动态的对参数就行显示
                p_format(data, num, num2){
                    console.log(num2);
                    return data.toFixed(num)
                }
            }
        })
        // 第二种方式定义，局部定义过滤器 这种方式用的更多
    </script>
    </body>
    </html>

方式1：就行全局声明是在唉VUE创建之前声明好。

在实例化VUE变量之前定义

// 通过Vue.filter() 进行全局声明，是在vm对象创建之前声明好的。
        // 语法：Vue.filter("过滤器名称", func);
        // 定义的第一种方式
        Vue.filter('RMB', function (data) {
            return "￥" + data;
        });
        var vm = new Vue({
            el: "#app",
            data: {
                price: 10.3333333,
            },

使用：

# 不带参数：
      <p>{
        {price|RMB}}</p>
    带参数
    <p>{
        {price|RMB（2）}}</p>，
    区别于Django模板中使用过滤器就行赋值：{
         {price|p_format:2}} 2个参数为上限
    # 其中price也算是一个参数代入过滤器 中
    # VUE中的参数不限制，这个也是区别于Django的传参数，Django使用：参数  VUE（参数）
    比如：<p>{
        {price|p_format(3, 2)}}</p>， 已经是3个参数了
    对应下面的filter函数：
    filters: {
                // 动态的对参数就行显示
                p_format(data, num, num2){
                    console.log(num2);
                    return data.toFixed(num)
                }

方式2：在写在VUe对象的内部：

##### 在Vue对象中通过filters属性来定义 #####

// 方式1;
    Vue.filter('RMB', function (data) {
            return "￥" + data;
        });
        var vm = new Vue({
            el: "#app",
            data: {
                price: 10.3333333,
            },
            // 不带参数的传法
            // filters: {
            //     p_format(data){
            //         return data.toFixed(2)
            //     }
            // }
            // 定义的第二种方式 写在内部
            // 换另外一种写法，并且带参数
            filters: {
                // 动态的对参数就行显示
                p_format(data, num, num2){
                    console.log(num2);
                    return data.toFixed(num)
                }
            }
        })
        // 第二种方式定义，局部定义过滤器 这种方式用的更多

![1673775-20190729175507236-227242084.png][]

# 2.计算属性 #

我们之前学习过字符串反转，如果直接把反转的代码写在元素中，则会使得其他同事在开发时时不易发现数据被调整了，

所以vue提供了一个计算属性(computed)，可以让我们把调整data数据的代码存在在该属性中。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <p>{
        {price}}</p>
        <p>{
        {new_price}}</p>
        <p>{
        {href}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                price: 10.33333333,
            },
            computed:{
                new_price(){
                    return this.price.toFixed(2)
                },
                // 注意: data下有的key,重新赋值时,无法生效.
                // price(){
         
                //     return this.price.toFixed(2)
                // },
                href(){
                    return location.href;
                }
            }
        })
    </script>
    </body>
    </html>

![1673775-20190729175751634-1670250321.png][]

# 3.监听属性 #

侦听属性，可以帮助我们侦听data某个数据的变化，从而做相应的自定义操作。

侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数，当侦听的data数据发生变化时，会执行的对应函数，这个函数在被调用时，vue会传入两个实参，

第一个是变化前的数据值，第二个是变化后的数据值。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>监听事件</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <p>{
        {num}}</p>
            <button @click="num++">投票</button>
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data:{
                    num: 0,
    
                },
                watch: {
                    num(new_data, old_data){
                        console.log(new_data, old_data);
                        if(new_data>3){
                            this.num = 3;
                        }
                    }
                }
            })
        </script>
    </body>
    </html>

![1673775-20190729185606197-461492456.png][]

![1673775-20190729185613711-1490754082.png][]案例（实现省市区的三级联动）：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
    
    <div id="app">
        地址:
        <select name="" v-model="province_id">
            <option value="0">请选择省份</option>
            <option v-for="province in province_list" :value="province.id">{
        {province.name}}</option>
    
        </select>
        <select name="" v-model="city_id">
            <option value="0">请选择城市</option>
            <option v-if="province_id==city.parent_id" v-for="city in city_list" :value="city.id">{
        {city.name}}</option>
        </select>
        <select name="" v-model="area_id">
            <option value="0">请选择地区</option>
            <option v-if="city_id == area.parent_id" v-for="area in area_list" :value="area.id">{
        {area.name}}</option>
        </select>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                province_id: 0,
                province_list: [
                    {
         "id":1,"name":"北京市"},
                    {
         "id":2,"name":"广东省"},
                ],
                city_list: [],
                city_id: 0,
                area_id: 0,
                area_list:[],
            },
            watch: {
                province_id(){
                    this.city_list = [
                        {
         "parent_id":1,"id":1,"name":"海淀区"},
                        {
         "parent_id":1,"id":2,"name":"昌平区"},
                        {
         "parent_id":2,"id":3,"name":"广州市"},
                        {
         "parent_id":2,"id":4,"name":"深圳市"},
                    ],
                        this.city_id = 0
                        this.area_id = 0
                },
                city_id(){
                    this.area_list = [
                        {
         "parent_id":1,"id":1,"name":"中关村"},
                        {
         "parent_id":1,"id":2,"name":"清华园"},
                        {
         "parent_id":2,"id":3,"name":"沙河"},
                        {
         "parent_id":2,"id":4,"name":"回龙观"},
                        {
         "parent_id":3,"id":5,"name":"天河区"},
                        {
         "parent_id":3,"id":6,"name":"番禺区"},
                        {
         "parent_id":4,"id":7,"name":"南山区"},
                        {
         "parent_id":4,"id":8,"name":"宝安区"},
                    ],
                        this.area_id = 0
                }
            }
        })
    </script>
    
    </body>
    </html>

# 4.Vue的生命周期 #

下面介绍常用的6种钩子函数。

![1673775-20190729203945927-1798740993.png][]

*  ## 钩子函数beforeCreate 类似于python中的\_\_new\_\_ ##

// 8个钩子函数，常用的有6个下面列举出来的。还有2个不常用分别是：destroy和bdforeDestroy
            // bdforeCreate会在vm对象创建实例化以后，初始化vm内部数据之前调用
            // 类似于python里面的__new__
            beforeCreate(){
                console.log("----------beforeCreate start---------");
                console.log(this);
                console.log(this.$el); //还没对模板就行初始化
                console.log(this.num); //还没对数据就行初始化
                console.log("##########beforeCreate end#########");
    
            },

*  ## 钩子函数created()\*\* ##

![1673775-20190729195322916-648610655.png][]

// created 在vm对象实例化并初始化数据以后，视图模板加载之前调用
            // 一般情况下，会在这里编写ajax代码，从服务器端获取数据并赋值给data里面的数据(***)
            created(){
                console.log("----------created start---------");
                console.log(this);
                console.log(this.$el);  // 还没有对视图模板进行初始化
                console.log(this.num);  // 此时已经可以拿到数据了只是就行初始化了数据num
                console.log("##########created end#########");
            },

![1673775-20190729195934751-1156178457.png][]

*  ## beforeMount()拿到视图模板 数据还没被渲染 ##

beforeMount() {
              console.log("----------beforeMount start---------");
                console.log(this);
                console.log(this.$el);  // 已经拿到试图模板,但是数据还没被渲染
                console.log(this.num);  // 此时已经可以拿到数据了
                console.log("##########beforeMount end#########");
            },

![1673775-20190729201038534-660006707.png][]

*  ## mounted 在视图模板中把数据渲染出来 ##

// 加载视图并进行数据赋值以后调用
            // 一般情况下，会在这里编写操作界面的代码，调整样式，制作初始化的js特效(***)
            mounted() {
                console.log("--------mounted start -----------");
                console.log(this);
                console.log(this.$el);  // 已经拿到试图模板,数据被渲染
                console.log(this.num);  // 此时已经可以拿到数据了
                console.log("##########mounted end#########");
            }

![1673775-20190729200932357-985700227.png][]

*  ## beforeUpdate拿到更新数据 还没对模板赋值 ##

// 更新数据时, 修改data数据以后 对模板的数据赋值之前的调用
              beforeUpdate(){
                console.log("----------beforeUpdate start---------");
                console.log(this);
                console.log(this.$el.innerHTML);
                console.log(this.num);  // 此时已经可以拿到数据了
                console.log("##########beforeUpdate end#########");
            },

![1673775-20190729201816099-1730786912.png][]

*  ## update将beforeUpdate拿到的数据就行更新入模板 ##

// 更新数据完成以后调用
            updated(){
                console.log("----------updated start---------");
                console.log(this);
                console.log(this.$el.innerHTML);
                console.log(this.num);  // 此时已经可以拿到数据了
                console.log("##########updated end#########");
            }

![1673775-20190729202251119-1776046115.png][]

##  ##

## 5、js原生阻止事件冒泡 ##

##### 1.阻止事件冒泡 #####

什么是事件冒泡？

事件绑定时,如果同时给父子元素绑定同名事件,则在子元素触发事件以后,父元素的同名事件也会触发到,这种现象就是事件冒泡.

好处：一个触发,多次执行

利用事件冒泡的好处,可以实现事件委托.

坏处：形成事件的联动反应.

下面我们先一起来回顾一下js原生阻止的事件冒泡

例子：使用原生的JavaScript就行写上时候，

<div class="father">
        <div class="son">
    
        </div>
    </div>
    <script>
        var fa_div = document.getElementsByClassName('father')[0];
        var son_div = document.getElementsByClassName('son')[0];
        fa_div.onclick=function () {
            alert("父元素");
        };
        son_div.onclick=function () {
            alert("子元素");
        }
    </script>

![1673775-20190729205002166-1097497834.png][]

js 下边就行添加上这个代码也就是原生的js阻止事件冒泡！

son_div.οnclick=function (event) {
            alert("子元素!");
            event.stopPropagation();  // 原生的js代码阻止事件冒泡
        };

## 2.下面我们看一下vue的事件冒泡和阻止事件冒泡： ##

![1673775-20190729211008411-339498644.png][]

## 3.阻止元素的默认行为 ##

关键代码：

<a href="" @click.prevent="add">a标签阻止默认的行为</a>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>阻止元素的默认行为</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
    <div class="father">
        <a href="" @click="add">a标签有刷新的效果</a>
        <a href="" @click.prevent="add">a标签阻止默认的行为</a>
        <a href="" @click="add">{
        {text}}</a>
    
        <script>
            vm = new Vue({
                el: ".father",
                data: {
                    text: "刷新",
                },
                methods: {
                    add(){
                        alert("出来了！")
                    }
                }
            })
        </script>
    
    </div>
    
    </body>
    </html>

![1673775-20190729211630547-203139424.png][]

6.见https://www.cnblogs.com/Michael--chen/p/11261181.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .list_con {
         
                width: 600px;
                margin: 50px auto 0;
            }
    
            .inputtxt {
         
                width: 550px;
                height: 30px;
                border: 1px solid #ccc;
                padding: 0;
                text-indent: 10px;
            }
    
            .inputbtn {
         
                width: 40px;
                height: 32px;
                padding: 0;
                border: 1px solid #ccc;
            }
    
            .list {
         
                padding: 0;
                list-style: none;
                margin-top: 20px;
            }
    
            .list li {
         
                height: 40px;
                line-height: 40px;
                border-bottom: 1px solid #ccc;
            }
    
            .list li span {
         
                float: left;
            }
    
            .list li a {
         
                float: right;
                text-decoration: none;
                margin: 0 10px;
            }
        </style>
    </head>
    <body>
    
    <div id="ToDoList" class="list_con">
        <h2>To do list</h2>
        <input type="text" name="" id="txt1" class="inputtxt">
        <input type="button" name="" value="增加" id="btn1" class="inputbtn">
    
        <ul id="list" class="list">
            
            <li>
                <span>学习html</span>
                <a href="javascript:void(0);" class="up"> ↑ </a>
                <a href="javascript:void(0);" class="down"> ↓ </a>
                <a href="javascript:void(0);" class="del">删除</a>
            </li>
            <li>
                <span>学习css</span>
                <a href="javascript:void(0);" class="up"> ↑ </a>
                <a href="javascript:void(0);" class="down"> ↓ </a>
                <a href="javascript:void(0);" class="del">删除</a>
            </li>
            <li>
                <span>学习javascript</span>
                <a href="javascript:void(0);" class="up"> ↑ </a>
                <a href="javascript:void(0);" class="down"> ↓ </a>
                <a href="javascript:void(0);" class="del">删除</a>
            </li>
        </ul>
    </div>
    </body>
    </html>

转载于:https://www.cnblogs.com/longerandergou/p/11266757.html

[1673775-20190729175507236-227242084.png]: /images/20230810/094033fddd6d475e99396fcbf14bd615.png
[1673775-20190729175751634-1670250321.png]: /images/20230810/e6cf19c4093940dc852a43684bbe8596.png
[1673775-20190729185606197-461492456.png]: /images/20230810/0f8e80c62a004ba69ebb0427ee192d71.png
[1673775-20190729185613711-1490754082.png]: /images/20230810/74b9fcac42684b54a6834f2aaa2eeba0.png
[1673775-20190729203945927-1798740993.png]: /images/20230810/d3f51443c1cd4e86b9cb69ce517d0dd0.png
[1673775-20190729195322916-648610655.png]: /images/20230810/73039a530a8b412ea52d751b96d22903.png
[1673775-20190729195934751-1156178457.png]: /images/20230810/e5f504f0208844dc82f91d3208963f68.png
[1673775-20190729201038534-660006707.png]: /images/20230810/ab0d440c68634cd6bb2bf39b9c55a25f.png
[1673775-20190729200932357-985700227.png]: /images/20230810/ded56c6ce7d24626a53ec003fb3c8063.png
[1673775-20190729201816099-1730786912.png]: /images/20230810/cf68debac37e43f7941e153e47f25e4e.png
[1673775-20190729202251119-1776046115.png]: /images/20230810/b384a0380f8745fe87c6d859bf102111.png
[1673775-20190729205002166-1097497834.png]: /images/20230810/152ed3df40c14eeba713c5a9f1ceb67f.png
[1673775-20190729211008411-339498644.png]: /images/20230810/c5e360ea4ce84a11b07afdff97e0ad43.png
[1673775-20190729211630547-203139424.png]: /images/20230810/1b142744099444b388e6d579ee8c70a2.png