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>

element实现动态路由+面包屑软件技术NINI vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
vue3中el-table中点击图片放大时，被表格覆盖叫我小鹏呀 vue.js javascript 前端
问题：vue3中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported
vue项目element-ui的table表格单元格合并酋长哈哈 vue.js elementui javascript 前端
一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'
Vue中table合并单元格用法 weixin_30613343 javascript ViewUI
地名结果人名性别{{item.name}}已完成未完成{{item.groups[0].name}}{{item.groups[0].sex}}{{item.groups[son].name}}{{item.groups[son].sex}}exportdefault{data(){return{list:[{name:'地名1',result:'1',groups:[{name:'张三',sex
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
Vue( ElementUI入门、vue-cli安装) m0_l5z elementui vue.js
一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
vue+el-table 可输入表格使用上下键进行input框切换以对_ vue学习记录 vue.js javascript 前端
使用上下键进行完工数量这一列的切换-->//键盘触发事件show(ev,index){letnewIndex;letinputAll=document.querySelectorAll('.table_inputinput');//向上=38if(ev.keyCode==38){if(index==0){//如果是第一行,回到最后一个newIndex=inputAll.length-1}elsei
vue + Element UI table动态合并单元格我家媳妇儿萌哒哒 element UI vue.js 前端 javascript
一、功能需求1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）二、功能实现exportdefault{data(){return{tableData:[{name:'a',address:'1',age:'1',six:'2'},{name:'a',addre
vue 创建项目报错：command failed: npm install --loglevel error 那鱼、会飞 vue.js vue-cli3
这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/[email protected]@vue/[email protected]（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错
计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署） java毕设程序源码王哥 php 课程设计 vue.js
该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：原生PHP++Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发
字节二面 Redstone Monstrosity 前端面试
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
vue render 函数详解 (配参数详解) 你的眼睛會笑 vue2 vue.js javascript 前端
vuerender函数详解(配参数详解)在Vue3中，`render`函数被用来代替Vue2中的模板语法。它接收一个h函数（或者是`createElement`函数的别名），并且返回一个虚拟DOM。render函数的语法结构如下：render(h){returnh('div',{class:'container'},'Hello,World!')}在上面的示例中，我们使用h函数创建了一个div元素
前端代码上传文件余生逆风飞翔前端 javascript 开发语言
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
VUE3 + xterm + nestjs实现web远程终端或连接开启SSH登录的路由器和交换机。焚木灵 node.js vue
可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，
详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端 vue.js javascript
前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
Vue 项目运行时，报错 Error: Cannot find module ‘node:path‘ 周bro vue.js 前端 javascript node.js npm
node-v是否显示nodenpm-v报错Error:Cannotfindmodule‘node:path'是因为node版本和npm版本不匹配安装相对应的版本node版本10.16.0对应npm版本[email protected]执行该命令即可匹配版本官网https://nodejs.org/en/about/previous-releases
vue2实现复制,粘贴功能周bro vue.js javascript 前端
一、需求说明在项目中点击按钮复制某行文本是很常见的应用场景，在Vue项目中实现复制功能需要借助vue-clipboard2插件。二、代码实现1、安装vue-clipboard2依赖（出现错误的话，可以试试切换成淘宝镜像源npmconfigsetregistryhttps://registry.npm.taobao.org）npminstall--savevue-clipboard22、在main.
【vite 自动配置路由】 CODER-V 前端 javascript vue.js 前端软件构建
手动配置路由，是一个没有技术含量又浪费时间的工作。本文将介绍vite构建的vue3项目如何编写一个自动配置路由的脚本。约定大于配置要想使用脚本完成路由的自动配置，我们就需要遵循以下目录规则：每一个页面对应一个包，当前包下的主页面命名为index.vue；每个包里必须配置一个page.js；在每一个page.js里边配置，额外的路由信息，比如：exportdefault{title:'商品',men
Vue + Express实现一个表单提交九旬大爷的梦
最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
Vue3 vant组件库自动导入不叫虎子 Vue vue.js 前端 javascript 前端框架 typescript
实现：完整使用vant组件库文档安装：#Vue3项目，安装最新版Vantnpmivant#通过yarn安装yarnaddvant#通过pnpm安装pnpmaddvant【一】按需引入：https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#fang-fa-er.-an-xu-yin-ru-zu-jian-yang-shi【二】批量引入在基于vit
vant-element-ts一起使用存在的问题 flynn_ 问题总结 vue
由于vant-ui与element-ui部分组件存在冲突，导致在vue-typescript中出现错误:Subsequentpropertydeclarationsmusthavethesametype.Property'$notify'mustbeoftype'ElNotification',butherehastype'Notify'.方案：一个全局导入，一个按需导入,避免冲突的组件同时使用，
第三十一节:Vue路由:前端路由vs后端路由的了解曹老师
1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
基于JavaWeb开发的Java+SpringMvc+vue+element实现上海汽车博物馆平台网顺技术团队成品程序项目 java vue.js 汽车课程设计 spring boot
基于JavaWeb开发的Java+SpringMvc+vue+element实现上海汽车博物馆平台作者主页网顺技术团队欢迎点赞收藏⭐留言文末获取源码联系方式查看下方微信号获取联系方式承接各种定制系统精彩系列推荐精彩专栏推荐订阅不然下次找不到哟Java毕设项目精品实战案例《1000套》感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人文章目录基
【前端】vue 报错:The template root requires exactly one element 程序员-张师傅前端前端 vue.js javascript
【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行
C# 开发教程-入门基础天马3798 教程系列整理 c#开发语言
1.C#简介、环境，程序结构2.C#基本语法，变量，控制局域，数据类型，类型转换3.C#数组、循环，Linq4.C#类，封装，方法5.C#枚举、字符串6.C#面相对象，继承，封装，多态7.C#特性、属性、反射、索引器8.C#委托，事件，集合，泛型9.C#匿名方法10.C#多线程更多：JQuery开发教程入门基础Vue开发基础入门教程Vue开发高级学习教程
若依后端正常启动但是uniapp移动端提示后端接口异常大可大可抖 uni-app
pc端能用模拟器也能正常连接接口，手机端真机调试连不上接口解决：1.先看config.js的填自己的ip地址module.exports={//baseUrl:'https://vue.ruoyi.vip/prod-api',baseUrl:"http://192.168.101.5:8080",}2.网络环境问题（防火墙）点击属性然后选择专用
好看的vue登录页面(附源代码背景图) 小小薛定谔 vue.js javascript css 前端
一、效果展示二、代码你好!欢迎回来登录忘记密码?注册exportdefault{name:"MedLogin",data(){return{confirm_disabled:false,loginForm:{no:'',password:''},rules:{no:[{required:true,message:'请输入账号',trigger:'blur'},{min:3,max:6,messag
uniapp 获取各种小程序code 灵魂清零 uniapp 小程序
各种小程序在进入小程序是都需要去获取code才能拿到基础信息，自己记录一下用uniapp开发小程序是获取微信小程序、百度小程序、头条小程序、支付宝小程序的codeVue.prototype.$global={appLogin(){returnnewPromise((resole,reject)=>{varthat=this;varwxLoginUrl=app.globalData.url+"/lo
数据采集高并发的架构应用 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)