(一)使用Vue-cli学习使用vue框架

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/heroboyluck/article/details/79948868

一、使用npm安装vue-cli,

$>npm install -g vue-cli
$>npm init webpack testVue
$>cd testVue
$>npm install
$>npm run dev

使用npm安装比较慢,推荐使用cnpm : npm install -g cnpm –registry=https://registry.npm.taobao.org

vue-cli安装后的目录:
感觉和angular挺像的

二、功能结构部分

  • .vue后缀文件为组件component,统一放在components目录下,包含<template></template><script></script><style></style>
    组件基本组成

    <template></template>写正常的HTML页面结构,还有一些vueJS的属性指令可以用。<script></script>数据处理计算,提供给template部分数据源。<style></style>就是页面的样式表现了。

    <script></script>作为主要的部分,简单结构,还有其他的属性设置。:
    这里写图片描述

  • 各个页面之间的跳转就需要路由来控制,使用vue-router
    这里写图片描述

    使用<router-link to=''>..</router-link>进行路由的渲染,<router-view></router-view>进行跳转路由页面的渲染。
    <router-link to="/">首页</router-link>
    <router-link to='/3dMenu'>3dMenu</router-link>
    <router-view></router-view>

  • 所有的模式都有一个分-总的流程,App.vue就是这个总揽全局的组件,路由的都设置这里(不牵扯子路由);在App.vue里的template部分内容会存在于跳转路由的各个页面。
    通过main.js注入到页面中。
    这里写图片描述

三、父子组件通信

  • 数据从父组件流向子组件,父组件需要导入子组件,使用components进行声名,给出别名以便引用;父组件通过v-bind:命令保定数据源,子组件通过属性props接收数据。v-bind:可以缩写为’ : ’
    这里写图片描述
    父组件绑定数据p01给子组件,:someMsg=’p01’,someMsg作为数据传输媒介名,在子组件接收时使用。

    <template>
        <div>
            <h3>{{msg}}</h3>
            <h4>child Message:{{count+`次`+info}}</h4>
            <child-component :someMsg='p01' v-on:fromchild='childMsg'></child-component>
        </div>
    </template>
    <script>
        import Child from './childComponents/child'
        export default{
        name:'parent',
        data(){
            return {
                msg:'parent test',
                p01:'parent to child',
                count:0,
                info:''
            }
        },
        components:{
            childComponent:Child
        },
        methods:{
            childMsg:function(msg){
                this.info = msg.message;
                this.count++;
            }   
        }
    }
    </script>
    <style scoped>
    </style>
    

    在子组件通过props属性获取来自父组件的数据,数组类型,可以使用v-bind:进行多数据绑定传输。接收过来的数据可直接使用。

    <template>
        <div class="child">
            <h2>{{child}}</h2>
            <h4>{{someMsg}}</h4>
            <button v-on:click='submit'>submit</button>
        </div>
    </template>         
    
    <script>
        export default{
            name:'childcomponet',
            data(){
                return{
                    child:'child test',
                    msg:''
                }
            },
            props:['someMsg'],
            methods:{
                submit:function(){
                    this.msg = 'childMsg';
                    this.$emit('fromchild',{message:'child to parent'});
                }
            }
        }
    </script>   
    
    <style scoped>
        h2{
            color:red;
        }
        .child{
            border:1px solid #eee;
        }
    </style>    
    
    • 子组件向父组件传输数据,通过事件传递,支持DOM事件类型,v-on:绑定事件,缩写’ @ ‘,这里使用按钮的点击事件,所有的方法都写在属性methods中,使用.$emit()传递事件,第一个参数为事件触发名,在父组件中获取后使用;第二个参数可传递数据给父组件,比如表单提交。

      在父组件中使用v-on来绑定传递事件,v-on:fromchild=’childMsg’,在方法childMsg处理这次子组件中的的事件。

阅读更多

没有更多推荐了,返回首页