如何在HTML文件使用Vue框架呢 #VUE组件库#router#第一期

红颜不简

已于 2023-04-23 12:06:58 修改

阅读量1.3k

点赞数 1

文章标签： vue.js html 前端

于 2023-04-23 11:47:34 首次发布

本文链接：https://blog.csdn.net/YIC020920/article/details/130318269

版权

首先我们先引入需要的组件或者样式啥的，我就称它们为资料包吧。

怎么使用呢？

怎么绑定上vue？

上面的router注入之前还需要搞点事情的嘞

怎么实现router展示？

最近有个任务是做一个教务管理系统的静态网页，因为说是静态，所以不打算用Vue脚手架去做了，所以直接用HTML文件做吧。项目的目录无非就是html、js、css、img，之后有扩展再另加。在HTML里使用Vue之前，我们在Vue里可以知道它有一个引入CND食用方法，所以我们直接引入即可，But它在页面加载的时候可以会比较慢，So我们可以将它下载到我们对应的文件中。

首先我们先引入需要的组件或者样式啥的，我就称它们为资料包吧。

<!-- 资料包引入 导入vue -->
<script src="./js/vue.js"></script>

<!-- 自己写的样式包 -->
<link rel="stylesheet" href="./css/index.css">

<!-- 引入element-ui样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<!-- 引入element-ui组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<!-- 使用router时需要引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js"></script>

怎么使用呢？

在body里做一个最外层的div盒子定义id为app，我们需要给它绑定上vue的，很多教程都这样做嘛，常规操作了。

<style>
	/* 放样式的 */
</style>
<body>
    <div id="app">
    	<!-- 这里相当于<template></template> -->
    </div>
    <script>
    	// 就是定义数据和做逻辑处理这些的
    </script>
</body>

怎么绑定上vue？

同样在body里添加一个scrpit，在里面做绑定工作，其实就跟Vue项目的三部分一样。

<script>
	new Vue({
		// 这样就绑定上了
		el:"#app",
        // 注入router
        router: router,
        // 定义数据 就可以双向绑定了
        data() {
           return {
               author: 'I am yic',
               selectIndex:1,
           };
        },
        // 逻辑处理的方法
        methods: {
           	pickindex(num){
               console.log(num)
               this.selectIndex = num
           },
        },   
    })
</script>

上面的router注入之前还需要搞点事情的嘞

怎么搞，搞点什么呢？

// 定义路由内容
const test1 = {
	template: 
	'<div>我是一冲</div>' 
}
const test2 = {
	template: 
	'<div>内容2</div>'
}
const test3 = { 
	template: '<div>路由内容3</div>' 
}

// 创建路由
const routes = [
	{ path:'/test1', component: test1 },
	{ path:'/test2', component: test2 },
	{ path:'/test3', component: test3 }
]

// 实例化路由
const router = new VueRouter({
	routes //简写，相当于 routes: routes
	// 做到这里就绑定上router了
})

怎么实现router展示？

<style>
	/* 放样式的 */
</style>
<body>
    <div id="app">
   		<div>
   			<button>切换1</button>
    		<button>切换2</button>
    		<button>切换3</button>
   		</div>
   		<div>
   			<!-- test在这里显示咯 router -->
   			<router-view></router-view>
   		</div>
    </div>
    <script>
    	// 就是定义数据和做逻辑处理这些的
    </script>
</body>

本期内容到此啦

感谢观看！

红颜不简

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
如何在HTML文件使用Vue框架呢 #VUE组件库#router#第一期

最近有个任务是做一个教务管理系统的静态网页，因为说是静态，所以不打算用Vue脚手架去做了，所以直接用HTML文件做吧。在HTML里使用Vue之前，我们在Vue里可以知道它有一个引入。，所以我们直接引入即可，But它在页面加载的时候可以会比较慢，So我们可以将它下载到我们对应的文件中。同样在body里添加一个scrpit，在里面做绑定工作，其实就跟Vue项目的三部分一样。，我们需要给它绑定上vue的，很多教程都这样做嘛，常规操作了。上面的router注入之前还需要搞点事情的嘞。，怎么搞，搞点什么呢？
复制链接

扫一扫