zoukankan      html  css  js  c++  java
  • Python正课128 —— Vue 进阶1

    本文内容皆为作者原创,如需转载,请注明出处:https://www.cnblogs.com/xuexianqi/p/13151062.html

    一:过滤器

    1.简介

    过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中。

    定义过滤器的方式有两种。

    2.全局过滤器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="vue.js"></script>
    </head>
    <body>
    
        <div id="app">
            <p>{{price}}</p>
            <p>{{price|format}}</p>
        </div>
    
        <script>
            //全局过滤器
            Vue.filter("format",function(money){
                return money.toFixed(2)+"元"; // js中提供了一个toFixed方法可以保留2位小鼠
            });
            var vm = new Vue({
                el:"#app",  // vm的模板对象
                data:{      // vm的数据
                    price:8.154333,
                },
                method:{    // vm的方法
    
                },
            });
        </script>
    
    </body>
    </html>
    

    3.局部过滤器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="vue.js"></script>
    </head>
    <body>
    
        <div id="app">
            <p>{{price}}</p>
            <p>{{price|format}}</p>
        </div>
    
        <script>
            // 局部过滤器 只能在当前vm对象中使用
            var vm = new Vue({
                el:"#app",  // vm的模板对象
                data:{      // vm的数据
                    price:8.154333,
                },
                method:{},  // vm的方法
                filters:{
                    format(money){
                        return money.toFixed(2)+"元";
                    }
                },
            });
        </script>
    
    </body>
    </html>
    

    二:属性

    1.计算属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="vue.js"></script>
    </head>
    <body>
    
        <div id="app">
            <input type="texttext" v-model="num1">
            <input type="texttext" v-model="num2">=<p>{{total}}</p>
        </div>
    
        <script>
            var vm = new Vue({
                el:"#app",  // vm的模板对象
                data:{      // vm的数据
                    num1:0,
                    num2:1,
                },
                method:{},  // vm的方法
                computed:{  // 计算属性 相当于创建一个新的变量 保存数据计算的结果
                    total(){
                       // parseFloat 浮点型
                       // parseInt 整型
                        return parseFloat(this.num1)+parseFloat(this.num2);
                    }
                },
            });
        </script>
    
    </body>
    </html>
    

    2.监听属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="vue.js"></script>
    </head>
    <body>
    
        <div id="app">
            <button @click="num++">赞({{num}})</button>
        </div>
    
        <script>
            var vm = new Vue({
                el:"#app",  // vm的模板对象
                data:{      // vm的数据
                    num:0,
                },
                watch:{     // 侦听属性,监听指定变量的值 是否发生变化 当发生变化时 调用对应的方法
                    num(v1,v2){
                        console.log(this.num,"修改后num="+v1,"修改前nun="+v2);
                    }
                },
            });
        </script>
    
    </body>
    </html>
    

    三:vm对象的生命周期和提供的钩子方法

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="vue.js"></script>
    </head>
    <body>
    
        <div id="app">
            <button @click="num++">{{num}}</button>
        </div>
    
        <script>
            var vm = new Vue({
                el:"#app",  // vm的模板对象
                data:{      // vm的数据
                    num:10,
                },
                beforeCreate(){     // vm对象初始化完成之前 自动执行的代码
                    console.log("---vm对象初始化完成之前 自动执行的代码---");
                    console.log(this.$el);
                    console.log(this.$data);
                },
                created(){     // 这里主要实现到服务端获取页面数据[ajax]    重点!!!
                    console.log("---vm对象初始完成之后 自动执行的代码---");
                    console.log(this.$el);   // 未查找到vm需要控制的元素
                    console.log(this.$data); // 已经把data模型中的数据 注入到vm对象中 作为属性了
                    this.num=localStorage;
                },
                boforeMount(){     // vm数据渲染到HTML之前 自动执行的代码
                    console.log("---vm数据渲染到HTML模板之前 自动执行的代码---")
                    console.log(this.$el);   // 未查找到vm需要控制的元素
                },
                mounted(){      // 修改页面的内容[页面特效]    重点!!!
                    console.log("---vm数据渲染到HTML模板之后 自动执行的代码---");
                    console.log(this.$el);   // 未查找到vm需要控制的元素
                },
                beforeUpdate(){      // 数据修改前的操作(很少用)
                    console.log("---数据更新了 渲染之前 自动执行的代码---");
                    console.log(this.num);
                    console.log(this.$el.innerHTML);
                },
                updated(){      // 数据修改后的操作(很少用)
                    console.log("---数据更新了 渲染之后 自动执行的代码---");
                    console.log(this.num);
                    console.log(this.$el.innerHTML);
                },
                beforeDestroy(){
                    console.log("---当vm对象被销毁之前 自动执行的代码---");
                    alert('销毁之前');
                    console.log(this);
                },
                destroyed(){
                    console.log("---当vm对象被销毁之后 自动执行的代码---");
                    alert('销毁之后');
                    console.log(this);
                },
            });
        </script>
    
    </body>
    </html>
    

    四:事件

    1.js的事件冒泡

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件冒泡</title>
    </head>
    <style>
        .box1{
            height: 500px;
             500px;
            background: red;
        }
        .box2{
            height: 300px;
             300px;
            background: aquamarine;
        }
    </style>
    <body onclick="alert('点击了body')">
    
        <div class="box1">
           <div class="box2"></div>
        </div>
    
        <script>
            var box1 = document.getElementsByClassName("box1")[0];
            var box2 = document.getElementsByClassName("box2")[0];
            box1.onclick = function(event){
                alert("点击了box1");
                // 阻止原生JS事件冒泡
                // event.stopPropagation();
            }
            box2.onclick = function(event){
                alert("点击了box2");
                // 阻止原生JS事件冒泡
                event.stopPropagation();
            }
    
        </script>
    
    </body>
    </html>
    

    2.vue中阻止事件冒泡

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件冒泡</title>
        <script src="vue.js"></script>
    </head>
    <style>
        .box1{
            height: 500px;
             500px;
            background: red;
        }
        .box2{
            height: 300px;
             300px;
            background: aquamarine;
            margin: auto;
        }
    </style>
    <body onclick="alert('点击了body')">
    
        <div id="app" class="box1" @click="show('点击了box1')">
           <div class="box2" @click.stop="show('点击了box2')"></div>
        </div>
    
        <script>
            // vue本质上就是js,所以vue中的事件操作也会存在事件冒泡
            // 可以使用辅助命令 @click.stop来阻止事件冒泡
    
            var vm = new Vue({
                el:"#app",
                methods:{
                    show(message){
                        alert(message)
                    }
                }
            })
    
        </script>
    
    </body>
    </html>
    

    3.阻止页面刷新

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件冒泡</title>
        <script src="vue.js"></script>
    </head>
    <body>
    
        <div id="app">
    <!--        辅助指令可以连贯使用,可以用多个,并不冲突-->
            <a href="www.baidu.com" @click.stop.prevent="show" style="font-size: 36px;">百度</a>
        </div>
    
        <script>
            // vue本质上就是js,所以vue中的事件操作也会存在事件冒泡
            // 可以使用辅助命令 @click.stop来阻止事件冒泡
    
            var vm = new Vue({
                el:"#app",
                methods:{
                    show(){
    
                    }
                }
            })
    
        </script>
    
    </body>
    </html>
    

    五:综合事件

    移动、删除、添加

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>todolist</title>
       <style type="text/css">
          .list_con{
             600px;
             margin:50px auto 0;
          }
          .inputtxt{
             550px;
             height:30px;
             border:1px solid #ccc;
             padding:0px;
             text-indent:10px;
          }
          .inputbtn{
             40px;
             height:32px;
             padding:0px;
             border:1px solid #ccc;
          }
          .list{
             margin:0;
             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>
       <script src="vue.js"></script>
    </head>
    <body>
       <div class="list_con" id="app">
          <h2>To do list</h2>
          <input type="text" v-model="content" id="txt1" class="inputtxt">
          <input type="button" @click="add" value="增加" id="btn1" class="inputbtn">
    
          <ul id="list" class="list">
             <!-- javascript:; # 阻止a标签跳转 -->
             <li v-for="item,index in todolist">
                <span>{{item}}</span>
                <a href="javascript:;" class="up" @click="up(index)"> ↑ </a>
                <a href="javascript:;" class="down" @click="down(index)"> ↓ </a>
                <a href="javascript:;" class="del" @click="del(index)">删除</a>
             </li>
          </ul>
       </div>
       <script>
          var vm = new Vue({
             el:"#app",
             data:{
                content: "",
                todolist: ["学习html","学习css","学习javascript"],
             },
             methods:{
                add(){
                   // 添加计划
                   this.todolist.push(this.content);
                   // 清空单行文本框中的信息
                   this.content="";
                },
                del(index){
                   // 删除计划
                   this.todolist.splice(index,1);
                },
                up(index){
                   // 向上移动计划
                   let current = this.todolist.splice(index,1)[0];
                   this.todolist.splice(index-1, 0, current);
                },
                down(index){
                   // 向下移动计划
                   let current = this.todolist.splice(index,1)[0];
                   this.todolist.splice(index+1,0,current);
                }
             }
          })
       </script>
    </body>
    </html>
    
  • 相关阅读:
    战旗游戏系统分析
    战棋游戏的战术性
    利用JSFL制作swf素材包
    深刻理解Java编程的7个例子
    ORACLE SQL:经典查询练手第二篇
    删除U盘时提示无法停止“通用卷”设备
    ORACLE SQL:经典查询练手第四篇
    IE8中打不开oracle EBS画面 FRM92050
    ORACLE SQL:经典查询练手第三篇
    ORACLE SQL:经典查询练手第一篇
  • 原文地址:https://www.cnblogs.com/xuexianqi/p/13151062.html
Copyright © 2011-2022 走看看