Vue入门案例演示-01

Vue入门案例演示-01

1. Vue 组件

1.1 父组件传值给子组件

以下：

• 父组件：Bolgs
• 子组件：funcBar

父组件：

<template>
    <div>
        <func-bar :resourceArr="blogs" @newblogsEvent="testNew"/>
    </div>
</template>

<script>
import FuncBar from '@/components/com/funcBar.vue'

export default {
    components:{
        FuncBar
        
    },
    data() {
        return {
            blogs:[
                {title:"Vue演示-1",content:"这是Vue演示的内容-1"},
                {title:"Vue演示-2",content:"这是Vue演示的内容-2"},
                {title:"Vue演示-3",content:"这是Vue演示的内容-3"},
            ]
        }
    },
    methods:{
        testNew(){
            alert("新建博客btn被点击了")
            
        }
    }


}
</script>

<style>

</style>

子组件：

<template>
    <div class="funBar">
        <div class="btns">
            <button @click="newBlogs">新建博客</button>            
        </div>
        <div class="editArea" v-show="isAddStatus">
            <h2>标题</h2>
            <input type="text" v-model="currTitle"> <br><br>
            <h4>内容</h4>
            <textarea cols="120" v-model="currContent"></textarea> <br><br>
            <button @click="confirmAdd">确定</button> &nbsp;&nbsp;
            <button @click="cancelAdd">取消</button>

        </div>
        <ul class="BlogsList" v-show="!isAddStatus">
            <li v-for="(it,id) in resourceArr" :key="id">               
                <div>{{it.title}}</div>
                <div>
                    <button @click="delBlogs(id)">删除博客</button>
                </div>
                
            </li>
        </ul>        
    </div>
</template>
<script>
export default {
    
    props:{
        resourceArr:{
            type:Array
        }
    },

    data(){
        return {
            isAddStatus:false,
            currTitle:'',
            currContent:''
           
        }
    },
    methods:{       
       newBlogs(){
           this.isAddStatus = ! this.isAddStatus;
           this.$emit("newblogsEvent")           
       },
       confirmAdd(){          
           this.resourceArr.push({title:this.currTitle,content:this.currContent}); 
           this.isAddStatus =  !this.isAddStatus         

       },
       cancelAdd(){
           this.isAddStatus = ! this.isAddStatus
       },
       delBlogs(id){
           this.resourceArr.splice(id,1);
       }
       
    },
   

   


}
</script>
<style scoped>
    .btns{
        overflow: hidden;
    }
    .btns>button{       
       float: left;
       margin-left: 20vw;

    }
    .editArea input{
        width: 65em;
        height: 2em;
    }
    .editArea textarea{
        min-height: 200px;

    }
    .BlogsList{
        list-style-type: none;
        display: flex;
        flex-direction: column;
    }
    .BlogsList > li{
        margin-top: .5em;
        height: 5em;
        background-color: lightblue;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .BlogsList > li>div{
        width: 50%;
    }
</style>

子组件定义了一个属性【resourceArr，其类型为Array】,
子组件中的“新建博客按钮”绑定了 newBlogs函数，
newBlogs函数中的this.$emit("newblogsEvent") 的作用是新建1个名为newblogsEvent的事件。
父组件中定义了1个testNew函数，且将父组件的函数传入子组件。点击子组件触发子组件的事件，触发父组件的函数。
即父组件中：<func-bar :resourceArr="blogs" @newblogsEvent="testNew"/>

2. Vue 路由

页面挂载过程：

普通组件 =挂载到=》 App.vue 组件 =挂载到=》index.html上

• 所有页面都显示 的组件，在 App.vue 中导入/使用，App.vue中至少要有1个 router-view 用来显示动态变化的内容

路由的2种方式：

• 使用 router-link 和router-view
• 事件+ $route.push("地址或命名路由"，可选的参数对象) + 跳转后的页面取参数值

2.1 登录页明文带参数 跳转到 About页

1.路由配置【 格式：地址/:声明的地址栏参数】
以下在about页的地址栏中声明了 username 和 psw 两个参数

Login页：【传参数】

About页：获取地址栏参数

2.2 Index页 跳转到 Login 页

• 使用 router-link 和router-view
  Index页：【其中：Login为命名路由】

<router-link to="Login">去登录页</router-link>

App.vue中有 router-view可供全局使用