Vue 学习日记1
1. 什么是 Vue.js?
- 一个用于构建用户界面的渐进式框架
- 轻量、简单、灵活,易学易用
- 核心思想:数据驱动 + 组件化开发
2. 安装 Vue
通过 CDN 引入:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
可以直接在网页中使用。
通过 npm 安装:
npm install vue@next
适用于在 Node.js 环境中开发。
3. Vue 实例
HTML:
<div id="app">{{ message }}</div>
JavaScript:
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue!'
}
}
})
app.mount('#app')
Vue.createApp
创建一个 Vue 应用实例data
返回一个对象,包含应用的数据app.mount
挂载 Vue 实例到指定的 DOM 元素上
4. 模板语法
- 插值语法:
{{ }}
用于输出数据 - 指令:以
v-
开头,用于绑定数据和事件- 示例:
<p v-if="isVisible">这是一个条件渲染的段落</p> <button v-on:click="handleClick">点击我</button>
- 示例:
5. 计算属性和侦听器
计算属性:
- 用于基于已有数据计算新的值,具有缓存功能。
- 示例:
const app = Vue.createApp({ data() { return { firstName: '张', lastName: '三' } }, computed: { fullName() { return `${this.firstName} ${this.lastName}`; } } });
侦听器:
- 用于监听数据的变化并执行特定逻辑。
- 示例:
const app = Vue.createApp({ data() { return { count: 0 } }, watch: { count(newVal, oldVal) { console.log(`count 从 ${oldVal} 变为 ${newVal}`); } } });
6. 事件处理
-
使用
v-on
或简写@
绑定事件。 -
示例:
<button @click="increment">增加</button>
const app = Vue.createApp({ data() { return { count: 0 } }, methods: { increment() { this.count++; } } });
7. 条件渲染和列表渲染
条件渲染:
- 使用
v-if
、v-else-if
和v-else
。 - 示例:
<p v-if="isLoggedIn">欢迎回来!</p> <p v-else>请登录。</p>
列表渲染:
- 使用
v-for
渲染数组或对象。 - 示例:
<ul> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul>
8. 组件化开发
-
组件是 Vue 的核心概念,用于封装可复用的 UI 片段。
-
示例:
app.component('my-component', { template: `<p>这是一个自定义组件</p>` });
<my-component></my-component>
9. Vue 生命周期钩子
- Vue 实例在不同阶段会触发特定的生命周期钩子。
- 常用钩子:
created
:实例创建完成后调用。mounted
:实例挂载到 DOM 后调用。updated
:数据更新后调用。destroyed
:实例销毁后调用。
- 示例:
const app = Vue.createApp({ data() { return { message: 'Hello Vue!' } }, created() { console.log('实例已创建'); }, mounted() { console.log('实例已挂载'); } });
10. Vue Router 和 Vuex
Vue Router:
- 用于实现单页面应用的路由功能。
- 示例:
const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ]; const router = VueRouter.createRouter({ history: VueRouter.createWebHistory(), routes }); const app = Vue.createApp({}); app.use(router); app.mount('#app');
Vuex:
- 用于管理全局状态。
- 示例:
const store = Vuex.createStore({ state() { return { count: 0 } }, mutations: { increment(state) { state.count++; } } }); const app = Vue.createApp({}); app.use(store); app.mount('#app');
11. 总结
Vue.js可以快速构建现代化的前端应用。它的渐进式设计使得我们可以从简单的项目开始,逐步引入更复杂的功能,如组件化开发、路由和状态管理。未来大概会学 Vue 的响应式原理、性能优化以及工具集成之类的吧。