实现简单vue
实现简单的 Vue 应用
创建一个简单的 Vue 应用需要引入 Vue 库并编写基本的模板与逻辑。以下是一个基础的实现步骤：
1. 引入 Vue 库
在 HTML 文件中通过 CDN 引入 Vue，或者通过 npm 安装 Vue 后导入：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>2. 创建 Vue 应用
通过 Vue.createApp() 初始化应用，并定义数据与方法：
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue!'
};
},
methods: {
reverseMessage() {
this.message = this.message.split('').reverse().join('');
}
}
});3. 挂载到 DOM
将应用挂载到 HTML 中的一个元素上：
app.mount('#app');4. 编写模板
在 HTML 中编写模板，使用 Vue 的指令（如 v-model、v-on）绑定数据与事件：
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>核心功能示例
数据绑定
使用 {{ }} 插值或 v-bind 动态绑定属性：
<p>{{ message }}</p>
<a v-bind:href="url">Link</a>事件处理
通过 v-on 监听事件：
<button v-on:click="handleClick">Click</button>双向绑定
使用 v-model 实现表单输入与数据的同步：
<input v-model="message" />完整代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Vue App</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse</button>
<input v-model="message" />
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue!'
};
},
methods: {
reverseMessage() {
this.message = this.message.split('').reverse().join('');
}
}
});
app.mount('#app');
</script>
</body>
</html>进阶扩展
组件化
将功能拆分为组件，提升复用性：
app.component('my-component', {
template: '<div>A custom component!</div>'
});生命周期钩子
在特定阶段执行逻辑，如 mounted：
mounted() {
console.log('Component mounted');
}通过以上步骤，可以快速搭建一个基础的 Vue 应用，并根据需求扩展功能。
