qiphon3650

vue 代码实例


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
head>
<body>
<div id="app">
    {{count}}
    <button @click="updateCount">clickMebutton>
    <hr>
    <hr>
    <h3 v-if="count<6" v-change="count">自定义指令h3>

div>
<script src="js/vue.min.js">script>
<script>
    //1.model
    var exampleData ={
        msg:"hello vue",
        count:0
    };
    //2.viewmodel
    new Vue({
        el:"#app",
        data:exampleData,
        methods:{
            updateCount:function(){
               this.count++;
            }
        },
        directives:{   //所有自定义指令保存在此对象中
            change:{   //自定义指令change
                bind:function(el,bindings){
                    console.log(el);
                    console.log(bindings);
                    console.log("初始化指令");
                },
                update:function(el,bindings){
                    console.log("指令发生变化");
                    console.log(bindings.value);
                },
                unbind:function(el,bindings){
                    console.log("解除绑定");
                }
            }
        }
    });
script>
body>
html>





<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
head>
<body>
<div id="app">
    {{msg}}
    <br>
    <button @click="color">clickMebutton>
    <h3 v-if="count<6" v-change-background-color="myBgcolor">自定义指令h3>

div>
<script src="js/vue.min.js">script>
<script>
    //1.model
    var exampleData ={
        msg:"hello vue",
        count:0,
       myBgcolor:"#ff0000"
    };
    //2.viewmodel
    new Vue({
        el:"#app",
        data:exampleData,
        methods:{
           color:function(){
               console.log(11);
               this.myBgcolor=this.getRandomColor();
           },
           getRandomColor:function(){
                var r=Math.floor(Math.random()*256);
                var g=Math.floor(Math.random()*256);
                var b=Math.floor(Math.random()*256);
                return `rgb(${r},${g},${b})`;
            }
        },
        directives:{   //所有自定义指令保存在此对象中
            changeBackgroundColor:{   //自定义指令change
                bind:function(el,bindings){  //el===h3
                    console.log("绑定成功");
                    el.style.backgroundColor = bindings.value;
                },
                //需要加更新的指令
                update:function(el,bindings){
                    el.style.backgroundColor = bindings.value;
                }
            }
        }
    });
script>
body>
html>



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
head>
<body>
<div id="app">
    <h4>{{price}}h4>
    <h4>{{price | myCurrency('￥')}}h4>
    <h4>{{price | myCurrency('$')}}h4>

div>
<script src="js/vue.min.js">script>
<script>
    //1.model
    var exampleData ={
        msg:"hello vue",
        price:356
    };
    //2.viewmodel
    new Vue({
        el: "#app",
        data: exampleData,
        filters:{   //所有的过滤器定义在此处
            myCurrency:function(myInput,arg1){
                //参数myInput：price--过滤器前的变量值; arg1:￥
                var result=arg1+myInput;
                return result;


            }

        }
    });
script>
body>
html>



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
head>
<body>
<div id="app">
    <h4>{{text}}h4>
    <h4>{{text | myTextTransform(true)}}h4>
    <h4>{{text | myTextTransform(false)}}h4>

div>
<script src="js/vue.min.js">script>
<script>
    //1.model
    var exampleData ={
        msg:"hello vue",
        text:"hello moto"
    };
    //2.viewmodel
    new Vue({
        el: "#app",
        data: exampleData,
        filters:{   //所有的过滤器定义在此处
            myTextTransform:function(myInput,arg1){
      //参数myInput：price--过滤器前的变量值==  |的值; arg1:￥
                if(arg1==true){
                    var result=myInput.toUpperCase();
                    return result;
                }else if (arg1==false){
                    var result=myInput.toLowerCase();
                    return result;
                }

            }

        }
    });
script>
body>
html>


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
head>
<body>
<div id="app">
    <h3>自定义组件h3>
    <hr>
  
    <my-component>my-component>
div>
<script src="js/vue.min.js">script>
<script>
    //创建组件
    Vue.component("my-component",{//模板
       template:`
                     <h1>第一个组件h1>
                     <h4>第一个h4>
                  div>`
    });
    //1.model
    var exampleData ={
        msg:"hello vue",

    };
    //2.viewmodel
    new Vue({
        el: "#app",
        data: exampleData,

    });
script>
body>
html>



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    
    <button @click="isShow=!isShow">切换组件是否显示button>
    <my-component v-if="isShow">my-component>
div>
<script src="js/vue.min.js">script>
<script>
    //组件声明周期
    Vue.component('my-component',{
        template:`
            
                <button @click="handleClick">clickMebutton>
                <h4>Hello {{count}}</h4>
            div>
        `,
        data:function () {
            return {count:0}
        },
        methods:{
            handleClick:function () {
                //console.log('111');
                this.count ++;
               // console.log(this.count);
            }
        },
        beforeCreate:function(){console.log("1：创建前")},
        created:function(){console.log("2：创建后")},
        beforeMount:function(){console.log("3：挂在前")},
        mounted:function(){console.log("4：挂载后")},
        beforeUpdate:function(){console.log("5：更新前")},
        updated:function(){console.log("6：更新后")},
        beforeDestroy:function(){console.log("7：销毁前")},
        destroyed:function(){console.log("8：销毁后")},
    });

    var exampleData = {
        msg:'hello vue',
        isShow:true

    };
    new Vue({
        el:'#app',
        data:exampleData
    });
script>
body>
html>


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
head>
<body>
<h3>自定义组件h3>
<hr>
<div id="app">
    
    <my-component>my-component>
div>
<script src="js/vue.min.js">script>
<script>
    //创建组件 my_component
    //组件两个数据--myAddress  ;myPhone
    //添加模板
    //div_  添加两个input，input的value绑定刚才定义
    Vue.component("my-component",{
        data:function(){
            return{
                myAddress:"",
                myPhone:158
            }
        },
        template:`
                      <input type="text" v-model="myAddress">
                      <input type="text" v-model="myPhone">
                      <h5>{{myAddress}}</h5>
                      {{myPhone}}</h5>
                  div>
                   `,
        watch:{//监听事件
            myAddress:function(){
                console.log("数据发生改变:"+this.myAddress);
            },
            myPhone:function(){
                console.log("数据发生改变"+this.myPhone);
            }

        }
    });

    //1.model
    var exampleData ={
        msg:"hello vue",

    };
    //2.viewmodel
    new Vue({
        el: "#app",
        data: exampleData,

    });
script>
body>
html>



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    
    <my-game>my-game>
div>
<script src="js/vue.min.js">script>
<script>
    //练习：透明度变化组件
    Vue.component("my-game",{
        data:function(){
            return {
                randomNumber:0,  //中奖数
                userInput:0,     //用户输入
                result:''
            }
        },
        mounted:function(){
            //console.log("3：挂在前");
            //创建中奖数1-100整数，并保存randomNumber
            var num=Math.floor(Math.random()*20);
            this.randomNumber=num;
        },
        template:`
                      <input type="text" v-model="userInput"/>
                      <br>
                      <p>{{result}}</p>
                  div> `,
        watch:{
            userInput:function(){
                //console.log(this.userInput);
                if(this.userInput>this.randomNumber){
                    this.result="大了";
                }else if(this.userInput<this.randomNumber){
                    this.result="小了";
                }else{
                    this.result="厉害了";
                }
            }
        }


    });

    var exampleData = {
        msg:'hello vue',
        isShow:true

    };
    new Vue({
        el:'#app',
        data:exampleData
    });
script>
body>
html>

父子组件


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
head>
<body>
<div id="app">
    <parent>parent>
div>
<script src="js/vue.min.js">script>
<script>
    //1.创建父组件
    Vue.component("parent",{
        data:function(){
            return {money:3000}
        },
        template:`
            
                <h4>父组件h4>
                <child :myValue="money">child:mychild>
            div>
        `
    });
    //2.创建子组件
    Vue.component("child",{
        template:`<div><h3>子组件{{myValue}}</h3>div>`,
        props:["myValue"],//声明变量 保存父组件的数据
        mounted:function(){
            //声明变量结束，获取父元素数据
            //已保存 this.data
            console.log(this.myValue);
        }
    });
    //3.创建Vue
    new Vue({
        el:"#app"
    });
script>
body>
html>



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
head>
<body>
    <div id="app">
        <parent>parent>
    div>
    <script src="js/vue.min.js">script>
    <script>
        Vue.component("parent",{
            data:function(){
                return {myCar:"QQ"}
            },
            template:`
                <child :car="myCar">child>div>
            `

        });
        Vue.component("child",{
            props:["car"],
            template:`<div>{{car}}:
                            <input type="text" :value="car">
                      div>`,
            mounted:function(){
                console.log(this.car);}
        });
        new Vue({
            el:"#app"
        });


    script>
body>
html>



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
head>
<body>
    <div id="app">
        <parent>parent>
    div>
    <script src="js/vue.min.js">script>
    <script>
        Vue.component("parent",{
            methods:{
                //1.1创建一个方法接收子组件传递的数据
                getData:function(msg){
                    console.log("父组件接收子组件的数据："+msg);
                }
            },
            template:`
                
                    <h4>父组件h4>
                    <child @dataEvent="getData">child>
                div>
            `
        });
        Vue.component("child",{
            methods:{
                setData:function(){
                    //触发绑定自定义事件dataEvent并且传递的数据
                    this.$emit("dataEvent","交话费");
                }
            },
            template:`
                <div>
                    <h4>子组件h4>
                    <button @click="setData">点击按钮发送数据给父组件button>
                div>
            `
        });
        new Vue({
            el:"#app"
        });
    script>
body>
html>



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
head>
<body>
    <div id="app">
        <parent>parent>
    div>
    <script src="js/vue.min.js">script>
    <script>
        //父
        Vue.component("parent",{
            data:function(){
                return {isUserLogin:true,list:[10,20,30,40,50]}
            },
            template:`
                          <ul v-if="isUserLogin">
                            <li v-for="item in list" >{{item}}</li>
                          ul>
                          <child @dataEvent="getData">child>
                       div>  `,
            methods:{
                getData:function(msg){
                    console.log("父组件接收子组件的数据："+msg);
                    this.isUserLogin=msg;
                }
            }
        });
        //子
        Vue.component("child",{
            template:`
                <div><button @click="sendData">点击按钮发送数据给父组件button>div>
            `,
            methods:{
                sendData:function(){
                    if(this.$parent.isUserLogin){
                        this.$emit("dataEvent",false);
                    }else{
                        this.$emit("dataEvent",true);
                    }
                }
            }
        });
        new Vue({
            el:"#app"
        });
    script>
body>
html>



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
head>
<body>
<div id="app">
    <parent>parent>
div>
<script src="js/vue.min.js">script>
<script>
    //父组件
    Vue.component("parent",{
        data:function(){
            return {name:"牛魔王"}
        },
        template:`
                        <h4>父组件h4><child ref="mySon">child>
                        <button @click="getData">获取子组件button>
                   div>`,
        methods:{
            getData:function(){
                console.log("子组件名称："+this.$refs.mySon.name);
            }
        }
    });
    //子组件
    Vue.component("child",{
        data:function(){
            return {name:"红孩儿"}
        },
        mounted:function(){
            console.log("父元素的数据："+this.$parent.name);
        }
    });
    new Vue({
        el:"#app"
    });

script>
body>
html>




<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
head>
<body>
    <div id="app">
        <parent>parent>
    div>
    <script src="js/vue.min.js">script>
    <script>
        Vue.component("parent",{
            data:function(){
                return {name:["tom","jerry","kk"]}
            },
            template:`
                
                    <ul >
                        <li v-for="item in name">{{item}}</li>
                    ul>
                    <child>child>
                div>
            `
        });
        Vue.component("child",{
            data:function(){
                return {userName:""}
            },
            template:`
                <div>
                    {{userName}}
                    "text" value="" v-model="userName">
                     <button @click="setData">添加button>
                div>
            `,
            methods:{
                setData:function(){
                    //将用户名添加到父元素列表
                    var uname=this.userName;
                    this.$parent.name.push(uname);
                    //之后清空
                    this.userName="";

                }
            }
        });
        new Vue({
           el:"#app"
        });
    script>

body>
html>



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
head>
<body>
    <div id="app">
        <xiong-da>xiong-da>
        <xiong-er>xiong-er>
    div>
    <script src="js/vue.min.js">script>
    <script>
        //1.创建公共 Vue对象
        var bus=new Vue();
        //2.创建组件  xiong-er
        Vue.component("xiong-er",{
            template:`
                
                    <h4>熊二接收数据h4>
                    <h2>熊二发消息h2>
                    <button @click="setData">熊二后发送button>
                div>
            `,
            methods:{
              setData:function(){
                  bus.$emit("eventEr","光头强走了！！！")
              }
            },
            mounted:function(){
                bus.$on("cutomeEvent",function(msg){
                    console.log("熊大发来的消息："+msg);
                })
            }
        });
        //3.创建组件  xiong-da
        Vue.component("xiong-da",{
           template:`<div>
                          <h2>熊大接收数据h2>
                         <h4>熊大发数据h4>
                         <button @click="setData">发送button>
                     div>`,
           methods:{
               setData:function(){
                   bus.$emit("cutomeEvent","光头强又来啦");
               }
           },
           mounted:function(){
               bus.$on("eventEr",function(msg){
                 console.log("熊二发来的消息："+msg);
               })
           }

        });
        //4.创建Vue
        new Vue({
           el:"#app"
        });
    script>
body>
html>




<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
head>
<body>
    <div id="app">
            <my-main>my-main>
    div>
    <script src="js/vue.min.js">script>
    <script>
        Vue.component("my-main",{
            data:function(){
                return {count:0, isValid:false}
            },
            template:`
                          <h4>父组件h4>
                          <button @click="addCount" :disabled="isValid">count++button>
                          <son :myCount="count">son>
                          <hr>
                      div>`,
            methods:{
                addCount:function(){
                        this.count++;
                }
            }
        });
        Vue.component("son",{
            template:`<div>
                          <h4>子组件h4>
                          <p>接收数据：{{myCount}}</p>
                      div>`,
            props:["myCount"],
            //绑定生命周期方法：更新-->如果数据发生变化自动执行
            updated:function(){
                //console.log("子组件变化");
                console.log(this.myCount);
                if(this.myCount>10){//数据超过10
                    this.$parent.isValid=true;//禁用父组件按钮
                }
            }

        });
        new Vue({el:"#app"});
    script>
body>
html>

 
  
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
head>
<body>
    <div id="app">
        
        <router-view>router-view>
    div>
    <script src="js/vue.min.js">script>
    
    <script src="js/vue-router.js">script>
    <script>
        //3.组件多个组件
        var testLogin=Vue.component("login",{
            template:`
                
                      <h1>这是登录页面h1>
                div>
            `
        });
        var testRegister=Vue.component("register",{
            template:`
                <div>
                      <h1>这是注册页面h1>
                div>
            `
        });
        //4.配置路由词典
        //语法：请求路径     对应组件
        //{path:"/login",component:testLogin}
        const myRoutes=[
            {path:"",component:testLogin},
            {path:"/login",component:testLogin},
            {path:"/reg",component:testRegister}
        ];
        //5.创建路由对象
        const myRouter=new VueRouter({
            routes:myRoutes
        });
        //6.创建Vue对象，并且指定路由对象
        new Vue({
            router:myRouter,
            el:"#app"
        });

    script>
body>
html>



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <style>
        div{width:200px;  height:400px}
        #d{background: deepskyblue}
        #c{ background: greenyellow}
        #o{background: mediumvioletred}
    style>
head>
<body>
<div id="app">
    
    <router-view>router-view>
div>
<script src="js/vue.min.js">script>
<script src="js/vue-router.js">script>
<script>
    var testCollect=Vue.component("collect",{
        template:`
                    "c">
                        <h4>收藏页面h4>
                        <router-link to="/detail">详情页面router-link>
                        <router-link to="/order">订单页面router-link>
                    div>
                `
    });
    var testDetail=Vue.component("detail",{
        template:`
                    <div id="d">
                        <h4>详情页面h4>
                        <router-link to="/order">查看订单页面router-link>
                        <router-link to="/collect">查看收藏页面router-link>
                    div>
                `
    });
    var testOrder=Vue.component("order",{
        template:`
                    <div id="o">
                        <h4>订单页面h4>
                        <button @click="jumpToCollect">返回收藏button>
                        <button @click="jumpToDetail">返回详情button>
                    div>
                `,
        methods:{
            jumpToCollect:function(){
                //通过js的方式，实现导航到指定的路由地址对应的组件
                this.$router.push("/collect");
            },
            jumpToDetail:function(){
                //通过js的方式，实现导航到指定的路由地址对应的组件
                this.$router.push("/detail");
            }
        }

    });
    const myRoutes=[
        {path:"",component:testCollect},
        {path:"/collect",component:testCollect},
        {path:"/detail",component:testDetail},
        {path:"/order",component:testOrder}
    ];
    //5.创建路由对象
    const myRouter=new VueRouter({
        //路由对象里，引用要使用的路由词典
        routes:myRoutes
    });
    //6.创建Vue对象，并且指定路由对象
    new Vue({
        router:myRouter,
        el:"#app"
    });

script>
body>
html> 
  
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <style>
        div{width:300px;  height:400px}
        #l{background: cornflowerblue; color: aliceblue}
        #d{background: lightseagreen; color: greenyellow}
    style>
head>
<body>
<div id="app">
    
    <router-view>router-view>
div>
<script src="js/vue.min.js">script>

<script src="js/vue-router.js">script>
<script>
    //3.组件多个组件
    //接收参数
    var productDetail=Vue.component("product-detail",{
        data:function(){
          return {productId:0}//接收上一个组件传来的参数
        },
        template:`
            "d">
                <h2>{{productId}}</h2>
                ">返回list
            
        `,
        mounted:function(){
            this.productId= this.$route.params.pid;
            console.log(this.$route.params);
        }
    });

    //发送参数
    var productList=Vue.component("product-list",{
        data:function(){
            return {list:["aaa","bbb","ccc","ddd","eee"]}
        },
        template:`
            ">
                产品列表
                
                    in list">
                    '/detail/'+idx">{{item}}</router-link>
                    li><br>
                    <button @click="toDetail">进入详情页button>
                ul>
            div>
        `,
        methods:{
            toDetail:function(){
                this.$router.push("/detail/"+this.list);
            }
        }
    });

    var NotFound =Vue.component("my-found",{
        template:`<div class="base">
                        <h1> 404 Page Not Founth1>
                        <router-link to="/login">返回首页router-link>
                   div>`
    });

    //4.配置路由词典
    const myRoutes=[
        {path:"",component:productList},
        {path:"/list",component:productList,alias:"/lists"},
        {path:"/mylist",redirect:"/list"},
        {path:"/detail/:pid",component:productDetail},
        {path:"*",component:NotFound}
    ];

    //5.创建路由对象
    const myRouter=new VueRouter({
        routes:myRoutes
    });
    //6.创建Vue对象，并且指定路由对象
   new Vue({
       router:myRouter,
       el:"#app"
   });


script>
body>
html>



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <style>
        div{width:300px;  height:400px}
        #l{background: cornflowerblue; color: aliceblue}
        #m{background: lightseagreen; color: greenyellow}
    style>
head>
<body>
<div id="app">
    
    
    <router-view>router-view>
div>
<script src="js/vue.min.js">script>

<script src="js/vue-router.js">script>
<script>
    //3.组件多个组件login/main/inbox/outbox
    var myLogin=Vue.component("my-login",{
        template:`
            "l">
                <h4>登录组件h4>
                <router-link to="/main">跳到主页面router-link>
            div>
        `
    });
    var myMain=Vue.component("my-main",{
        template:`
            <div id="m">
                <h3>邮箱主页面h3>
                <ul>
                    <li><router-link to="/inbox">收件箱router-link>li>
                    <li><router-link to="/outbox">发件箱router-link>li>
                ul>
                <router-view>router-view>
            div>
        `
    });
    var myInbox=Vue.component("my-inbox",{
        template:`
            <div id="m">
                <ul>
                    <li>未读邮件1li>
                    <li>未读邮件2li>
                    <li>未读邮件3li>
                    <li>未读邮件4li>
                ul>
            div>
        `
    });
    var myOutbox=Vue.component("my-outbox",{
        template:`
            <div id="m">
                <ul>
                    <li>已发邮件1li>
                    <li>已发邮件2li>
                    <li>已发邮件3li>
                    <li>已发邮件4li>
                ul>
            div>
        `
    });

    //4.配置路由词典
    const myRoutes=[
        {path:"",redirect:"/login"},
        {path:"/login",component:myLogin},
        {path:"/main",component:myMain,
            children:[
                {path:"/inbox",component:myInbox},
                {path:"/outbox",component:myOutbox},
            ]
        },
    ];

    //5.创建路由对象
    const myRouter=new VueRouter({
        routes:myRoutes
    });
    //6.创建Vue对象，并且指定路由对象
    new Vue({
        router:myRouter,
        el:"#app"
    });


script>
body>
html>

Vue移动端项目二次封装原生table组件,支持表头/数据动态配置；作用域插槽、render函数渲染某列数据等功能，任何端都可以通用
一、最终效果二、参数配置1、代码示例：2、配置参数（t-tableAttributes）参数说明类型默认值columns表头配置项Array[]data数据源Array[]max-height固定表头String-height表格高度String100%emptyText无数据文案String‘暂无数据’2-1、columns配置项参数说明类型默认值label表头名称String-prop数据字段
Spring AI 项目实战（十八）：Spring Boot + AI + Vue3 + OSS + DashScope 实现高效语音识别系统（附完整源码）程序员岳彬 SpringAI spring 人工智能 spring boot 语音识别后端 ai java
系列文章序号文章名称1SpringAI项目实战（一）：SpringAI核心模块入门2SpringAI项目实战（二）：SpringBoot+AI+DeepSeek深度实战（附完整源码）3SpringAI项目实战（三）：SpringBoot+AI+DeepSeek打造智能客服系统（附完整源码）4
前端 Vue.js 动画效果实现技巧大厂前端小白菜前端 vue.js javascript ai
前端Vue.js动画效果实现技巧关键词：Vue.js、动画、过渡、CSS动画、JavaScript动画、性能优化、交互设计摘要：本文将深入探讨Vue.js中实现动画效果的多种技巧，从基础的CSS过渡到复杂的JavaScript动画，涵盖过渡组件使用、动画性能优化、第三方库集成等实用内容。通过丰富的代码示例和实际案例，帮助开发者掌握在Vue应用中创建流畅、吸引人的动画效果。背景介绍目的和范围本文旨在
vue-router和锚点冲突问题 TaoLandd
传统的锚点定位会与vue-router中的路由设置存在冲突，都是使用'#'进行的，所以这里使用一直方法来模拟锚点跳转，并使用tween.js达到动态的过度效果不使用原生锚点，使用这种方式解决import'../static/js/animation.js'import'../static/js/tween.js'xxxxmethods:{anchor:function(e){letid='anch
【Vue CLI】手把手教你撸插件 vivo互联网技术
本文首发于vivo互联网技术微信公众号链接：https://mp.weixin.qq.com/s/Rl8XLUX7isjXNUmbw0-wow作者：ZhuPing现如今Vue作为主流的前端框架之一，其健全的配套工具，活跃的开源社区，让广发码农热衷追捧。VueCLI作为其官方的开发构建工具，目前已更新迭代到4.x版本，其内部集成了日常开发用到的打包压缩等功能，简化了常规自己动手配置webpack的烦
深入理解 Vue 3 中的 emit
深入理解Vue3中的emit在Vue3中，组件通信是开发中非常重要的一部分，其中通过emit实现父子组件通信是最常见的方式之一。emit的作用是：子组件可以通过触发自定义事件将数据传递给父组件。在本篇文章中，我们将从以下几个方面详细讲解emit的使用：基础概念使用方法与语法配合props实现完整的父子通信在TypeScript中的类型推断注意事项与最佳实践一、基础概念什么是emit？emit是Vu
vue 不同版本下v-model的底层实现
下面把「底层实现」和「差异」拆开讲，先给代码级流程，再给一个对照表，面试或源码阅读都能直接用。一、底层实现（编译→运行时的两条链路）Vue2•编译阶段：模板编译器遇到v-model，根据元素类型生成不同的AST指令对象。•运行时指令：src/platforms/web/compiler/directives/model.js里的model()函数把指令对象转成原生标签addProp(el,'val
原生前端JavaScript/CSS与现代框架(Vue、React)的联系、区别与运行环境(精简版)
原生前端JavaScript/CSS与现代框架(Vue、React)的联系、区别与运行环境随着Web技术的不断发展，前端开发已经从最初的原生JavaScript和CSS时代，逐步演进到以Vue、React等为代表的现代前端框架时代。对于许多刚入门或正在转型的前端开发者来说，理解原生技术和现代框架之间的联系、区别，以及各自的运行环境和条件，有助于更好地把握前端技术栈的演变趋势和实际应用场景。一、原生
layUI树形组件出现偶尔加载不出来的情况 suoh's Blog ❤️❤️--layui ❤️❤️--vue2核心技术栈 layui树形结构无法加载 treeList加载不出来 layui树形组件不显示
用vue自带的nextTick函数强制执行树形结构nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数this.$nextTick(()=> { this.render(this.data); })
Vue4进阶指南：从零到项目实战（上）
本书全卷Vue4进阶指南：从零到项目实战（上）Vue4进阶指南：从零到项目实战（中）Vue4进阶指南：从零到项目实战（下）目录前言：开启Vue的优雅之旅致读者：Vue的魅力与本书愿景Vue演进哲学：从Vue2到Vue4的蜕变之路环境准备：现代化开发栈配置第一部分：筑基篇-初识Vue的优雅世界第1章：Hello,Vue!1.1Vue核心思想：渐进式框架、声明式渲染、组件化1.2快速上手：CDN引入与
vue中is属性搭配vuedraggable插件实现可拖动可视化大屏展示组件的自定义配置功能吃西瓜不吐籽_ vue.js 前端 javascript
最近有这样一个需求，将大屏上展示的东西都封装成独立的组件让用户自己可以自定义配置自己的组件位置及想要展示的组件，第一个我就想到通过is来实现，分享下我的思路及部分代码供大家参考。先看下大概布局：如图通过上方的组件拖拽的配置卡片来进行动态渲染组件，拖拽用了draggable插件，这样拖拽后直接传数据即可首先先看拖动卡片的部分代码（切换多个个性布局及如何默认展示，是否有配置过布局没有则怎么展示这些逻辑
在 Ant Design Vue 中实现滚动页面时保持下拉菜单展开王旭晨 vue.js javascript 前端
引言在使用AntDesignVue的组件时，默认情况下，当用户滚动页面时，下拉菜单会自动关闭。这在某些场景下可能不够友好，例如在一个长表单中需要频繁切换选项时。本文将介绍如何通过配置和代码优化，实现滚动页面时保持下拉菜单展开的功能，同时不影响其他交互。问题分析为什么滚动页面会关闭下拉菜单？AntDesignVue的下拉组件（如）默认会监听页面的滚动事件。当滚动发生时，组件会认为用户意图离开当前操作
VUE解决Error: error:0308010C:digital envelope routines::unsupported的四种解决方案
问题描述：报错：Error:error:0308010C:digitalenveloperoutines::unsupported报错原因：主要是因为nodeJsV17版本发布了OpenSSL3.0对算法和秘钥大小增加了更为严格的限制，nodeJsv17之前版本没影响，但V17和之后版本会出现这个错误。我的node版本是v18+报错详细信息：rror:error:0308010C:digitale
深度对比：innerHTML vs 虚拟DOM——原理、性能与应用全解析止观止前端前端框架前端 html5 javascript reactjs xss
引言在现代Web开发中，高效操作DOM（文档对象模型）是构建高性能应用的关键。传统方法如innerHTML和新兴的虚拟DOM（VirtualDOM）技术代表了两种截然不同的DOM更新策略。innerHTML作为浏览器原生API，直接操纵HTML字符串；虚拟DOM则是通过JavaScript对象树进行优化更新，广泛应用于React、Vue等框架。本文深入对比两者的核心原理、技术细节、应用场景及优劣，
vue 中同时写固定类名和变量类名不要面包要蛋糕
对一个标签，同时写入固定类名和变量类名方法，有两种，一种是数组方式，一种是对象方式，以此记录。对象方式数组方式个人想法：根据变量真假控制类名，用对象方式；变量即为类名，用数组方式。
第一章【vue】基础（超详细） ᝰ落念英 vue.js 前端 javascript web 开发语言前端框架 vue
Vue基础Vue在HTML中的引入使用Vue渲染数据Vue可直接渲染定义在data里的数据,渲染动态数据使用“{{}}"包裹示例代码{{message}}{{arr}}{{arr.name}}{{arr.age}}{{obj[2]}}在js中挂载Vue实例Vue实列的作用范围：vue会管理el选项命中的元素及其后代元素是否可以使用其他选择器但是建议使用id选择器是否可以设置其他的dom元素可以使用
第二章【vue】基础（超详细） ᝰ落念英 vue.js 前端 javascript
Vue3企业级项目初始化使用Vite构建vue3项目npmcreatevite@latest(项目名称)在根目录中创建vite项目npmcreatevite.运行时自动打开浏览器配置端口地址在vite.config.ts文件中加入exportdefaultdefineConfig({plugins:[vue()],server:{open:true,//自动打开浏览器,//host:"",//配置
第三章【vue】基础（超详细） ᝰ落念英 javascript 开发语言 ecmascript vue.js 前端 web 前端框架
eslint安装npminstalleslint-D初始化npxeslint--initvueUse的应用安装npmi@vueuse/corevueuse官方文档(opensnewwindow)获取滚动距离import{useScroll}from"@vueuse/core";const{y}=useScroll(window);监听元素进入视口import{useIntersectionObse
2023-03-06至2023-03-12 独行者103
这周要求重构代码，将vue2+webpack+antdv转换成vue3+vite+elementui，也算是带薪学习了。不过，看上去改了很多东西，真的很难办。就算是一个高德地图和动态路由，我都改的非常困难。这又是一个巨大的工程。看了古德里安写的《闪击英雄》，也看了隆美尔的《步兵突击》，不过《闪击英雄》要钱，我需要另找。现在在看隆美尔写的《步兵突击》。序言评价还算客观的，肯定了这些将领的军事才能的同
vue keep-alive标签的运用
keep-alive，想必大家都不会很陌生，在一些选项卡中会使用到。其实，它的作用大概就是把组件的数据给缓存起来。比如果我有一个选项卡，标签一，标签二，标签三。现在，我需要实现，当我在标签一的表单中输入内容后，点击标签二，再回到标签一，表单的内容依然存在。如果按以往的做法，不使用keep-alive，那是不能实现的。然而，我们只需要在选项卡的内容最外层包一个keep-alive标签即可。但这儿有一
Vue3+Vite+TS+Axios整合详细教程老马聊技术 Vue Vite TS vue.js
1.Vite简介Vite是新一代的前端构建工具，在尤雨溪开发Vue3.0的时候诞生。类似于Webpack+Webpack-dev-server。其主要利用浏览器ESM特性导入组织代码，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。生产中利用Rollup作为打包工具，号称下一代的前端构建工具。vite是一种新型的前端构建工具，能够显著的提升前端开发者的体验。它主要有俩部分组成：一个
本地包解决npm error code E404 雅痞yuppie npm 前端 node.js
这个错误提示表明npm找不到名为create-vue-admin-cli的包。这是因为你开发的CLI工具还没有发布到npm官方注册表。要解决这个问题，有两种方法：方法一：使用本地开发模式测试1.确保你的CLI已正确链接到全局在你的vue-admin-cli项目根目录下执行：npmlink这会在全局环境中创建一个符号链接，指向你本地的CLI项目。2.使用本地链接的CLI创建项目直接使用命令：vue-
[Vue warn]: onUnmounted is called when there is no active component instance to be associated with 扬帆起航&d vue.js javascript 前端 ecmascript 前端框架
[Vuewarn]:onUnmountediscalledwhenthereisnoactivecomponentinstancetobeassociatedwith.LifecycleinjectionAPIscanonlybeusedduringexecutionofsetup().Ifyouareusingasyncsetup(),makesuretoregisterlifecyclehoo
Vue3组件库实战: 打造高复用UI系统武昌库里写JAVA 面试题汇总与解析课程设计 spring boot vue.js layui 毕业设计
Vue3组件库实战:打造高复用UI系统介绍什么是Vue3组件库在前端开发中，UI组件库是非常重要的一部分。Vue3组件库是基于Vue.js3.x版本开发的一套可用于构建Web应用的UI组件集合，可以帮助开发者快速搭建页面并保证页面的一致性和美观性。目标关键词：Vue3组件库设计与构建设计原则组件库的设计需要遵循一定的原则，比如易用性、可维护性、扩展性等。在设计阶段需要考虑到不同场景的使用，并且保证
Ubuntu基础（Python虚拟环境和Vue） aaiier ubuntu python linux
Python虚拟环境sudoaptinstallpython3python3-venv进入项目目录cdXXX创建虚拟环境python3-mvenvvenv激活虚拟环境sourcevenv/bin/activate退出虚拟环境deactivateVue安装Node.js和npm#安装Node.js和npm（Ubuntu默认仓库可能版本较旧，适合入门）sudoaptinstallnodejsnpm#验
vue3面试题(个人笔记) 武昌库里写JAVA 面试题汇总与解析课程设计 spring boot vue.js java 学习
vue3比vue2有什么优势？性能更好，打包体积更小，更好的ts支持，更好的代码组织，更好的逻辑抽离，更多的新功能。描述Vue3生命周期CompositionAPI的生命周期：onMounted()onUpdated()onUnmounted()onBeforeMount()onBeforeUpdate()onBeforeUnmount()onErrorCaptured()onRenderTrac
el-timeline时间线（Plus）左边图标改为自定义图片顾尘眠 javascript 前端 vue.js
（目前图片有点小，还需要自己去调整下大概样式，比较懒，就放了个大概样子）时间线左侧正常根据文档内容，是填写的icon，但通过icon属性还有另外一个类型，component，可以搭配h函数写一组img元素，实现将图标改为本地图片{{activity.content}}import{h}from'vue'constactivities=[{content:'Eventstart',timestamp
vue3 + Element Plus 系统主题切换顾尘眠 vue.js 前端 javascript
创建主题管理模块(用于配置颜色变量)新建src/utils/theme.tsimport{ref,watchEffect}from'vue'typeThemeType='light'|'dark'|'system'//主题配置constthemeConfig={light:{'--el-color-primary':'#409eff','--bg-color':'#ffffff','--text-
Vue.js 过渡 & 动画 lsx202406 开发语言
Vue.js过渡&动画引言在Web开发中，过渡与动画是提升用户体验的关键元素。Vue.js作为一款流行的前端框架，提供了强大的过渡与动画功能，使得开发者能够轻松实现丰富的交互效果。本文将深入探讨Vue.js中的过渡与动画，包括其原理、应用场景以及实现方法。一、Vue.js过渡原理Vue.js过渡是利用CSS3的transition属性实现的。当Vue.js侦测到数据变化时，会自动触发过渡效果。过渡
Javaweb学习之Vue模板语法（三）不要数手指啦 vue.js 学习前端
目录学习资料前情回顾本期介绍（vue模板语法）文本插值Vue的Attribute绑定使用JavaScript表达式综合实例代码：学习资料Vue.js-渐进式JavaScript框架|Vue.js(vuejs.org)前情回顾项目的创建大家可以看这篇文章Vue学习之项目的创建-CSDN博客本期介绍（vue模板语法）首先，找到我们编写代码的地方找到自己项目的src文件夹，打开之后点击component
数据采集高并发的架构应用 3golden .net
问题的出发点：最近公司为了发展需要，要扩大对用户的信息采集，每个用户的采集量估计约2W。如果用户量增加的话，将会大量照成采集量成3W倍的增长，但是又要满足日常业务需要，特别是指令要及时得到响应的频率次数远大于预期。 &n
不停止 MySQL 服务增加从库的两种方式 brotherlamp linux linux视频 linux资料 linux教程 linux自学
现在生产环境MySQL数据库是一主一从，由于业务量访问不断增大，故再增加一台从库。前提是不能影响线上业务使用，也就是说不能重启MySQL服务，为了避免出现其他情况，选择在网站访问量低峰期时间段操作。一般在线增加从库有两种方式，一种是通过mysqldump备份主库，恢复到从库，mysqldump是逻辑备份，数据量大时，备份速度会很慢，锁表的时间也会很长。另一种是通过xtrabacku
Quartz——SimpleTrigger触发器 eksliang SimpleTrigger TriggerUtils quartz
转载请出自出处：http://eksliang.iteye.com/blog/2208166 一.概述 SimpleTrigger触发器，当且仅需触发一次或者以固定时间间隔周期触发执行；二.SimpleTrigger的构造函数 SimpleTrigger(String name, String group)：通过该构造函数指定Trigger所属组和名称； Simpl
Informatica应用（1） 18289753290 sql workflow lookup 组件 Informatica
1.如果要在workflow中调用shell脚本有一个command组件，在里面设置shell的路径；调度wf可以右键出现schedule，现在用的是HP的tidal调度wf的执行。 2.designer里面的router类似于SSIS中的broadcast（多播组件）;Reset_Workflow_Var：参数重置（比如说我这个参数初始是1在workflow跑得过程中变成了3我要在结束时还要
python 获取图片验证码中文字酷的飞上天空 python
根据现成的开源项目 http://code.google.com/p/pytesser/改写在window上用easy_install安装不上看了下源码发现代码很少于是就想自己改写一下添加支持网络图片的直接解析 #coding:utf-8 #import sys #reload(sys) #sys.s
AJAX 永夜-极光 Ajax
1.AJAX功能:动态更新页面,减少流量消耗,减轻服务器负担 2.代码结构: <html> <head> <script type="text/javascript"> function loadXMLDoc() { .... AJAX script goes here ...
创业OR读研随便小屋创业
现在研一，有种想创业的想法，不知道该不该去实施。因为对于的我情况这两者是矛盾的，可能就是鱼与熊掌不能兼得。研一的生活刚刚过去两个月，我们学校主要的是
需求做得好与坏直接关系着程序员生活质量 aijuans IT 生活
这个故事还得从去年换工作的事情说起，由于自己不太喜欢第一家公司的环境我选择了换一份工作。去年九月份我入职现在的这家公司，专门从事金融业内软件的开发。十一月份我们整个项目组前往北京做现场开发，从此苦逼的日子开始了。系统背景：五月份就有同事前往甲方了解需求一直到6月份，后续几个月也完
如何定义和区分高级软件开发工程师 aoyouzi
在软件开发领域，高级开发工程师通常是指那些编写代码超过 3 年的人。这些人可能会被放到领导的位置，但经常会产生非常糟糕的结果。Matt Briggs 是一名高级开发工程师兼 Scrum 管理员。他认为，单纯使用年限来划分开发人员存在问题，两个同样具有 10 年开发经验的开发人员可能大不相同。近日，他发表了一篇博文，根据开发者所能发挥的作用划分软件开发工程师的成长阶段。　　初
Servlet的请求与响应百合不是茶 servlet get提交 java处理post提交
Servlet是tomcat中的一个重要组成,也是负责客户端和服务端的中介 1,Http的请求方式(get ,post); 客户端的请求一般都会都是Servlet来接受的,在接收之前怎么来确定是那种方式提交的,以及如何反馈,Servlet中有相应的方法, http的get方式 servlet就是都doGet(
web.xml配置详解之listener bijian1013 java web.xml listener
一.定义 <listener> <listen-class>com.myapp.MyListener</listen-class> </listener> 二.作用该元素用来注册一个监听器类。可以收到事件什么时候发生以及用什么作为响
Web页面性能优化（yahoo技术） Bill_chen JavaScript Ajax Web css Yahoo
1.尽可能的减少HTTP请求数 content 2.使用CDN server 3.添加Expires头(或者 Cache-control) server 4.Gzip 组件 server 5.把CSS样式放在页面的上方。 css 6.将脚本放在底部(包括内联的) javascript 7.避免在CSS中使用Expressions css 8.将javascript和css独立成外部文
【MongoDB学习笔记八】MongoDB游标、分页查询、查询结果排序 bit1129 mongodb
游标游标，简单的说就是一个查询结果的指针。游标作为数据库的一个对象，使用它是包括声明打开循环抓去一定数目的文档直到结果集中的所有文档已经抓取完关闭游标游标的基本用法，类似于JDBC的ResultSet(hasNext判断是否抓去完,next移动游标到下一条文档)，在获取一个文档集时，可以提供一个类似JDBC的FetchSize
ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务的解决方法白糖_ ORA-12514
今天通过Oracle SQL*Plus连接远端服务器的时候提示“监听程序当前无法识别连接描述符中请求服务”，遂在网上找到了解决方案： ①打开Oracle服务器安装目录\NETWORK\ADMIN\listener.ora文件，你会看到如下信息： # listener.ora Network Configuration File: D:\database\Oracle\net
Eclipse 问题 A resource exists with a different case bozch eclipse
在使用Eclipse进行开发的时候，出现了如下的问题： Description Resource Path Location TypeThe project was not built due to "A resource exists with a different case: '/SeenTaoImp_zhV2/bin/seentao'.&
编程之美-小飞的电梯调度算法 bylijinnan 编程之美
public class AptElevator { /** * 编程之美小飞电梯调度算法 * 在繁忙的时间，每次电梯从一层往上走时，我们只允许电梯停在其中的某一层。 * 所有乘客都从一楼上电梯，到达某层楼后，电梯听下来，所有乘客再从这里爬楼梯到自己的目的层。 * 在一楼时，每个乘客选择自己的目的层，电梯则自动计算出应停的楼层。 * 问：电梯停在哪
SQL注入相关概念 chenbowen00 sql Web 安全
SQL Injection：就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。具体来说，它是利用现有应用程序，将（恶意）的SQL命令注入到后台数据库引擎执行的能力，它可以通过在Web表单中输入（恶意）SQL语句得到一个存在安全漏洞的网站上的数据库，而不是按照设计者意图去执行SQL语句。首先让我们了解什么时候可能发生SQ
[光与电]光子信号战防御原理 comsci 原理
无论是在战场上,还是在后方,敌人都有可能用光子信号对人体进行控制和攻击,那么采取什么样的防御方法,最简单,最有效呢? 我们这里有几个山寨的办法,可能有些作用,大家如果有兴趣可以去实验一下根据光
oracle 11g新特性:Pending Statistics daizj oracle dbms_stats
oracle 11g新特性:Pending Statistics 转从11g开始，表与索引的统计信息收集完毕后，可以选择收集的统信息立即发布，也可以选择使新收集的统计信息处于pending状态，待确定处于pending状态的统计信息是安全的，再使处于pending状态的统计信息发布，这样就会避免一些因为收集统计信息立即发布而导致SQL执行计划走错的灾难。在 11g 之前的版本中，D
快速理解RequireJs dengkane jquery requirejs
RequireJs已经流行很久了，我们在项目中也打算使用它。它提供了以下功能：声明不同js文件之间的依赖可以按需、并行、延时载入js库可以让我们的代码以模块化的方式组织初看起来并不复杂。在html中引入requirejs 在HTML中，添加这样的 <script> 标签： <script src="/path/to
C语言学习四流程控制if条件选择、for循环和强制类型转换 dcj3sjt126com c
# include <stdio.h> int main(void) { int i, j; scanf("%d %d", &i, &j); if (i > j) printf("i大于j\n"); else printf("i小于j\n"); retu
dictionary的使用要注意 dcj3sjt126com IO
NSDictionary *dict = [NSDictionary dictionaryWithObjectsAndKeys: user.user_id , @"id", user.username , @"username",
Android 中的资源访问(Resource) finally_m xml android String drawable color
简单的说，Android中的资源是指非代码部分。例如，在我们的Android程序中要使用一些图片来设置界面，要使用一些音频文件来设置铃声，要使用一些动画来显示特效，要使用一些字符串来显示提示信息。那么，这些图片、音频、动画和字符串等叫做Android中的资源文件。在Eclipse创建的工程中，我们可以看到res和assets两个文件夹，是用来保存资源文件的，在assets中保存的一般是原生
Spring使用Cache、整合Ehcache 234390216 spring cache ehcache @Cacheable
Spring使用Cache 从3.1开始，Spring引入了对Cache的支持。其使用方法和原理都类似于Spring对事务管理的支持。Spring Cache是作用在方法上的，其核心思想是这样的：当我们在调用一个缓存方法时会把该方法参数和返回结果作为一个键值对存放在缓存中，等到下次利用同样的
当druid遇上oracle blob(clob) jackyrong oracle
http://blog.csdn.net/renfufei/article/details/44887371 众所周知，Oracle有很多坑, 所以才有了去IOE。在使用Druid做数据库连接池后，其实偶尔也会碰到小坑，这就是使用开源项目所必须去填平的。【如果使用不开源的产品，那就不是坑，而是陷阱了，你都不知道怎么去填坑】用Druid连接池，通过JDBC往Oracle数据库的
easyui datagrid pagination获得分页页码、总页数等信息 ldzyz007
var grid = $('#datagrid'); var options = grid.datagrid('getPager').data("pagination").options; var curr = options.pageNumber; var total = options.total; var max =
浅析awk里的数组 nigelzeng 二维数组 array 数组 awk
awk绝对是文本处理中的神器，它本身也是一门编程语言，还有许多功能本人没有使用到。这篇文章就单单针对awk里的数组来进行讨论，如何利用数组来帮助完成文本分析。有这么一组数据： abcd,91#31#2012-12-31 11:24:00 case_a,136#19#2012-12-31 11:24:00 case_a,136#23#2012-12-31 1
搭建 CentOS 6 服务器(6) - TigerVNC rensanning centos
安装GNOME桌面环境 # yum groupinstall "X Window System" "Desktop" 安装TigerVNC # yum -y install tigervnc-server tigervnc 启动VNC服务 # /etc/init.d/vncserver restart # vncser
Spring 数据库连接整理 tomcat_oracle spring bean jdbc
1、数据库连接jdbc.properties配置详解　　jdbc.url=jdbc:hsqldb:hsql://localhost/xdb 　　jdbc.username=sa 　　jdbc.password= 　　jdbc.driver=不同的数据库厂商驱动，此处不一一列举　　接下来，详细配置代码如下：　　 Spring连接池
Dom4J解析使用xpath java.lang.NoClassDefFoundError: org/jaxen/JaxenException异常 xp9802
用Dom4J解析xml,以前没注意,今天使用dom4j包解析xml时在xpath使用处报错异常栈：java.lang.NoClassDefFoundError: org/jaxen/JaxenException异常导入包 jaxen-1.1-beta-6.jar 解决; &nb

vue 代码实例

父子组件

产品列表

你可能感兴趣的:(Vue)