vue起步:用html+js快速构建vue

早先学vue的时候在知乎写的学习笔记,今天想起来了给搬到博客上。知乎链接 

这几天刚接触vue.js,由于没有接触过es6和webpack,打算直接用html+js构建vue项目,发现虽然官方文档是html+js写的,但是不够详细,网上的例子又都是vue-cli构建的,于是简单总结分享一下这两天的成果,希望能给同样初学的小伙伴们一点帮助。

 

demo案例

对于官方文档上的内容我就不过多重复了,希望大家能先看一下组件以前的部分。在这里我就简单的进行一下总结,先上一个小例子(这个例子都看不懂的话还是先把官方文档仔细看一看吧):

<body>
<div id="app">
    <input v-model="message"/>
    <p>{{ message }}</p>
    <button v-on:click="show">点我</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello world'
        },
        methods:{
            show:function(){alert("run...")}
        }
    })
</script>

运行结果:

从上面例子可以看到vue的基本使用:数据绑定,有了一个初步认识之后,让我们来看看vue的基本语法

 

一、vue实例

创建根实例,所有的内容都应该包含在根实例中

new Vue({
        el: '#app',
        data: {//数据放这里
            message: 'Hello world'
        },
        methods:{//方法放这里
            show:function(){alert("run...")}
        }
    })

二、模板语法

这部分请直接去官方文档学习,我只简单提一下如何区别快速记忆一些常用的

文本:文本绑定数据的方式

<p>{{ message }}</p>

属性:html属性绑定数据的方式

<div v-bind:class="{'red': true}">
<div :href="url">//简写格式

指令:html没有的属性即是vue的指令,以v-xxx的格式:如v-for、v-if···

数据绑定:前面的可以算是单向的数据绑定,而双向数据绑定需要用到v-model指令

<input v-model="message"/>

事件

<!-- 完整语法 -->
<a v-on:click="show"></a>
<!-- 缩写 -->
<a @click="show"></a>

三、组件

vue的核心内容便是组件,页面的每一块都可以是一个组件,这一部分需要着重理解

1.先来个小例子熟悉一下组件的基本用法

<body>
    <div id="app">
        <p>父组件说:{{message}}</p>
        <!--使用组件-->
        <my-component></my-component>
    </div>
<!--定义模板-->
<template id="childComp">
    <p>子组件说:{{message}}</p>
</template>
<script>
    var child= {
        template: '#childComp',//必须绑定一个模板
        data:function(){
            return {
                message:"我是子组件"
            }
        }
    }
    new Vue({
        el: '#app',
        components: {
            'my-component': child
        },
        data:{
            message:"我是父组件"
        }
    })
</script>
</body>

打印结果:

代码分析:

组件必须绑定一个模板,而模板必须为template标签。其他的用法和vue实例很相似,因为vue实例本身也可以算是一个组件。需要注意的是,在使用组件时,data必须是一个函数,该函数返回data数据,如下:

data:function(){
    return {
         message:"我是子组件"
    }
}

在这里,大家发现我在父组件和子组件中都定义了message,但是显示的是不同的结果。因为在vue.js中组件的作用域是独立的,即使是父子组件也不能继承作用域。而要传递数据就必须借助prop和事件传参,prop往下传,事件往上传

2.子组件通过prop获取父组件参数

<body>
    <div id="app">
        <p>父组件说:{{message}}</p>
        <!--使用组件,传递参数**************-->
        <my-component :message="fu"></my-component>
    </div>
<!--定义模板-->
<template id="childComp">
    <p>子组件说:{{message}}</p>
</template>
<script>
    var child= {
        //声明参数*********************
        props:["fu","message"],
        template: '#childComp',
        data:function(){
            return {
                message:"我是子组件",
                zi:"子组件内容"
            }
        }
    }
    new Vue({
        el: '#app',
        components: {
            'my-component': child
        },
        data:{
            message:"我是父组件",
            fu:"父组件内容"
        }
    })
</script>
</body>

打印结果:

可以看到,父组件的fu传递到了子组件,并赋值给了message

3.子组件通过事件向父组件传递参数

接下来让我们再试试从父组件向子组件传递参数

<body>
    <div id="app">
        <p>父组件说:{{message}}</p>
        <!--自定义increment事件用以传递参数**************-->
        <my-component :message="fu" @increment="get"></my-component>
    </div>
<!--定义模板-->
<template id="childComp">
    <div>
        <p>子组件说:{{message}}</p>
        <button @click="send">传参</button>
    </div>
</template>
<script>
    var child= {
        props:["fu","message"],
        template: '#childComp',
        data:function(){
            return {
                message:"我是子组件",
                zi:"子组件内容"
            }
        },
        methods:{
            send:function(){
                //触发increment事件,并传递参数**************
                this.$emit("increment",{mes:this.zi});
            }
        }
    }
    new Vue({
        el: '#app',
        components: {
            'my-component': child
        },
        data:{
            message:"我是父组件",
            fu:"父组件内容"
        },
        methods:{
            //在事件处理函数中接收参数并赋值给message*************
            get:function(opt){
                this.message = opt.mes;
            }
        }
    })
</script>

打印结果:

 

四、路由

了解组件之后,就可以使用路由来制作一个简单的单页应用了。我们要做的是配置组件和路由映射,并指定组件渲染的位置

<body>
    <div id="app">
        <!-- router-link会被渲染成a标签-->
        <!-- 如果想传递变量,使用:to="url"-->
        <router-link to="/child1">子组件1</router-link>
        <router-link to="/child2">子组件2</router-link>
        <!--路由匹配到的组件将渲染在这里-->
        <router-view></router-view>
    </div>
<!--定义模板-->
<template id="childComp">
    <div>
        <p>子组件说:{{message}}</p>
    </div>
</template>
<script>
    var child1= {
        template: '#childComp',
        data:function(){
            return {
                message:"我是子组件1"
            }
        }
    }
    var child2= {
        template: '#childComp',
        data:function(){
            return {
                message:"我是子组件2"
            }
        }
    }
    //定义路由
    var routes = [
        //每个路由对应一个组件
        {path:'/child1',component:child1},
        {path:'/child2',component:child2}
    ]
    var router = new VueRouter({
        routes:routes
    })
    new Vue({
        el:"#app",
        router:router
    });
</script>
</body>

打印结果:

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页