首页手记 Vue3教程：新手入门与基础实践

Vue3教程：新手入门与基础实践

标签：

前端工具 Vue.js

概述

本文详细介绍了Vue.js的最新版本Vue3，涵盖环境搭建、主要特性、组件使用、数据绑定、路由与状态管理等各个方面。通过多个实例和步骤，帮助开发者快速上手并深入理解Vue3的核心概念和实践技巧。此外，还提供了详细的项目部署和代码优化建议，助力提升开发效率和应用性能。

Vue3简介与环境搭建

Vue.js 是一款轻量级的前端JavaScript框架，特点在于易于学习、灵活使用且具有高性能和可靠性。Vue3是Vue.js的最新版本，带来了许多新特性与优化，使其在开发大型应用时更加高效便捷。

Vue3的主要特性

Composition API: 提供了一种新的API来组合逻辑，使得组件的逻辑更加清晰。
Reactivity Updates: 重新设计了响应式系统，提高了性能，特别是在复杂数据结构上的性能。
Faster Rendering: Vue3的渲染速度相比Vue2有了明显的提高。
Tree Shaking: 使得未使用的代码可以被模块打包工具移除，减小最终的打包体积。
Teleport: 允许你将DOM元素渲染到另一个元素的位置。
Fragments: 允许返回多个根元素。
Custom Renderer: 提供了自定义渲染器的API，可以用于开发特定领域或跨平台的框架。

创建第一个Vue3项目

确保你已经安装了Node.js和npm。然后，使用Vue CLI（Vue命令行工具）来创建一个新的Vue3项目。以下是创建步骤：

安装Vue CLI:
```
npm install -g @vue/cli
```
创建新的Vue3项目:
```
vue create my-vue3-app
```
在创建项目后，选择Vue 3.x版本。
启动项目:
```
cd my-vue3-app
npm run serve
```
这将启动开发服务器，你可以通过浏览器访问 http://localhost:8080 查看你的新项目。

必要的开发环境配置

Node.js: Vue CLI和Vue3都需要Node.js环境，确保Node.js和npm已经安装。
IDE/编辑器: 使用如VS Code这样的代码编辑器，可以提高开发效率。
Vue CLI: Vue CLI提供了简单的命令行工具，可以快速生成Vue项目。
Vue Devtools: 浏览器插件，有助于开发和调试Vue应用。

Vue3组件基础

在Vue3中，组件是构建应用的基本构建块。组件允许你将应用分解为更小、更易于管理的代码段。组件可以被多次复用，并且具有自己的逻辑和样式。

组件的基本概念

Vue3组件是具有可重用逻辑和UI的封装。每个组件包含三个主要部分：模板（template）、脚本（script）和样式（style）。模板用于定义组件的结构，脚本用于添加功能，样式用于定义组件的样式。

创建和使用组件

创建组件:

// 创建一个新的Vue组件
const MyComponent = {
 template: `<div>
               <h1>这是我的组件</h1>
             </div>`
}

注册组件:

// 在Vue实例中注册组件
new Vue({
 el: '#app',
 components: {
   MyComponent
 }
});

在模板中使用组件:

<!-- 在HTML模板中使用组件 -->
<div id="app">
 <my-component></my-component>
</div>

传递数据给组件（props）

props是Vue组件之间的通信机制，父组件可以向子组件传递数据。

定义props:

const MyComponent = {
 props: ['firstName', 'lastName'],
 template: `<div>
               <h1>{{ firstName }} {{ lastName }}</h1>
             </div>`
}

传递props数据:

<div id="app">
 <my-component firstName="John" lastName="Doe"></my-component>
</div>

从组件接收数据（emit）

emit 是用于触发自定义事件，使父组件能够监听子组件的动作。

在子组件中触发事件:

const MyComponent = {
 props: ['firstName', 'lastName'],
 template: `<div>
               <h1>{{ firstName }} {{ lastName }}</h1>
             </div>`,
 methods: {
   greet() {
     this.$emit('greet', 'Hello, world!')
   }
 }
}

在父组件中监听事件:

<div id="app">
 <my-component firstName="John" lastName="Doe" @greet="handleGreet"></my-component>
</div>
<script>
 new Vue({
   el: '#app',
   components: {
     MyComponent
   },
   methods: {
     handleGreet(greeting) {
       console.log(greeting);
     }
   }
 });
</script>

组件的生命周期钩子、计算属性和侦听器

生命周期钩子

const MyComponent = {
created() {
  console.log('组件已被创建');
},
mounted() {
  console.log('组件已挂载');
},
beforeDestroy() {
  console.log('组件即将被销毁');
}
}

计算属性

const MyComponent = {
data() {
  return {
    firstName: 'John',
    lastName: 'Doe'
  }
},
computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}
}

侦听器

const MyComponent = {
data() {
  return {
    msg: 'Hello'
  }
},
watch: {
  msg(newVal, oldVal) {
    console.log('msg changed from', oldVal, 'to', newVal);
  }
}
}

Vue3数据绑定与指令

数据绑定是Vue的核心特性，它允许你将DOM元素与Vue实例的数据动态地绑定在一起。Vue提供了多种指令来简化和增强DOM操作。

数据绑定的基础

Vue使用双向数据绑定来响应数据变化，从而自动更新DOM。常见的数据绑定包括v-bind（用于绑定DOM元素的属性）和v-model（用于表单元素双向绑定）。

使用v-bind:

<div id="app">
 <p>{{ message }}</p>
 <button v-bind:disabled="isDisabled">点击</button>
</div>
<script>
 new Vue({
   el: '#app',
   data: {
     message: 'Hello Vue!',
     isDisabled: false
   }
 });
</script>

使用v-model:

<div id="app">
 <input v-model="userInput">
 <p>{{ userInput }}</p>
</div>
<script>
 new Vue({
   el: '#app',
   data: {
     userInput: ''
   }
 });
</script>

常用的v-bind与v-on指令

v-bind: 用于动态绑定HTML元素属性。
v-on: 用于监听DOM事件。

使用v-bind:

<div id="app">
 <img v-bind:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="imageSrc">
</div>
<script>
 new Vue({
   el: '#app',
   data: {
     imageSrc: 'https://example.com/image.png'
   }
 });
</script>

使用v-on:

<div id="app">
 <button v-on:click="increment">点击</button>
 <p>{{ count }}</p>
</div>
<script>
 new Vue({
   el: '#app',
   data: {
     count: 0
   },
   methods: {
     increment() {
       this.count++;
     }
   }
 });
</script>

其他常用指令和自定义指令的使用

v-once: 用于缓存节点，避免不必要的DOM更新。
```
<div v-once>{{ message }}</div>
```
v-show: 用于基于条件显示或隐藏元素。
```
<div v-show="isLoggedIn">欢迎回来!</div>
```
v-cloak: 用于防止未编译的模板出现。
```
<div v-cloak>{{ message }}</div>
```

自定义指令:

<div id="app">
<div v-my-directive="someValue"></div>
</div>
<script>
new Vue({
  el: '#app',
  directives: {
    'my-directive': {
      bind(el, binding, vnode) {
        el.textContent = binding.value;
      }
    }
  }
});
</script>

条件渲染与列表渲染

Vue提供了v-if、v-else、v-for等指令来处理条件渲染和列表渲染。

条件渲染:

<div id="app">
 <p v-if="isLoggedIn">欢迎回来!</p>
 <p v-else>请登录。</p>
</div>
<script>
 new Vue({
   el: '#app',
   data: {
     isLoggedIn: true
   }
 });
</script>

列表渲染:

<div id="app">
 <ul>
   <li v-for="item in items">{{ item }}</li>
 </ul>
</div>
<script>
 new Vue({
   el: '#app',
   data: {
     items: ['A', 'B', 'C']
   }
 });
</script>

Vue3路由与状态管理

在大型应用中，路由管理和状态管理是非常重要的。Vue Router提供了完善的路由功能，而Vuex则提供了一套集中式状态管理的解决方案。

Vue Router的安装与配置

安装Vue Router:
```
npm install vue-router@4
```

创建路由配置:

const Home = { template: '<div>Home page</div>' };
const About = { template: '<div>About page</div>' };
const router = new VueRouter({
 routes: [
   { path: '/', component: Home },
   { path: '/about', component: About }
 ]
});

使用路由:

<div id="app">
 <router-link to="/">Home</router-link>
 <router-link to="/about">About</router-link>
 <router-view></router-view>
</div>
<script>
 new Vue({
   el: '#app',
   router,
 });
</script>

路由的基本使用

动态路由:

const router = new VueRouter({
routes: [
  { path: '/user/:id', component: User }
]
});

重定向:

const router = new VueRouter({
routes: [
  { path: '/redirect', redirect: '/home' }
]
});

导航守卫

const router = new VueRouter({
routes: [
  { path: '/about', component: About }
]
});

router.beforeEach((to, from, next) => {
console.log(`从 ${from.path} 跳转到 ${to.path}`);
next();
});

Vuex的安装与配置

安装Vuex:
```
npm install vuex@4
```

创建Vuex Store:

import { createStore } from 'vuex';

const store = createStore({
 state: {
   count: 0
 },
 mutations: {
   increment(state) {
     state.count++;
   }
 }
});

使用Vuex Store:

<div id="app">
 <button @click="increment">Increment</button>
 <p>{{ count }}</p>
</div>
<script>
 new Vue({
   el: '#app',
   store,
   computed: {
     count() {
       return this.$store.state.count;
     }
   },
   methods: {
     increment() {
       this.$store.commit('increment');
     }
   }
 });
</script>

Vuex状态管理机制

Vuex提供了一套状态管理和共享的方法，使得状态在应用的不同部分之间可以被协调管理。

State:

const store = createStore({
 state: {
   count: 0
 }
});

Mutations:

const store = createStore({
 state: {
   count: 0
 },
 mutations: {
   increment(state) {
     state.count++;
   }
 }
});

Actions:

const store = createStore({
 state: {
   count: 0
 },
 mutations: {
   increment(state) {
     state.count++;
   }
 },
 actions: {
   increment({ commit }) {
     commit('increment');
   }
 }
});

Getters:

const store = createStore({
 state: {
   count: 0
 },
 mutations: {
   increment(state) {
     state.count++;
   }
 },
 getters: {
   count: state => {
     return state.count;
   }
 }
});

模块化

const moduleA = {
 state: {
   count: 0
 },
 mutations: {
   increment(state) {
     state.count++;
   }
 }
};

const store = createStore({
 modules: {
   a: moduleA
 }
});

Vue3实战案例

通过构建一个简单的CRUD应用，可以更好地理解和实践Vue3的各项特性。以下是构建和部署CRUD应用的步骤。

使用Vue3构建简单的CRUD应用

创建项目结构:
```
vue create my-vue3-crud-app
```
安装必要的依赖:
```
npm install axios
```

添加路由:

import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import List from './components/List.vue';
import Create from './components/Create.vue';
import Edit from './components/Edit.vue';

Vue.use(Router);

const router = new Router({
 routes: [
   { path: '/', component: Home },
   { path: '/list', component: List },
   { path: '/create', component: Create },
   { path: '/edit/:id', component: Edit }
 ]
});

export default router;

构建CRUD操作:

Home.vue:

<template>
<div>
 <h1>CRUD应用</h1>
 <router-link to="/list">显示列表</router-link>
 <router-link to="/create">创建条目</router-link>
</div>
</template>

List.vue:

<template>
<div>
 <h1>列表</h1>
 <ul>
   <li v-for="item in items" :key="item.id">
     {{ item.name }} - {{ item.id }}
     <router-link :to="'/edit/' + item.id">编辑</router-link>
     <button @click="deleteItem(item)">删除</button>
   </li>
 </ul>
 <router-link to="/create">创建新条目</router-link>
</div>
</template>
<script>
import axios from 'axios';

export default {
data() {
 return {
   items: []
 };
},
mounted() {
 this.getItems();
},
methods: {
 getItems() {
   axios.get('/api/items')
     .then(response => {
       this.items = response.data;
     });
 },
 deleteItem(item) {
   axios.delete('/api/items/' + item.id)
     .then(() => this.getItems());
 }
}
};
</script>

Create.vue:

<template>
<div>
 <h1>创建条目</h1>
 <form @submit.prevent="createItem">
   <input v-model="name" placeholder="名称">
   <button type="submit">创建</button>
 </form>
</div>
</template>
<script>
import axios from 'axios';

export default {
data() {
 return {
   name: ''
 };
},
methods: {
 createItem() {
   axios.post('/api/items', { name: this.name })
     .then(() => this.$router.push('/list'));
 }
}
};
</script>

Edit.vue:

<template>
<div>
 <h1>编辑条目</h1>
 <form @submit.prevent="updateItem">
   <input v-model="name" placeholder="名称">
   <button type="submit">保存</button>
 </form>
</div>
</template>
<script>
import axios from 'axios';

export default {
data() {
 return {
   id: this.$route.params.id,
   name: ''
 };
},
methods: {
 updateItem() {
   axios.put('/api/items/' + this.id, { name: this.name })
     .then(() => this.$router.push('/list'));
 }
},
mounted() {
 const id = this.$route.params.id;
 axios.get('/api/items/' + id)
   .then(response => {
     this.name = response.data.name;
   });
}
};
</script>

进行项目部署与上线

构建项目:
```
npm run build
```
部署到服务器:

将构建好的文件部署到服务器上。常见的部署方式包括使用静态文件服务器（如Nginx）或通过云服务商（如阿里云、腾讯云）提供的静态网站托管服务。

项目维护与代码优化

代码重构:

const store = createStore({
state: {
  count: 0
},
mutations: {
  increment(state) {
    state.count++;
  }
},
actions: {
  increment({ commit }) {
    commit('increment');
  }
},
getters: {
  count: state => {
    return state.count;
  }
}
});

性能优化:

使用v-once指令，减少不必要的DOM更新。
```
<div v-once>{{ message }}</div>
```

代码规范:

遵循ESLint等工具的代码规范，保持代码的一致性和可读性。

const store = createStore({
state: {
  count: 0
},
mutations: {
  increment(state) {
    state.count++;
  }
},
actions: {
  increment({ commit }) {
    commit('increment');
  }
},
getters: {
  count: state => {
    return state.count;
  }
}
});

异步操作:

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      axios.get('/api/data')
        .then(response => {
          commit('increment');
        });
    }
  },
  getters: {
    count: state => {
      return state.count;
    }
  }
});

以上是对Vue3的详细介绍和实战案例，希望帮助你更好地理解和应用Vue3。更多学习资料可以参考Muoj网。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

精慕HU

手记
篇

粉丝

24

获赞与收藏

115

关注作者，订阅最新文章

相关文章推荐

一文零基础教你学会 Docker 入门到实践

vue3 深入浅出（连载三）手摸手实现 vue3

【java入门】新手专属学习路线

【笔记】MindManager 2018新手入门教程

最新 Webpack4 从零入门教程（共 18 章）

阅读免费教程

后端通用面试教程

41个小节 30273 342

网络编程入门教程

20个小节 12461 235

Pandas 入门教程

25个小节 18362 330

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空