首页写一篇vue学习笔记

写一篇vue学习笔记

时间: 2024-01-30 13:11:38 浏览: 111

以下是一篇关于Vue学习的简单笔记： 1. Hello World ```html <!DOCTYPE html> <html> <head> <title>Vue Hello World</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h1>{{ message }}</h1> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </body> </html> ``` 这是一个简单的Vue示例，通过Vue实例的data属性来绑定数据，然后在模板中使用双花括号语法来显示数据。 2. Vue Router的安装和使用 ```shell npm install vue-router ``` 安装Vue Router模块。 ```javascript import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ] const router = new VueRouter({ routes }) const app = new Vue({ router }).$mount('#app') ``` 这是一个简单的Vue Router的使用示例，首先需要在Vue中引入Vue Router模块并使用它，然后定义路由规则，最后创建Vue实例时将路由对象传入。

阅读全文