vue简单实现
Vue 简单实现
Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。以下是实现一个简单 Vue 应用的步骤。
安装 Vue
通过 CDN 引入 Vue：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>或使用 npm：
npm install vue创建 Vue 实例
在 HTML 中创建一个容器：
<div id="app">
{{ message }}
</div>在 JavaScript 中创建 Vue 实例：
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})数据绑定
Vue 使用双大括号语法进行文本插值：
<div id="app">
<p>{{ message }}</p>
</div>数据更新会自动反映在 DOM 中。
指令
Vue 提供了一些指令，如 v-bind 和 v-on：
<div id="app">
<p v-bind:title="message">Hover me</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>在 Vue 实例中定义方法：
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}条件渲染
使用 v-if 进行条件渲染：
<div id="app">
<p v-if="seen">Now you see me</p>
</div>在 Vue 实例中定义 seen：
data: {
seen: true
}列表渲染
使用 v-for 渲染列表：
<div id="app">
<ul>
<li v-for="item in items">{{ item.text }}</li>
</ul>
</div>在 Vue 实例中定义 items：
data: {
items: [
{ text: 'Learn Vue' },
{ text: 'Build something' }
]
}表单输入绑定
使用 v-model 实现双向绑定：
<div id="app">
<input v-model="message">
<p>{{ message }}</p>
</div>组件化
定义一个组件：
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})在模板中使用组件：
<div id="app">
<ul>
<todo-item v-for="item in items" v-bind:todo="item"></todo-item>
</ul>
</div>生命周期钩子
Vue 实例有生命周期钩子，如 created：
new Vue({
data: {
message: 'Hello Vue!'
},
created: function () {
console.log('Instance created')
}
})以上步骤展示了 Vue 的基本用法，包括数据绑定、指令、条件渲染、列表渲染、表单绑定、组件化和生命周期钩子。
