摄影网站建设方案东莞推广公司
使用Vue重新构建应用程序
- 首先我们通过CDN的方式来引入Vue.js
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script src="app.js"></script>
- 首先我们需要创建一个Vue实例
Vue.createApp({// 这里是Vue应用的配置对象
}).mount('#app');
这里的mount,是需要将这个实例挂在到HTML中的哪个DOM中
Vue.create({data() {return {goals: [],enteredValue: ''};}
});这个data里面是响应式数据，这个响应式数据返回两个东西，一个是存储输入的数据列表，一个是用户的输入文本
Vue.createApp({data() {return {goals: [],enteredValue: ''};},methods: {addGoal() {this.goals.push(this.enteredValue);this.enteredValue = '';}}
}).mount('#app');
method里面是一些方法的定义，这个方法主要是讲用户的输入的值推送到数组中，然后再将用户的输入的内容清空；
- 不仅仅如下，HTML也需要加上特定的标签
<div id="app"><div><label for="goal">Goal</label><input type="text" id="goal" v-model="enteredValue" /><button v-on:click="addGoal">Add Goal</button></div><ul><li v-for="goal in goals">{{ goal }}</li></ul></div>v-model="enteredValue"
这个是一个双向数据绑定的标签，目的是将输入框里面的输入内容于Vue数据的这个enteredValue进行一个绑定；这样用户再输入框输入内容的时候，这个变量就会自动更新，相反，当变量更新，输入框也会更新
v-on:click="addGoal"
这个标签是用于事件监听的标签，为了监听按钮的监听事件，当按钮被按下的时候，就调用这个addGoal这个方法，这个也可以简写成@click=“addGoal”
v-for="goal in goals"
这个标签是用于循环渲染，这个是为了遍历goals数组中的每一个元素，这样每个元素都会创建一个li的元素
{{ goal }}
这个是Vue中的插值表达式，这里通过上面的渲染，就可以显示所有的在数组中的内容了
- 这样一对比，Vue的优势就出来了
Vue的核心优势在于：
- 提高开发效率：减少重复代码，专注业务逻辑
- 降低维护成本：组件化和响应式系统使代码更易维护
- 更好的用户体验：内置优化机制提升应用性能
- 团队协作友好：统一的开发模式和丰富的工具链