Vue资料涵盖了Vue.js的基本概念、特点、安装方法和基础语法,帮助开发者快速入门。文章详细介绍了Vue.js的组件化开发、状态管理和路由配置,提供了丰富的示例代码。此外,还包括了Vue.js项目实战和部署指南,是学习和使用Vue.js的全面指南。
Vue.js 是一个用于构建用户界面的渐进式前端框架。与其它大型框架不同的是,Vue.js 的核心库非常轻量,只关注View层的构建。Vue.js 提供了丰富的库和工具,可以与现有的项目和库很好地集成。它支持单页面应用,同时也可以用于构建大型的单页应用或混合应用。
Vue.js 有两种安装方式,一种是通过 CDN 引入,另一种是通过 npm 安装。
直接在 HTML 文件中使用 <script>
标签引入 Vue.js:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue.js 示例</title> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2"></script> </head> <body> <div id="app"> {{ message }} </div> </body> </html>
通过 npm 安装 Vue.js:
npm install vue
创建一个新项目,并引入 Vue.js:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue.js 示例</title> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{ message }} </div> </body> </html>
创建一个 Vue 实例,并使用它来操作 DOM:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue.js 示例</title> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2"></script> </head> <body> <div id="app"> {{ message }} </div> <script> // 创建一个 Vue 实例 var app = new Vue({ el: '#app', data: { message: 'Hello, Vue!' } }); </script> </body> </html>
这个示例中,el
属性指定 DOM 元素的 ID,data
属性包含示例数据。当创建 Vue 实例后,Vue 会自动将 message
的值显示在页面上。
Vue.js 使用基于 HTML 的模板语法,允许开发者声明性地将 DOM 绑定到应用程序的数据。Vue.js 使用了简单的语法来创建动态绑定。
使用 {{ }}
双大括号进行文本插值:
<div id="app"> {{ message }} </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello, Vue!' } }); </script>
指令是 Vue.js 提供的特殊属性,用于处理模板中的特殊逻辑。例如 v-if
和 v-for
。
v-if
指令用于条件渲染:
<div id="app"> {{ message }} <p v-if="seen">现在你看到我了</p> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello, Vue!', seen: true } }); </script>
v-for
指令用于列表渲染:
<div id="app"> <ul> <li v-for="item in items">{{ item }}</li> </ul> </div> <script> var app = new Vue({ el: '#app', data: { items: ['Apple', 'Banana', 'Orange'] } }); </script>
Vue.js 使用 v-on
指令来监听 DOM 事件。
<div id="app"> <button v-on:click="add">增加计数器</button> <p>{{ count }}</p> </div> <script> var app = new Vue({ el: '#app', data: { count: 0 }, methods: { add: function() { this.count++; } } }); </script>
Vue.js 使用 v-model
指令来实现双向绑定。
<div id="app"> <input v-model="message"> <p>{{ message }}</p> </div> <script> var app = new Vue({ el: '#app', data: { message: '' } }); </script>
组件是 Vue.js 中构建视图的基本单元,它是一个可复用的 Vue 实例。组件可以有自己的数据和逻辑,并且可以被嵌套在其他组件中。
可以通过 Vue 的 Vue.component
来注册全局组件,或者在 Vue 实例内部通过 components
选项来注册局部组件。
<div id="app"> <my-component></my-component> </div> <script> Vue.component('my-component', { template: '<div>这是我的组件</div>' }); var app = new Vue({ el: '#app' }); </script>
<div id="app"> <my-component></my-component> </div> <script> var app = new Vue({ el: '#app', components: { 'my-component': { template: '<div>这是我的组件</div>' } } }); </script>
组件之间可以通过 props 和事件来传递数据。
<div id="app"> <my-component message="Hello, Props!"></my-component> </div> <script> Vue.component('my-component', { props: ['message'], template: '<div>{{ message }}</div>' }); var app = new Vue({ el: '#app' }); </script>
<div id="app"> <my-component v-on:custom="handleCustomEvent"></my-component> </div> <script> Vue.component('my-component', { template: '<button @click="sendCustomEvent">点击我</button>', methods: { sendCustomEvent: function() { this.$emit('custom', 'Hello, Custom Event!'); } } }); var app = new Vue({ el: '#app', methods: { handleCustomEvent: function(data) { console.log(data); } } }); </script>
<div id="app"> <button v-on:click="currentComponent = 'component-a'">组件A</button> <button v-on:click="currentComponent = 'component-b'">组件B</button> <component v-bind:is="currentComponent"></component> </div> <script> Vue.component('component-a', { template: '<div>这是组件A</div>' }); Vue.component('component-b', { template: '<div>这是组件B</div>' }); var app = new Vue({ el: '#app', data: { currentComponent: 'component-a' } }); </script>
<div id="app"> <my-component> <template slot="header"> <h1>这里是标题</h1> </template> <template slot="footer"> <p>这里是底部信息</p> </template> </my-component> </div> <script> Vue.component('my-component', { template: '<div>' + '<slot name="header"></slot>' + '<slot></slot>' + '<slot name="footer"></slot>' + '</div>' }); var app = new Vue({ el: '#app' }); </script>
Vuex 是 Vue.js 的状态管理模式,是 Vue.js 的官方状态管理库。Vuex 可以帮助我们管理应用的状态,特别是复杂应用的状态管理。
首先需要安装 Vuex:
npm install vuex
然后在项目中使用 Vuex:
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++; } } }); const app = new Vue({ el: '#app', store, template: '<div>{{ count }}</div>', methods: { increment() { this.$store.commit('increment'); } } });
计算属性是基于组件的响应式数据进行计算的。
<div id="app"> <p>{{ fullName }}</p> </div> <script> var app = new Vue({ el: '#app', data: { firstName: 'John', lastName: 'Doe' }, computed: { fullName: function() { return this.firstName + ' ' + this.lastName; } } }); </script>
监听器用于侦听属性的变化。
<div id="app"> <p>{{ fullName }}</p> </div> <script> var app = new Vue({ el: '#app', data: { firstName: 'John', lastName: 'Doe' }, computed: { fullName: function() { return this.firstName + ' ' + this.lastName; } }, watch: { firstName: function(newVal, oldVal) { console.log('FirstName changed from ' + oldVal + ' to ' + newVal); }, lastName: function(newVal, oldVal) { console.log('LastName changed from ' + oldVal + ' to ' + newVal); } } }); </script>
Vue Router 是 Vue.js 官方的路由管理器,用于实现单页面应用的导航和状态管理。
首先需要安装 Vue Router:
npm install vue-router
然后创建路由配置:
import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const Home = { template: '<div>Home</div>' }; const About = { template: '<div>About</div>' }; const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ]; const router = new VueRouter({ routes }); const app = new Vue({ el: '#app', router });
<div id="app"> <router-link to="/user/John">User John</router-link> <router-link to="/user/Doe">User Doe</router-link> <router-view></router-view> </div> <script> import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const User = { template: '<div>User {{ $route.params.name }}</div>' }; const routes = [ { path: '/user/:name', component: User } ]; const router = new VueRouter({ routes }); const app = new Vue({ el: '#app', router }); </script>
<div id="app"> <router-link :to="{ path: '/search', query: { q: 'Vue.js' }}">Search for Vue.js</router-link> <router-view></router-view> </div> <script> import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const Search = { template: '<div>Search for {{ $route.query.q }}</div>' }; const routes = [ { path: '/search', component: Search } ]; const router = new VueRouter({ routes }); const app = new Vue({ el: '#app', router }); </script>
路由守卫用于在导航过程中执行一些逻辑,例如验证登录状态。
import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const Home = { template: '<div>Home</div>' }; const About = { template: '<div>About</div>' }; const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ]; const router = new VueRouter({ routes }); router.beforeEach((to, from, next) => { // 逻辑判断 console.log('beforeEach'); next(); }); router.beforeResolve((to, from, next) => { // 逻辑判断 console.log('beforeResolve'); next(); }); router.afterEach((to, from) => { // 逻辑判断 console.log('afterEach'); }); const app = new Vue({ el: '#app', router });
构建一个完整的 Vue.js 项目,包括创建项目结构、路由配置、组件开发等。
my-vue-app/ ├── public/ │ ├── index.html ├── src/ │ ├── main.js │ ├── App.vue │ ├── components/ │ ├── HelloWorld.vue │ ├── router/ │ ├── index.js ├── package.json └── vue.config.js
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue.js 示例</title> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2"></script> </head> <body> <div id="app"></div> </body> </html>
import Vue from 'vue'; import App from './App.vue'; new Vue({ render: h => h(App), }).$mount('#app');
<template> <div id="app"> <router-view></router-view> </div> </template> <script> export default { name: 'App' } </script> <style> </style>
<template> <div> <h1>Hello World</h1> </div> </template> <script> export default { name: 'HelloWorld' } </script> <style scoped> </style>
import Vue from 'vue'; import VueRouter from 'vue-router'; import HelloWorld from '../components/HelloWorld.vue'; Vue.use(VueRouter); const routes = [ { path: '/hello', component: HelloWorld }, ]; const router = new VueRouter({ routes, }); export default router;
import Vue from 'vue'; import App from './App.vue'; import router from './router'; new Vue({ router, render: h => h(App), }).$mount('#app');
将 Vue.js 项目部署到生产环境,需要进行一些基本的配置和优化。
使用 Vue CLI 进行项目构建:
npm run build
将生成的 dist
目录上传到服务器,例如使用 Nginx:
server { listen 80; server_name example.com; location / { root /path/to/dist; index index.html; try_files $uri $uri/ /index.html; } }
检查路由配置是否正确,确保路由文件已经正确引入。
import Vue from 'vue'; import VueRouter from 'vue-router'; import HelloWorld from '../components/HelloWorld.vue'; Vue.use(VueRouter); const routes = [ { path: '/hello', component: HelloWorld }, ]; const router = new VueRouter({ routes, }); export default router;
确保组件路径正确,且组件名称与引入时一致。
import HelloWorld from '../components/HelloWorld.vue';
优化静态资源,使用代码分割和懒加载,减少页面加载时间。
const Home = () => import('../views/Home.vue');