Vue简介（二）
原创
Vue组件
Vue的核心概念之一是组件化开发。通过将用户界面划分为一系列的组件，可以提高代码的可维护性和可复用性。Vue组件是独立的、可嵌套的，并可以拥有自己的状态和行为。
下面是一个示例，展示了如何创建一个Vue组件：
<!DOCTYPE html>
<html>
<head>
<title>Vue Component Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script>
Vue.component('my-component', {
template: '<p>Hello, Vue Component!</p>'
});
new Vue({
el: '#app'
});
</script>
</body>
</html>在上述示例中，我们使用Vue.component方法定义了一个名为my-component的组件。组件的template选项定义了组件的模板内容。然后，我们在Vue实例中使用<my-component></my-component>将组件添加到应用程序中。
Vue路由
在构建单页面应用程序时，常常需要使用路由来实现不同页面之间的导航。Vue提供了一个官方的路由库vue-router，可以方便地实现客户端路由。
下面是一个示例，展示了如何使用Vue Router：
npm install vue-router或
yarn add vue-router安装完成后，您可以开始使用Vue Router。
<!DOCTYPE html>
<html>
<head>
<title>Vue Router Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
<script>
const Home = { template: '<p>Welcome to the Home page!</p>' };
const About = { template: '<p>Welcome to the About page!</p>' };
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = new VueRouter({
routes
});
new Vue({
el: '#app',
router
});
</script>
</body>
</html>在上述示例中，我们首先在HTML文件中引入Vue Router库。然后，我们定义了两个组件：Home和About。接下来，我们创建了一个routes数组，其中包含了路由的配置信息。每个路由对象都包含了path和component属性，分别表示路由路径和对应的组件。
然后，我们创建了一个Vue Router实例，并将路由配置传递给它。最后，在Vue实例中使用<router-link>组件来创建导航链接，并使用<router-view>组件来显示当前路由对应的组件。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录