vue续集2

最新推荐文章于 2024-11-08 15:41:32 发布
最新推荐文章于 2024-11-08 15:41:32 发布
阅读量79 收藏
点赞数
文章标签： 前端 javascript ViewUI
原文链接：http://blog.51cto.com/10983441/2434470
版权

1.前端路由

1.1为什么做单页面应用

（1）传统的开发方式 url改变后，立马发送请求，响应整个页面，有可能资源过多，传统开发会让前端的页面出现 “白屏” 用户体验不好

（2）SPA 单页面应用 ： 锚点值的改变后，不会立刻发送请求，而是在某个合适的时机，发送ajax请求，局部改变页面中的数据,页面不立刻跳转用户体验好

1.2前端路由的原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!--
        SPA : Single Page Application

        前端路由
            1.锚点值 监视
            2.ajax获取动态的数据
            3.核心点是锚点值的改变

        前端中 vue|react|angular 都很适合做单页面应用
     -->

     <a href="#/login">登录页面</a>
     <a href="#/register">注册页面</a>
     <div id="app">

     </div>

     <script type="text/javascript">

        // onhashchange 事件  url上的锚点数据（#/xxx改变）
        var oDiv = document.getElementById('app');

        window.onhashchange = function(){
            console.log(location.hash);
            // 根据不同的锚点值，对页面不同的切换。
            switch (location.hash) {
                case '#/login':
                    oDiv.innerHTML = '<h2>登录页面</h2>';
                    break;
                case '#/register':
                    oDiv.innerHTML = '<h2>注册页面</h2>';
                    break;
                default:
                    // statements_def
                    break;
            }
        }
     </script>

</body>
</html>

vue续集2

1.3vue-router的基本使用

npm init --yes
npm install vue-router --save

vue续集2
vue续集2

1.4vue-router集成

它是vue中核心插件
1. 下载vue-router   
   npm init --yes
   npm install vue-router --save
   - 引入vue-router的模块  默认会抛出一个VueRouter对象 另外还有两个全局的组件router-link 和router-view

2. Vue.use(VueRouter)

3. 创建路由对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
    <!-- 1.引入 vue-router的对象 -->
    <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
    <!-- 全局的VueRouter对象   vue-router 还给咱们提供了两个全局的组件 router-link  router-view-->
    <script type="text/javascript">
        // 2.让Vue使用该VueRouter创建
        Vue.use(VueRouter);
        var Login = {
            template:`
                <div>登录页面</div>
            `
        };
        var Register = {
            template:`
                <div>注册页面</div>
            `
        };
        // 3.创建一个路由对象
        var router = new VueRouter({
            // 配置路由对象

            routes:[
                {
                    path:'/login',
                    component:Login
                },
                {
                    path:'/register',
                    component:Register
                }
            ]
        });
        var App = {
            template:`
                <div>
                    <!--router-link默认会被渲染成a标签 to属性默认会被渲染成href属性-->
                    <router-link to="/login">登录页面</router-link>
                    <router-link to="/register">注册页面</router-link>

                    <!--路由组件的出口-->
                    <router-view></router-view>
                </div>
            `
        };
        new Vue({
            el:'#app',
            components:{
                App
            },
            router,
            template:`<App />`
        });
    </script>
</body>
</html>

vue续集2
vue续集2

1.5命名路由

给当前的配置路由信息对象设置name:'login'属性

:to = "{name:'login'}"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
    <!-- 1.引入 vue-router的对象 -->
    <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
    <!-- 全局的VueRouter对象   vue-router 还给咱们提供了两个全局的组件 router-link  router-view-->
    <script type="text/javascript">
        // 2.让Vue使用该VueRouter创建
        Vue.use(VueRouter);
        var Login = {
            template:`
                <div>登录页面</div>
            `
        };
        var Register = {
            template:`
                <div>注册页面</div>
            `
        };

        // 3.创建一个路由对象
        var router = new VueRouter({
            // 配置路由对象

            routes:[
                {
                    path:'/login',
                    name:'login',
                    component:Login
                },
                {
                    path:'/register',
                    name:'register',
                    component:Register
                }
            ]

        });
        var App = {
            template:`
                <div>
                    <!--router-link默认会被渲染成a标签 to属性默认会被渲染成href属性-->
                    <router-link :to="{name:'login'}">登录页面</router-link>
                    <router-link :to="{name:'register'}">注册页面</router-link>

                    <!--路由组件的出口-->

                    <router-view></router-view>

                </div>
            `
        };

        new Vue({
            el:'#app',
            components:{
                App
            },
            router,
            template:`<App />`
        });
    </script>
</body>
</html>

vue续集2

1.6路由范式----路由参数之params,query

 (1)xxxx.html#/user/1
        配置路由对象中  

             {
                path:'/user/:id',
                component:User
             }

             <router-link :to = "{name:'user',params:{id:1}}"></router-link>
   (2)xxxx.html#/user?userId = 1

    {
        path:'/user'
    }
     <router-link :to = "{name:'user',query:{id:1}}"></router-link>

    在组件内部通过this.$route 获取路由信息对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
    <!-- 1.引入 vue-router的对象 -->
    <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
    <!-- 全局的VueRouter对象   vue-router 还给咱们提供了两个全局的组件 router-link  router-view-->
    <script type="text/javascript">

        // 路由范式
           // (1)xxxx.html#/user/1         params
           // (2)xxxx.html#/user?userId = 2    query
        // 2.让Vue使用该VueRouter创建
        Vue.use(VueRouter);

        var UserParams = {
            template:`
                <div>我是用户1</div>
            `,
            created(){
                console.log("用户1this.$route--------",this.$route);
                console.log("用户1this.$route.params.userId--------",this.$route.params.userId);
                // 发送ajax请求
                console.log("this.$router--------",this.$router);

            }
        };
        var UserQuery = {
            template:`
                <div>我是用户2</div>
            `,
            created(){

                console.log("用户2this.$route--------",this.$route);

                // 发送ajax请求
                console.log("用户2this.$router--------",this.$router);

            }
        };

        // 3.创建一个路由对象
        var router = new VueRouter({
            // 配置路由对象

            routes:[
                {
                    // 动态的路由参数 以冒号开头
                    path:'/user/:userId',
                    name:'userp',
                    component:UserParams
                },
                {
                    path:'/user',
                    name:'userq',
                    component:UserQuery
                }
            ]

        });
        var App = {
            template:`
                <div>
                    <!--router-link默认会被渲染成a标签 to属性默认会被渲染成href属性-->
                    <router-link :to="{name:'userp',params:{userId:1}}">用户1</router-link>
                    <router-link :to="{name:'userq',query:{userId:2}}">用户2</router-link>

                    <!--路由组件的出口-->

                    <router-view></router-view>

                </div>
            `
        };

        new Vue({
            el:'#app',
            components:{
                App
            },
            router,
            template:`<App />`
        });

    </script>

</body>
</html>

vue续集2

1.7编程式导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
    <!-- 1.引入 vue-router的对象 -->
    <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
    <!-- 全局的VueRouter对象   vue-router 还给咱们提供了两个全局的组件 router-link  router-view-->
    <script type="text/javascript">

        // 路由范式
           // (1)xxxx.html#/user/1         params
           // (2)xxxx.html#/user?userId = 2    query
        // 2.让Vue使用该VueRouter创建
        Vue.use(VueRouter);

        var UserParams = {
            template:`
                <div>我是用户1</div>
            `,
            created(){
                console.log("用户1this.$route--------",this.$route);
                console.log("用户1this.$route.params.userId--------",this.$route.params.userId);
                // 发送ajax请求
                console.log("this.$router--------",this.$router);

            }
        };
        var UserQuery = {
            template:`
                <div>我是用户2</div>
            `,
            created(){

                console.log("用户2this.$route--------",this.$route);

                // 发送ajax请求
                console.log("用户2this.$router--------",this.$router);

            }
        };

        // 3.创建一个路由对象
        var router = new VueRouter({
            // 配置路由对象

            routes:[
                {
                    // 动态的路由参数 以冒号开头
                    path:'/user/:userId',
                    name:'userp',
                    component:UserParams
                },
                {
                    path:'/user',
                    name:'userq',
                    component:UserQuery
                }
            ]

        });
        var App = {
            template:`
                <div>
                    <button @click = 'paramsHandler'>用户1</button>
                    <button @click = 'queryHandler'>用户2</button>
                    <!--路由组件的出口-->

                    <router-view></router-view>

                </div>
            `,
            methods:{
                paramsHandler(){
                    // 编程式导航
                       this.$router.push({ name: 'userp', params: { userId: 123 }})
                },
                queryHandler(){
                      this.$router.push({ name: 'userq', query: { userId: 321 }})
                }
            }
        };

        new Vue({
            el:'#app',
            components:{
                App
            },
            router,
            template:`<App />`
        });
    </script>

</body>
</html>

vue续集2

1.8嵌套路由

一个router-view 嵌套另外一个router-view
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div id="app"></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
    <!-- 1.引入 vue-router的对象 -->
    <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
    <!-- 全局的VueRouter对象   vue-router 还给咱们提供了两个全局的组件 router-link  router-view-->
    <script type="text/javascript">
    // 嵌套路由：
    // 需求：进入首页之后 点击 音乐 /home/music   电影 /home/movie
    Vue.use(VueRouter);

    var Home = {
        template: `
                <div>
                    <br />

                    <router-link to = '/home/music'>音乐</router-link>
                    <router-link to = '/home/movie'>电影</router-link>

                    <!--子路由组件的出口-->
                    <router-view></router-view>

                </div>
            `
    };

    var Music = {
        template: `
                <div>我是音乐</div>

            `
    };
    var Movie = {
        template: `
                <div>我是电影</div>

            `
    };

    // 3.创建一个路由对象
    var router = new VueRouter({
        // 配置路由对象

        routes: [{

                path: '/',
                // redirect:{name:'home'}
                redirect: '/home'
            },
            {
                // 动态的路由参数 以冒号开头
                path: '/home',
                                //这里不能使用别名，会报警告
                // name:'home',
                component: Home,
                children: [
                    // 动态路由匹配 表示你的子组件中的结构是不同的

                    // 当访问/home时，Home组件的出口是不会渲染任何内容，这是因为没有匹配到合适的子路由
                    {
                        path: '',
                        component: Music
                    },
                    {
                        path: 'music',
                        component: Music,

                    },
                    {
                        path: 'movie',
                        component: Movie

                    }

                ]
            }
        ]

    });
    var App = {
        template: `
                <div>
                    <router-link to = "/home">首页</router-link>
                    <!--路由组件的出口-->

                    <router-view></router-view>

                </div>
            `
    };

    new Vue({
        el: '#app',
        components: {
            App
        },
        router,
        template: `<App />`
    });
    </script>
</body>

</html>

vue续集2

1.9动态路由匹配

 // 共同的子组件
    var ComDesc = {
        data() {
            return {
                msg: ''
            }
        },
        template: `
            <div>
                    我是{{msg}}
            </div>
        `,
        created() {
            // alert(1);
            this.msg = 'andorid';
        },
        watch: {

// 提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。
//因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
            '$route' (to, from) {
                // 对路由变化作出响应...
                console.log("to------------------", to);
                console.log("from------------------", from);

                this.msg = to.params.id;

            }
        }
    }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div id="app"></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
    <!-- 1.引入 vue-router的对象 -->
    <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
    <!-- 全局的VueRouter对象   vue-router 还给咱们提供了两个全局的组件 router-link  router-view-->
    <script type="text/javascript">
    // 嵌套路由：
    // 需求：进入首页之后 点击 音乐 /home/music   电影 /home/movie
    Vue.use(VueRouter);

    var Timeline = {
        template: `
                <div>
                    <router-link :to = "{name:'comDesc',params:{id:'android'}}">Android</router-link>
                    <router-link :to = "{name:'comDesc',params:{id:'frontend'}}">前端</router-link>

                    <router-view></router-view>

                </div>
            `
    };
    var Pins = {
        template: `
                <div>
                    我是沸点

                </div>
            `
    };

    // 共同的子组件
    var ComDesc = {
        data() {
            return {
                msg: ''
            }
        },
        template: `
            <div>
                    我是{{msg}}
            </div>
        `,
        created() {
            // alert(1);
            this.msg = 'andorid';
        },
        watch: {

// 提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。
//因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
            '$route' (to, from) {
                // 对路由变化作出响应...
                console.log("to------------------", to);
                console.log("from------------------", from);

                this.msg = to.params.id;

            }
        }
    }

    // 3.创建一个路由对象
    var router = new VueRouter({
        // 配置路由对象
        routes: [{
                // 动态的路由参数 以冒号开头
                path: '/timeline',
                component: Timeline,
                children: [{
                        path: "",
                        component: ComDesc
                    },
                    {
                        path: '/timelin/:id',
                        name: 'comDesc',
                        component: ComDesc
                    }
                ]

            },
            {
                // 动态的路由参数 以冒号开头
                path: '/pins',
                name: 'pins',
                component: Pins,

            }

        ]

    });
    var App = {
        template: `
                <div>
                    <router-link to = "/timeline">首页</router-link>
                     <router-link to = "/pins">沸点</router-link>
                    <!--路由组件的出口-->

                    <router-view></router-view>

                </div>
            `
    };

    new Vue({
        el: '#app',
        components: {
            App
        },
        router,
        template: `<App />`
    });
    </script>
</body>

</html>

vue续集2

1.10keep-alive

<keep-alive>
                    <router-view></router-view>
</keep-alive>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div id="app"></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
    <!-- 1.引入 vue-router的对象 -->
    <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
    <!-- 全局的VueRouter对象   vue-router 还给咱们提供了两个全局的组件 router-link  router-view-->
    <script type="text/javascript">
    // 嵌套路由：
    // 需求：进入首页之后 点击 音乐 /home/music   电影 /home/movie
    Vue.use(VueRouter);

    var Timeline = {
        template: `
                <div>
                    我是首页
                </div>
            `,
        created() {
            console.log('首页组件创建了');
        },
        mounted() {
            console.log('首页组件DOM加载了')
        },
        destroyed() {
            console.log('首页销毁了');
        }
    };
    var Pins = {
        template: `
                <div>

                <h3 @click = 'clickHandler'> 我是沸点</h3>

                </div>
            `,
        methods: {
            clickHandler(e) {
                e.target.style.color = 'red';
            }
        },
        created() {
            console.log('沸点组件创建了');
        },
        mounted() {
            console.log('沸点组件DOM加载了')
        },
        destroyed() {
            console.log('沸点销毁了');
        }
    };

    // 3.创建一个路由对象
    var router = new VueRouter({
        // 配置路由对象

        routes: [{
                // 动态的路由参数 以冒号开头
                path: '/timeline',
                component: Timeline
            },
            {
                // 动态的路由参数 以冒号开头
                path: '/pins',
                name: 'pins',
                component: Pins,

            }

        ]

    });
    var App = {
        template: `
                <div>
                    <router-link to = "/timeline">首页</router-link>
                     <router-link to = "/pins">沸点</router-link>
                    <!--路由组件的出口-->
        <keep-alive>
                    <router-view></router-view>
        </keep-alive>
                </div>
            `
    };

    new Vue({
        el: '#app',
        components: {
            App
        },
        router,
        template: `<App />`
    });
    </script>
</body>

</html>

vue续集2
vue续集2

1.11路由meta实现权限控制

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div id="app"></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
    <!-- 1.引入 vue-router的对象 -->
    <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
    <!-- 全局的VueRouter对象   vue-router 还给咱们提供了两个全局的组件 router-link  router-view-->
    <script type="text/javascript">
    // 嵌套路由：
    // 需求：进入首页之后 点击 音乐 /home/music   电影 /home/movie
    Vue.use(VueRouter);

    // 导航栏上 有首页  智能题库  登录退出 四个按钮

    // 用户访问首页时 看到的是首页的内容

     // 1.当用户访问智能题库时，此时我们检测用户是否有权限访问该智能题库的内容，
     // 如果没有 检测用户是否登录过，如果没有，则跳转登录页面，登录完成之后。

     // 在localStroage中通存储该用户的用户名和密码，并且立刻跳转到智能题库页面
     // 2.当用户点击黜退，该用户直接删除

    var Home = {
        template: `
                <div>
                    我是首页
                </div>
         `
    };
    var Questionbank = {
        template: `
                <div>

                    我是题库

                </div>
            `
    };

    // 登录组件

    var Login = {
        data(){
            return {
                name:'',
                pwd:''
            }
        },
        template:`
                <div>
                    <input type="text" v-model = 'name' />
                    <input type="text" v-model = 'pwd' />
                    <input type="button"  value = '登录' @click = 'loginHandler'/>
                </div>
        `,
        methods:{
            loginHandler(){
                alert(1);
                // 要登录了
                // 存储用户名会被密码 保存到 localStorage 然后跳转相应的路由（智能题库）
                    localStorage.setItem('user', {name:this.name,pwd:this.pwd});

                    // 编程式导航
                    this.$router.push({name:'questionbank'});

            }
        }
    };
    // 3.创建一个路由对象
    var router = new VueRouter({
        // 配置路由对象

        routes: [{
                // 动态的路由参数 以冒号开头
                path: '/home',
                component: Home
            },
            {
                // 动态的路由参数 以冒号开头
                path: '/questionbank',
                name: 'questionbank',
                component: Questionbank,
                // 给未来的路由 做权限控制
                meta:{
                    // 表明访问该组件时需要登录
                    auth: true
                }

            },
            {
                path:'/login',
                component:Login
            }

        ]

    });
    // 全局的导航守卫

    router.beforeEach(function(to,from,next){
        console.log(to.meta.auth);
        console.log(from);

        // 如果不调用next 那么页面会卡主

        if(to.meta.auth){
            // 用户点击了智能题库的导航 该用户未登录，需要登录判断
            if (localStorage.getItem('user')) {
                // 不为空 放行
                next()
            }else{
                // 为空  进入登录页面
                  next({path:'/login'});
            }
        }else{
            // 直接放行
            next();
        }
    });

    var App = {
        template: `
                <div>
                    <router-link to = "/home">首页</router-link>
                     <router-link to = "/questionbank">智能题库</router-link>
                     <router-link to = '/login'>登录</router-link>
                     <a href="javascript:void(0)" @click = 'clear'>退出</a>
                    <!--路由组件的出口-->
                    <keep-alive>
                    <router-view></router-view>
                    </keep-alive>
                </div>
            `,
            methods:{
                clear(){
                    // 退出
                    localStorage.removeItem('user');
                    this.$router.push('/login');
                }
            }
    };

    new Vue({
        el: '#app',
        components: {
            App
        },
        router,
        template: `<App />`
    });
    </script>
</body>

</html>

vue续集2
vue续集2

bisounie3680
关注
vue续集1
bisounie3680的博客
08-31 104
1.vue组件 1.1局部组件的使用 var App = { tempalte:` <div class='app'></div>` }; //2.挂子 <App />单闭合 双闭合都可以 new Vue({ el:"#app", //用子 template:<App /> compon...
vue续集3
bisounie3680的博客
09-01 118
1.axios 1.1安装 cd C:\Users\Administrator\Desktop\myvue npm init --yes npm install axios -S 1.2axios的get请求与post请求 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&...
vue续集4
bisounie3680的博客
09-01 88
1.脚手架 1.1脚手架介绍 前端开发中提到的“脚手架”是一个形象的比喻，比喻各类语言的前期工作环境。 在软件开发上（当然也包括前端开发）的脚手架指的就是：有人帮你把这个开发过程中要用到的工具、环境都配置好了，你就可以方便地直接开始做开发，专注你的业务，而不用再花时间去配置这个开发环境，这个开发环境就是脚手架。 比如vue.js就有个vue-cli脚手架，基于node.js的开发环境，作...
VUE
qq_64633597的博客
09-16 517
变更方法：push() pop() shift() unshift() splice() sort() reverse()与方法的区别：计算属性仅在响应式更新时才会重新计算，方法调用总是在重渲染发生时再次执行。一般将vue组件单独构建在一个单独的vue文件中，这就是SFC 单文件组件。.lazy number：只接受数字格式 trim：取消空格。替换数组：filter() concat() slice()定义在父中，只能由父进行修改，若无值，可在子类中指定默认值。
Vue基础知识
csdnidofkdy2138的博客
08-02 1074
可在一个完整项目中使用vue，或某一个功能上使用vue，或某一个html中使用vue的某个功能。基于html的模板语法，是我们能够声明式的将其组件实例的数据绑定到呈现的dom上，所有的vue模板都是语法层面合法的html，可被符合规范的浏览器和html解析器解析。构用户界面的js的渐进式框架，基于htlm、css、js，并提供声明式组件化的编程模型，帮你高效开发用户界面。node.js：是一个开源的，跨平台的javaScript运行环境，简单来说它是一款应用程序，是一款软件，可运行javaScript。
Vue2知识点（四）（使用Vue CLI知识点（续集））
薇z的博客
07-06 236
Vue2知识点（四）（使用Vue CLI知识点（续集））
vue实现页面锁屏完美解决（续集）
呵呵的牛
06-06 2542
vue实现页面锁屏完美解决（续集）
Vue全家桶(一)
luckypian
08-27 1509
今天写了一天的时间，麻烦读者怀一颗感恩的心阅读哈~小编提前感谢大家咯
Vue的模板语法（续集）
qq_62331938的博客
09-03 108
组件(Component)是Vue最强大的功能之一组件可以扩展HTML元素，封装可重用的代码组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树全局和局部组件全局组件：Vue.component(tagName, options)，tagName为组件名，options为配置选项。局部组件: new Vue({el:'#d1',components:{...}})注册后，我们可以使用以下方式来调用组件：props。
前后端分离vue+java+mysql续集
07-26
前后端分离vue+java+mysql续集
vue-e-commerce：Vue出一个电商
03-04
:rocket: 技术前端：Vue，Vue路由器，Element-UI，Axios， 图表后端： Node.js ， 表示， 重量， 的MySql ， 续集，MSSQL，.NET Core Web API 历史 日期 描述 2021/2/24 安装Vue，通过Vue建立专案项目添加Element-...
vue-douyin：基于Vue.js的模仿抖音的Web App
02-03
Vue2 威克斯 Vue路由器 Vue CLI 3 Vue-socket.io 触控笔 初步技术栈 koa2 续集 伊奥雷迪斯 套接字 项目运行 使用Docker： 自学docker时用这个项目精心实践，不用本地安装数据库啥的，（仅效果预览）推荐使用...
Webserver(3.3)生产者消费者模型
学习历程记录和分享
11-05 361
解决该问题需要用互斥量确保线程同步，用条件变量或者信号量去解决生产者和消费者之间同步的问题，生产者把数据生产满了要通知消费者去消费。会产生数据安全问题，比如生产者还未生产出来，就去消费。
vxe-grid ，增加新行，并且定位到新增的行
花花鱼的专栏
11-05 225
vxe-grid新增空行，并且定位到空行位置。
WPF+MVVM案例实战与特效（二十五）- 3D粒子波浪效果实现
lingshuangcanxue
11-05 298
使用WPF的3D控件以及动画效果实现3D粒子波浪的特效
vue2 -- el-form组件动态增减表单项及表单项验证
King Saj
11-06 113
在数据录入场景（如订单信息录入）中，可根据实际情况（如商品种类增加）动态添加表单项（如商品相关信息）。包含必填项验证和数据格式验证（如邮箱、电话格式），防止错误数据提交。// 此处执行错误的逻辑。// 执行父组件回调。
vue前端进行AES加密，JAVA对其进行AES解密
Ls66666Ls的博客
11-04 263
【代码】vue前端进行AES加密，JAVA对其进行AES解密。
vue种ref跟reactive的区别?
renqq001的博客
11-07 584
vue种ref跟reactive的区别?
【JavaEE进阶】导读
最新发布
2401_83227065的博客
11-08 787
随着技术的发展, ⽆论是后端开发还是前端开发, 开发的时候都很少使⽤原⽣的代码，⽐如：JDBC、JS 等. 取⽽代之的是各种开发框架. 如：后端框架：Spring, SpringBoot, Mybatis等，前端常⽤的框架： Vue、Node等. 这些框架都有⼀个共同的特点, 就是简单, ⾼效. 这极⼤的提⾼了我们的开发效率. 那什么是框架呢?通俗的来讲: 框架是实现某种功能的半成品, 他提供了⼀些常⽤的⼯具类, 我们在框架的基础上, 可以更加⾼效的进⾏开发.
Vue2结合ElementUI与Electron的项目配置指南
资源摘要信息:"vue2+elementui+electron项目配置" 在进行vue2结合elementui和electron的项目配置时，需要注意以下几点关键知识： 1. Vue.js基础知识： Vue.js是一个构建用户界面的渐进式JavaScript框架，它易于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值