使用Vue重新构建应用程序

使用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的核心优势在于：

• 提高开发效率：减少重复代码，专注业务逻辑
• 降低维护成本：组件化和响应式系统使代码更易维护
• 更好的用户体验：内置优化机制提升应用性能
• 团队协作友好：统一的开发模式和丰富的工具链