VUE基础知识

怼烎@ 2023-09-30 09:07 19阅读 0赞

#### 文章目录 ####

*  一、变量定义与显示
 *  二、控件与变量绑定
 *  三、控件与事件绑定
 *  四、会话的发送与接收
 *  五、页面跳转
 *  六、组件嵌套显示

--------------------

`提示：以下是本篇文章正文内容，下面案例可供参考`

## 一、变量定义与显示 ##

涉及数组、字符串、json数据

<template>
        <div>
            
            {
       {msg}}
            {
       {user.userName}}
    
            <div v-text="msg"></div>
            <div v-text="user.userName"></div>
    
    
            
            <ul>
                <li v-for="arr in arrs">{
       {arr}}</li>
            </ul>
            <ul>
                <li v-for="arr in arrs" v-text="arr"></li>
            </ul>
        </div>
    </template>
    
    <script>
        export default {
         
            name: "Ex",
            // 变量定义
            data:function () {
         
                return{
         
                    // 字符串
                    msg:'欢迎使用vue',
    
                    // 数组
                    arrs:['mysql','mybatis','spring','springmvc','junit','jquery','bootstrap','vue',1,2,3],
    
                    // json对象
                    user:{
         
                        userName:'张三',
                        userPwd:'',
                    }
                }
    
            }
        }
    </script>
    
    <style scoped>
    
    </style>

## 二、控件与变量绑定 ##

通过在对应控件中添加v-model="xxx.xxx"直接将该控件与xxx.xxx变量进行绑定，控件得到的数据会直接赋值给xxx.xxx，JS处xxx.xxx的初始化数据也会在控件中显示。

<template>
        <div>
            <form>
                <table>
                    <tr>
                        <td>用户名</td>
                        <td>
                            <input type="text" v-model="user.userName" />
                        </td>
                    </tr>
                    <tr>
                        <td>密码</td>
                        <td>
                            <input type="text" v-model="user.userPwd" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </form>
        </div>
    </template>
    
    <script>
        export default {
         
            name: "Ex",
            data:function () {
         
                return{
         
    
                    // json对象
                    // 支持自动创建变量名功能（即user中无userAge，但可直接使用this.user.userAge，它会自动创建）
                    user:{
         
                        userName:'',
                        userPwd:'',
                    }
                }
    
            }
        }
    </script>
    
    <style scoped>
    
    </style>

## 三、控件与事件绑定 ##

<template>
        <div>
    
            <button type="button" v-on:click="login">登录</button>
    
        </div>
    </template>
    
    <script>
        export default {
         
            name: "Ex",
            data:function () {
         
                return{
         
                    user:{
         
                        userName:'张三',
                    }
                }
    
            },
            // 定义事件
            methods:{
         
                login() {
         
                    //  一定要有this
                    console.log(this.user.userName);
                },
            }
        }
    </script>
    
    <style scoped>
    
    </style>

## 四、会话的发送与接收 ##

1.  发送数据到会话
    
        <template>
            <div>
            
                <button type="button" v-on:click="sendToSession">发送数据到Session</button>
        
            </div>
        </template>
        
        <script>
            export default {
               
                name: "Ex",
                data:function () {
               
                    return{
               
                        user:{
               
                            userName:'张三',
                        }
                    }
        
                },
                // 定义事件
                methods:{
               
                    // 发送数据到会话
                    sendToSession() {
               
                        // key:info ; value:this.user ; 注意一定要转为JSON格式字符串
                        sessionStorage.setItem("info",JSON.stringify(this.user));
                    }
                }
            }
        </script>
        
        <style scoped>
        
        </style>
2.  接收数据
    
        <template>
            <div>
                <h5>欢迎{
             {user.userName}}，这里是主界面</h5>
            </div>
        </template>
        
        <script>
            export default {
               
                name: "Main",
                data(){
               
                    return{
               
                        user:{
               }
                    }
                },
                methods:{
               
        
                },
                // created代表页面创建后需要执行的操作
                created(){
               
                	// 获取会话数据
                	// 获取会话里key为info的json格式数据
                    var str = sessionStorage.getItem("info");
                    // 会话里的数据需要转成对象并赋给data()中的变量
                    this.user = JSON.parse(str);
                    
                    // 只有data()的变量才能够绑定控件并显示，所以实际开发中，data中有大量的变量用于接受页面返回的数据
                }
            }
        </script>
        
        <style scoped>
        
        </style>

## 五、页面跳转 ##

1.  打开内部终端，下载依赖
    
        cnpm install qs
        cnpm install axios
2.  在main.js中配置依赖  
    ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16]
3.  即可，使用页面跳转
    
        <template>
            <div>
        
                <button type="button" v-on:click="jump">跳转</button>
                
            </div>
        </template>
        
        <script>
            export default {
               
                name: "Ex",
                data:function () {
               
                    return{
               
                        }
                    }
        
                },
                // 定义事件
                methods:{
               
                    // 页面跳转，跳转至组件路由为/Main的页面
                    jump() {
               
                        this.$router.push("/Main")
                    },
                }
            }
        </script>
        
        <style scoped>
        
        </style>

## 六、组件嵌套显示 ##

需要Login.vue在Main.vue页面的某部分显示，Login.vue和Main.vue只进行常规的路由配置即可，无需配置为父子组件路由。

<template>
        <div>
            <div class="row">
                <div id="Reg">
                	
                	
                    <Login></Login>
                </div>
            </div>
        </div>
    </template>
    
    <script>
    	// 引入Login.vue组件
        import Login from "../user/Login";
        export default {
         
            name: "Main",
            // 配置组件
            components:{
         
                Login,
            },
        }
    </script>
    
    <style scoped>
    </style>

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/bf204ea587ef4aed93217e349d0cdc4b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA57qn5paw55Sf,size_20,color_FFFFFF,t_70,g_se,x_16