VUE基础知识

---

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

一、变量定义与显示

涉及数组、字符串、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中配置依赖
   

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">
            	<!--使用组件-->
            	<!--在该div处，插入并显示Login.vue组件-->
                <Login></Login>
            </div>
        </div>
    </div>
</template>

<script>
	// 引入Login.vue组件
    import Login from "../user/Login";
    export default {
        name: "Main",
        // 配置组件
        components:{
            Login,
        },
    }
</script>

<style scoped>
</style>