简单实现vue
Vue 的基本实现
创建一个简单的 Vue 应用需要引入 Vue 库，并编写基本的模板和数据绑定逻辑。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Vue App</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>数据绑定和方法
Vue 允许通过 v-model 实现双向数据绑定，并通过 methods 定义方法。
<div id="app">
<input v-model="message">
<button @click="reverseMessage">Reverse Message</button>
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
reverseMessage() {
this.message = this.message.split('').reverse().join('');
}
}
});
</script>条件渲染和列表渲染
使用 v-if 和 v-for 实现条件渲染和列表渲染。
<div id="app">
<p v-if="seen">Now you see me</p>
<ul>
<li v-for="item in items">{{ item.text }}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true,
items: [
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
});
</script>组件化开发
Vue 的组件化开发允许将功能模块拆分为独立的组件。
<div id="app">
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</div>
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
});
new Vue({
el: '#app',
data: {
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' }
]
}
});
</script>生命周期钩子
Vue 提供生命周期钩子，可以在组件不同阶段执行逻辑。
<div id="app">
{{ message }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
created() {
console.log('Component is created');
},
mounted() {
console.log('Component is mounted to DOM');
}
});
</script>以上示例展示了 Vue 的基本用法，包括数据绑定、方法调用、条件渲染、列表渲染、组件化和生命周期钩子。
