Vue.js及其相关应用II_vue.js需要插入到某个应用上吗-优快云博客

本文深入探讨Vue.js组件创建及使用方法，包括全局与局部组件的区别，并介绍了如何利用Vue-router实现单页面应用中的导航功能。此外，还展示了Element UI框架的基本使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue.js及其相关应用II

Vue组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。

全局组件模板示例

<body>
	<div id="app">
		<myform></myform>
	</div>
	
	<!--模板方式一-->
    <!--<template id="mytemp">
        <form action="" method="post">
            用户<input type="text" name="username"/><br/>
            密码<input type="password" name="password"/><br/>
            <input type="submit" value="提交">
        </form>
    </template>-->
	
	<!--模板方式二-->
    <script id="mytemp2" type="text/template">
        <form action="" method="post">
            用户<input type="text" name="username"/><br/>
            密码<input type="password" name="password"/><br/>
            <input type="submit" value="提交">
        </form>
    </script>
	
	<script>
		Vue.component("myform",{
            template:"#mytemp2"
        })
        new Vue({
            el:"#app",
            data:{
                message:"你好!"
            }
        })
	</script>
	
</body>

页面展示
在这里插入图片描述

小结:全局组件模板创建方式有两种,一是在标签中编辑模板

	//组件模板创建方式一
	<template id="mytemp">
        <form action="" method="post">
            用户<input type="text" name="username"/><br/>
            密码<input type="password" name="password"/><br/>
            <input type="submit" value="提交">
        </form>
    </template>

	//组件模板创建方式二,在<script>标签中编辑,type="text/template"记得要写
	<script id="mytemp2" type="text/template">
        <form action="" method="post">
            用户<input type="text" name="username"/><br/>
            密码<input type="password" name="password"/><br/>
            <input type="submit" value="提交">
        </form>
    </script>

Vue挂载还是得有,不然没法管理上面’div’标签中的’myform’标签中的内容

局部组件创建方式

模板创建方式和全局组件中模板创建方式是一样的
值是script标签中的代码编写位置不一样

<script>
        new Vue({
            el:"#app",
            data:{
                message:"你好!"
            },
            components:{
                //只有当前的挂载点使用,局部组件是在里面定义一个components组件
                myform:{
                    template:"#mytemp2",
                    //这个data必需是一个函数
                    data() {
                        return {
                            count: 0,
                            message:"我也是一个中国人"
                        }
                    },
                    methods:{
                        say(){
                            alert("你点了我");
                        }
                    }
                }
            }
        })
    </script>

局部组件的代码位置是在new Vue({xxx})这个里面的,注意看component的位置
而全局组件中的component的位置是在new Vue({xxx})外面的,这点注意

<script>
        Vue.component("myform",{
            template:"#mytemp2"
        })
        new Vue({
            el:"#app",
            data:{
                message:"你好!"
            }
        })
    </script>

注意格式和位置全局组件和局部组件就能够区别开来,再解释一下全局组件,所谓全局组件,就是在Vue中挂载了的所有标签,或者元素;而局部组件,则是在某个挂载的元素或标签中使用.但是组件模板的创建方式和复用都是一样的.

路由

官方解释:对于大多数单页面应用，都推荐使用官方支持的 vue-router 库.
相当于一个js库,引用它再单页面中使用
don’t bibi,show the code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script>
    <!--引入路由的支持-->
    <script src="vuejs/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <p>
            <!--router-link路由标签,相当于一个a标签
            to="/foo"路径-->
            <router-link to="/main">首页</router-link>
            <router-link to="/singer">个人主站</router-link>
            <router-link to="/hot">热门文章</router-link>
        </p>
        <!--路由出口-->
        <!--路由匹配到的组件将渲染在这里-->
        <router-view></router-view  >
    </div>

    <script>
        /**
         * 1.定义路由,每个路由应该映射一个组件,其中component,
         * 可以是通过Vue.extend()创建组件构造器
         * 或者,只是一个组件配置对象
         */
        var routes=[
            {
                path:"/main",
                component:{
                    template:"<h2>我是主页我怕谁</h2>"
                }
            },
            {
                path:"/singer",
                component:{
                    template:"<h2>我是个人主页</h2>"
                }
            },
            {
                path:"/hot",
                component:{
                    template:"<h2>我是热门文章</h2>"
                }
            }
        ]
        //定义一个路由
        var router = new VueRouter({
            routes //(缩写)相当于 routes:routes
        })
        new Vue({
            el:"#app",
            router:router
        })
    </script>
</body>
</html>

代码解释:
在使用路由之前,同样的Vue核心的格式必须得有,引入其js文件是必须的,然后我们还得引入路由的文件,也就是这句代码

<!--引入路由的支持-->
<script src="vuejs/vue-router.js"></script>

简单解释:
1.准备路由,2.创建路由,3.在vue中使用路由

//1.准备路由
var routes=[{}]
//2.创建路由
var router = new VueRouter({routes}]
//3.在vue中使用路由
new Vue({
    el:"#app",
    router:router
})

页面展示:

Element(饿了么框架)

下面简单解释一下这款由饿了么旗下的Element基于Vue.js的前段框架
以下是官网组件中的截图,没法再博客中全部展示,只能选取一些作为案例
希望各位如果再用这框框架的时候,能够多看官方文档,对你有帮助
Element中文官网:http://element-cn.eleme.io/#/zh-CN/component/installation

在这里插入图片描述

基本流程和步骤

	//1.首先引入样式和组件库,同样的Vue.js也记得引入,这很重要
	<script src="vuejs/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="vuejs/element-ui/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="vuejs/element-ui/element-ui/lib/index.js"></script>

<div id="app">
	//2.接着,在id为app的div中编写你需要的代码,以布局layout为列
	<el-row type="flex" class="row-bg" justify="center">
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
</div>

//vue挂载
<script>
    new Vue({
        el:"#app"
    })
</script>

//3.引入Element中的样式
<style>
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>

这样一个Element框架中简单的layout就完成了
页面效果如下:

在这里插入图片描述

按钮示例

先看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="vuejs/element-ui/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="vuejs/element-ui/element-ui/lib/index.js"></script>
</head>
<body>

<!--
    type:按钮的类型(颜色)
    plain:朴素效果
    round:圆角
    circle:圆形按钮
    icon：图标的样式
    disabled：禁用
    size:按钮大小
 -->
<div id="app">
    <el-button @click="say">默认按钮</el-button>

    <el-button @click="say" type="success"  round>成功按钮</el-button>
    <el-button @click="say" type="success" plain>成功按钮</el-button>
    <el-button @click="say" type="success" icon="el-icon-star-off" circle></el-button>
    <!--
        以前咱们easyui中,禁用只是一个样式而已
        而这里只要禁用，点击效果就失效了
    -->
    <el-button @click="say" type="success" disabled icon="el-icon-star-off">哈哈</el-button>
    <el-button @click="say" type="info" >信息按钮</el-button>

    <el-row>
        <el-button round>默认按钮</el-button>
        <el-button size="medium" round>中等按钮</el-button>
        <el-button size="small" round>小型按钮</el-button>
        <el-button size="mini" round>超小按钮</el-button>
    </el-row>
</div>

<script>
    new Vue({
        el:"#app",
        methods:{
            say(){
                alert("你点击了按钮");
            }
        }
    })
</script>
</body>
</html>