引言
在Web开发领域,Vue.js以其简洁明快的设计哲学、高效的响应式系统和丰富的生态系统赢得了众多开发者的心。本文将分享我在学习Vue.js过程中的心得体会与关键知识点总结,希望对正在或即将踏上Vue.js学习之旅的你有所裨益。vue.js是一款渐进式JavaScript框架,专注于视图层。它易学易用,采用组件化开发模式,通过MVVM(Model-View-ViewModel)设计模式使得数据和视图能够实时同步,极大地提升了开发效率。
目录
1.基础语法:Vue的核心是模板语法,包括插值表达式{{ }}、指令如v-bind/v-on(简写为: 和@)、v-if/v-else/v-show条件渲染以及v-for循环等
一:基础知识掌握
1.基础语法:Vue的核心是模板语法,包括插值表达式{{ }}、指令如v-bind/v-on(简写为: 和@)、v-if/v-else/v-show条件渲染以及v-for循环等
插值表达式:
<!-- 插值表达式 -->
<p>欢迎 {{ username }}!</p>
v-bind指令:
<!-- v-bind指令(简写为:) -->
<img :src="userAvatar" alt="用户头像">
v-on指令(简写为@):
<!-- v-on指令(简写为@) -->
<button @click="handleClick">点击我</button>
v-if/v-else条件渲染:
<!-- v-if/v-else条件渲染 -->
<div v-if="isLoggedIn">
<p>已登录用户界面</p>
</div>
<div v-else>
<p>未登录用户界面</p>
</div>
v-show显示:
<!-- v-show条件显示 -->
<p v-show="isHiddenMessage">这是一个隐藏消息,条件满足时可见</p>
v-for循环:
<!-- v-for循环 -->
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item.name }}
</li>
</ul>
2.数据绑定与双向绑定实例:
Vue的数据双向绑定机制基于依赖追踪和发布订阅模式,实现了数据变化驱动视图更新,反之亦然。
如下图:
3.组件化开发实例:
Vue应用主要由各种组件构成,每个组件拥有独立的作用域和生命周期方法,通过props向下传递数据,使用自定义事件进行组件间通信
如下列示例代码
父组件:
<template>
<div>
<child-component :parent-msg="parentMessage" @custom-event="handleCustomEvent"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: '来自父组件的消息'
};
},
methods: {
handleCustomEvent(receivedMsg) {
console.log('父组件收到子组件发出的事件:', receivedMsg);
}
}
};
</script>
子组件:
<template>
<div>
<p>从父组件接收的消息是:{{ parentMsg }}</p>
<button @click="emitCustomEvent">向父组件发送事件</button>
</div>
</template>
<script>
export default {
props: {
parentMsg: String
},
methods: {
emitCustomEvent() {
this.$emit('custom-event', '这是子组件传递给父组件的数据');
}
}
};
</script>
在以上组件化开发示例中,父组件通过props向下传递parentMessage
到子组件,并监听子组件触发的自定义事件custom-event
;而子组件则通过props接收并展示数据,并在按钮点击时向上抛出事件
二: 路由管理 - Vue Router
Vue Router为Vue应用提供了强大的路由功能,支持嵌套路由、动态路由匹配、路由守卫等功能,使单页应用(SPA)的页面切换更为流畅和灵活。
首先,要使用路由,得先在项目中下载路由的插件,常见的命令行如下:
npm install vue-router
然后创建router.js
文件来配置路由:
// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
Vue.use(VueRouter);
const routes = [
{ path: '/', component: Home, alias: '/home' },
{ path: '/about', component: About },
];
export default new VueRouter({
mode: 'history',
routes,
});
在主应用入口文件中引入并挂载路由:
// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
new Vue({
router,
render: h => h(App),
}).$mount('#app');
创建对应的组件文件,例如Home.vue和About.vue:
<!-- components/Home.vue -->
<template>
<div class="home">
<h1>首页</h1>
<p>欢迎来到首页!</p>
</div>
</template>
<script>
export default {
name: 'Home'
};
</script>
<!-- components/About.vue -->
<template>
<div class="about">
<h1>About</h1>
<p>This is About Page</p>
</div>
</template>
<script>
export default {
name: 'About'
};
</script>
最后,在App.vue或者其他需要进行导航的地方使用 <router-link>
和 <router-view>
组件:
<!-- App.vue -->
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view></router-view>
</div>
</template>
如下图:
&
三:常见的vue指令:
npm常用命令行:
npm install:安装项目所需要的全部依赖包,需要配置package.json文件。
npm uninstall:卸载指定名称的包。
npm install 包名:安装指定名称的包。
npm update:更新指定名称的包。
npm run serve:项目启动。
npm run build:项目构建。
npm config get registry :查看当前npm下载包使用的是哪一个源。
cmd命令行输入指令安装淘宝镜像:
npm install -g cnpm --registry=https://registry.npm.taobao.org