vue的增量式学习-篇章2

最新推荐文章于 2024-05-06 14:16:34 发布
最新推荐文章于 2024-05-06 14:16:34 发布
阅读量1.2k 收藏 27
点赞数 36
文章标签： vue.js 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lixiemang8887/article/details/135323947
版权

vue的增量式学习-篇章2，又名：写毕设到企业级前端（第5天）

  • 各个学习vue部分的介绍
    • 创建一个应用
    • 模板语法
    • 响应式基础
    • 计算属性
    • 类与样式绑定
  • 更为复杂的例子学习
    • 模板语法
    • 响应式基础
    • 计算属性
    • 类与样式绑定
    • 列表渲染
    • 事件处理
    • 表单输入绑定
    • 生命周期
    • 侦听器
    • 模板引用
    • 组件基础
    • 复杂例子学习
    • optionAPI

学习各个vue部分的介绍

  1. 创建一个应用：

    • 概念：创建一个Vue应用是指使用Vue.js框架来构建交互式的Web应用程序。Vue提供了一种组织和管理UI组件的方式，使开发者能够轻松构建用户界面。

    • 应用场景：创建一个应用适用于任何需要构建交互性前端界面的项目，包括网站、Web应用、管理面板等。

    • 用例代码：

      <div id="app">
  {{ message }}
</div>


      var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})

  2. 模板语法：

    • 概念：模板语法是Vue.js中用于声明渲染的一种方式，它允许开发者通过简单的HTML模板来描述应用的界面结构和数据绑定。

    • 应用场景：模板语法适用于定义Vue组件的模板部分，用于呈现数据和用户界面。

    • 用例代码：

      <div id="app">
  <p>{{ message }}</p>
</div>


      var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})

  3. 响应式基础：

    • 概念：响应式基础是Vue.js的核心特性之一，它指的是当数据发生变化时，Vue会自动更新视图以反映这些变化。这是通过Vue的数据绑定机制实现的。

    • 应用场景：响应式基础适用于任何需要将数据与界面同步的情况，确保界面随数据的变化而更新。

    • 用例代码：

      var app = new Vue({
  data: {
    message: 'Hello, Vue!'
  },
  methods: {
    changeMessage: function () {
      this.message = 'Updated message'
    }
  }
})

  4. 计算属性：

    • 概念：计算属性是Vue中一种声明式的属性，用于定义基于已有数据计算而来的属性，它们会根据依赖的数据自动更新。

    • 应用场景：计算属性适用于需要派生或转换数据的情况，例如将多个数据属性合并为一个新属性或对数据进行筛选和排序等。

    • 用例代码：

      <div id="app">
  <p>Original Message: {{ message }}</p>
  <p>Computed Message: {{ computedMessage }}</p>
</div>


      var app = new Vue({
  data: {
    message: 'Hello, Vue!'
  },
  computed: {
    computedMessage: function () {
      return this.message.toUpperCase()
    }
  }
})

  5. 类与样式绑定：

    • 概念：类与样式绑定是Vue中的一种方式，用于动态添加或移除HTML元素的类名和样式。它可以根据条件、状态或用户交互来改变元素的外观。

    • 应用场景：类与样式绑定适用于需要根据数据的变化来修改元素的类名或样式的情况，例如根据数据状态切换按钮的样式。

    • 用例代码：

      <div id="app">
  <p :class="{ active: isActive }">Active Status</p>
</div>


      var app = new Vue({
  data: {
    isActive: true
  }
})

更为复杂的例子学习：

模板语法：

示例 1：条件渲染与计算属性

<template>
  <div>
    <p v-if="isVisible && isUserLoggedIn">欢迎访问！</p>
    <p v-else>请登录以查看内容。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  computed: {
    isUserLoggedIn() {
      // 在真实应用中，此处通常检查用户是否已登录
      return true;
    }
  }
};
</script>

响应式基础：

示例 1：深度响应式数据

<template>
  <div>
    <p>{{ deepData.user.name }}</p>
    <button @click="changeUserName">修改用户名</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      deepData: {
        user: {
          name: "John"
        }
      }
    };
  },
  methods: {
    changeUserName() {
      this.deepData.user.name = "Jane";
    }
  }
};
</script>

计算属性：

示例 1：复杂的计算属性

<template>
  <div>
    <p>商品总价：{{ totalPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cart: [
        { name: "商品1", price: 20 },
        { name: "商品2", price: 30 },
        { name: "商品3", price: 15 }
      ]
    };
  },
  computed: {
    totalPrice() {
      return this.cart.reduce((total, item) => total + item.price, 0);
    }
  }
};
</script>

类与样式绑定：

示例 1：动态类绑定与条件样式

<template>
  <div :class="classObject">样式绑定</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      isError: false
    };
  },
  computed: {
    classObject() {
      return {
        active: this.isActive,
        error: this.isError
      };
    }
  }
};
</script>

列表渲染：

  • 概念：列表渲染是一种Vue的特性，它允许你根据数据动态地生成列表元素或表格。通常使用v-for指令来实现列表渲染。
  • 应用场景：列表渲染适用于显示动态数据列表，如商品列表、博客文章列表、用户列表等。
  • 代码用例：
<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  }
};
</script>

事件处理：

  • 概念：事件处理是Vue中的一种机制，用于响应用户交互，如点击、输入等操作。你可以使用v-on指令绑定事件处理函数。
  • 应用场景：事件处理适用于处理用户的交互行为，如按钮点击、表单提交、鼠标悬停等。
  • 代码用例：
<template>
  <button @click="handleButtonClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleButtonClick() {
      alert('按钮被点击了！');
    }
  }
};
</script>

表单输入绑定：

  • 概念：表单输入绑定是将用户输入的数据与Vue实例中的数据进行双向绑定。通过v-model指令，你可以轻松实现表单输入的双向数据绑定。
  • 应用场景：表单输入绑定适用于处理用户输入的表单数据，如文本框、复选框、单选框、下拉框等。
  • 代码用例：
<template>
  <input v-model="message" />
  <p>输入内容: {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

生命周期：

  • 概念：生命周期是Vue组件的不同阶段，它包括创建、挂载、更新和销毁等阶段。Vue组件具有一系列的生命周期钩子函数，允许你在不同阶段执行自定义逻辑。
  • 应用场景：生命周期钩子函数用于处理组件在不同阶段的行为，如在组件创建时初始化数据、在更新时执行某些操作等。
  • 代码用例：
<script>
export default {
  created() {
    console.log('组件创建');
  },
  mounted() {
    console.log('组件挂载');
  },
  updated() {
    console.log('组件更新');
  },
  beforeDestroy() {
    console.log('组件销毁前');
  },
  destroyed() {
    console.log('组件销毁');
  }
};
</script>

侦听器：

  • 概念：侦听器是一种Vue特性，允许你监听数据的变化并执行相应的操作。你可以使用watch属性或侦听器函数来创建侦听器。
  • 应用场景：侦听器用于在数据变化时执行自定义操作，如异步请求、计算属性等。
  • 代码用例：
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  watch: {
    message(newVal, oldVal) {
      console.log('数据变化了：', newVal);
    }
  }
};
</script

>

模板引用：

  • 概念：模板引用是一种在Vue中引用其他组件或模板的方式。通过<template>标签和<slot>标签，你可以在一个组件中引用另一个组件的模板。
  • 应用场景：模板引用用于将组件拆分为可复用的部分，并在不同组件中进行引用。
  • 代码用例：
<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  }
};
</script>

组件基础：

  • 概念：组件是Vue的核心概念，它允许你将界面拆分为独立的、可复用的组件。每个组件都有自己的模板、数据、方法和生命周期。
  • 应用场景：组件用于构建复杂的用户界面，使代码更加模块化和可维护。
  • 代码用例：
<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  }
};
</script>

复杂例子学习：

optionAPI

概念：

  1. 组件化：将应用拆分为多个组件，如任务列表、任务表单、任务项等，以提高可维护性。
  2. 状态管理：使用Vue的响应式数据管理任务列表和任务状态。
  3. 列表渲染：通过v-for指令渲染任务列表。
  4. 事件处理：处理任务的创建、编辑、删除等操作。
  5. 计算属性：计算未完成任务的数量。
  6. 类与样式绑定：根据任务状态动态绑定样式。
  7. 表单输入绑定：双向绑定任务表单。
  8. 生命周期：在创建和销毁组件时执行相应的操作。
  9. 侦听器：侦听任务列表的变化，更新本地存储。
  10. 模板引用：引用子组件以展示任务列表和任务表单。

应用场景：

这个任务管理应用适用于个人或团队，用于记录和管理待办任务。

代码用例：

<template>
  <div>
    <h1>任务管理应用</h1>

    <!-- 任务表单组件 -->
    <task-form @addTask="addTask" />

    <!-- 任务列表组件 -->
    <task-list
      :tasks="tasks"
      @editTask="editTask"
      @deleteTask="deleteTask"
    />

    <!-- 统计未完成任务数量 -->
    <p>未完成任务: {{ unfinishedTasks }}</p>
  </div>
</template>

<script>
import TaskForm from './TaskForm.vue';
import TaskList from './TaskList.vue';

export default {
  data() {
    return {
      tasks: [],
    };
  },
  computed: {
    unfinishedTasks() {
      return this.tasks.filter(task => !task.completed).length;
    },
  },
  methods: {
    addTask(task) {
      this.tasks.push(task);
    },
    editTask(updatedTask) {
      const index = this.tasks.findIndex(task => task.id === updatedTask.id);
      if (index !== -1) {
        this.tasks[index] = updatedTask;
      }
    },
    deleteTask(taskId) {
      this.tasks = this.tasks.filter(task => task.id !== taskId);
    },
  },
  created() {
    // 从本地存储加载任务列表
    const savedTasks = JSON.parse(localStorage.getItem('tasks')) || [];
    this.tasks = savedTasks;
  },
  watch: {
    tasks: {
      deep: true,
      handler(newTasks) {
        // 保存任务列表到本地存储
        localStorage.setItem('tasks', JSON.stringify(newTasks));
      },
    },
  },
  components: {
    TaskForm,
    TaskList,
  },
};
</script>

这个案例中，我们使用了多个Vue组件，包括任务表单组件（TaskForm）和任务列表组件（TaskList）。应用的核心是在父组件中管理任务列表数据，并通过事件和属性传递给子组件。任务数据也会保存在本地存储中，以便在刷新页面后保持任务的持久性。这个案例涵盖了Vue.js的许多基本概念和功能，是一个综合性的示例。

当使用Composition API：

<template>
  <div>
    <h1>任务管理应用</h1>

    <!-- 任务表单组件 -->
    <TaskForm @addTask="addTask" />

    <!-- 任务列表组件 -->
    <TaskList
      :tasks="tasks"
      @editTask="editTask"
      @deleteTask="deleteTask"
    />

    <!-- 统计未完成任务数量 -->
    <p>未完成任务: {{ unfinishedTasks }}</p>
  </div>
</template>

<script>
import { ref, computed, onMounted, watch } from 'vue';
import TaskForm from './TaskForm.vue';
import TaskList from './TaskList.vue';

export default {
  setup() {
    const tasks = ref([]);

    // 计算未完成任务数量
    const unfinishedTasks = computed(() => {
      return tasks.value.filter(task => !task.completed).length;
    });

    // 添加任务
    const addTask = (task) => {
      tasks.value.push(task);
    };

    // 编辑任务
    const editTask = (updatedTask) => {
      const index = tasks.value.findIndex(task => task.id === updatedTask.id);
      if (index !== -1) {
        tasks.value[index] = updatedTask;
      }
    };

    // 删除任务
    const deleteTask = (taskId) => {
      tasks.value = tasks.value.filter(task => task.id !== taskId);
    };

    // 从本地存储加载任务列表
    const loadTasksFromLocalStorage = () => {
      const savedTasks = JSON.parse(localStorage.getItem('tasks')) || [];
      tasks.value = savedTasks;
    };

    // 保存任务列表到本地存储
    watch(tasks, (newTasks) => {
      localStorage.setItem('tasks', JSON.stringify(newTasks));
    }, { deep: true });

    // 初始化加载任务列表
    onMounted(() => {
      loadTasksFromLocalStorage();
    });

    return {
      tasks,
      unfinishedTasks,
      addTask,
      editTask,
      deleteTask,
    };
  },
  components: {
    TaskForm,
    TaskList,
  },
};
</script>

这个示例使用Composition API来组织Vue 3的代码。与之前的示例相比，它在setup函数中定义了响应式数据、计算属性、方法，并使用onMounted来初始化加载任务列表。此示例仍然是一个任务管理应用，但更好地展示了Composition API的使用方式。

下面是一个简单的 TaskForm.vue 组件和 TaskList.vue 组件的代码示例：

TaskForm.vue：

<template>
  <div>
    <input v-model="newTask" placeholder="Add a new task" @keyup.enter="addTask" />
    <button @click="addTask">Add</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTask: '',
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim() === '') return;
      this.$emit('addTask', this.newTask);
      this.newTask = '';
    },
  },
};
</script>

TaskList.vue：

<template>
  <ul>
    <li v-for="(task, index) in tasks" :key="index">
      {{ task }}
      <button @click="removeTask(index)">Remove</button>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    tasks: Array,
  },
  methods: {
    removeTask(index) {
      this.$emit('removeTask', index);
    },
  },
};
</script>

这是一个非常简单的示例，用于添加和删除任务。TaskForm.vue 组件负责添加任务，而 TaskList.vue 组件负责显示任务列表和删除任务。在实际应用中，您可以根据需要扩展和定制这些组件。

Wade_Crab
关注
  • 36
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue.js渐进式框架-其他
06-11
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和Vue...
vue的增量式学习-篇章3
lixiemang8887的博客
01-04 1726
vue的增量式学习-篇章3，又名：写毕设到企业级前端（第6天）Props：概念：Props 是从父组件传递数据到子组件的一种机制，用于实现组件之间的通信。父组件可以将数据传递给子组件，并在子组件中使用这些数据。应用场景：使用 Props 来将数据从父组件传递给子组件，以便在子组件中显示、处理或修改这些数据。示例代码： 事件：概念：事件允许组件在特定的交互或状态变化时发出通知，以便其他组件能够响应并执行相应的操作。Vue 使用 或 来监听和处理事件。应用场景：使用事件来实现组件之间的通信，例如在
vue的增量式学习-篇章4
lixiemang8887的博客
01-05 1327
工具链，路由，状态管理， 响应式状态， vuex，测试， 服务端渲染。 最佳实践， 工业界的技术栈，框架等的分析
vue的增量式学习-篇章1
lixiemang8887的博客
01-02 939
vue的增量式学习-篇章1， 又名：写毕设到企业级前端（第4天）当使用Vue 2的Options API和Vue 3的Composition API来编写组件时，以下是相应的示例代码，以便更好地理解它们之间的差异。 上面的示例是一个Vue 2组件，使用了Options API来定义组件的数据（）、模板（）以及生命周期钩子（、、等）。生命周期钩子在组件的不同阶段执行相应的代码。 这是一个Vue 3组件，使用了Composition API来定义组件的逻辑。注意，没有了明确的生命周期钩子，而是使用、和等函数来处
vue 瀑布流插件 vue-waterfall-easy ； vue-waterfall； vue-waterfall2
xlsl
07-28 1889
vue-waterfall-easy ； vue-waterfall； vue-waterfall2
vue2+el-menu实现路由跳转及当前项的设置方法实例
01-19
Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。...
Vue前端框架学习笔记
04-21
我的前端框架学习笔记，vue的安装与使用，Vue.js（读音/vju：/，发音类似于view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。 Vue 的核心库只关注视图层，并且...
简单vue2开发
08-08
Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。...
Vue2.0渐进式框架黑马笔记
08-20
Vue2.0渐进式框架笔记，vue是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面...
三、VUE数据代理
D_A_I_H_A_O的博客
04-29 573
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
前端Vue 后端FastApi 跨域 CORS
weixin_44656422的博客
05-06 159
前端是localhost:3000,后端是localhost:8000 ，就是跨域了。
vue 快速入门 系列 —— 玩转 CMS
ZL4120505的博客
04-29 807
例如 src/layouts/BasicLayout.less，里面包含一些基本布局的样式，被 src/layouts/BasicLayout.vue 引用，项目中使用这种布局的页面就不需要再关心整体布局的设置。好比中医发展了好几千年，许多本源的东西老中医也是不清楚的，但我们摸索出一套规则，按照这个能治病，这个就很好。.clearfix() 混合器定义了清除浮动的样式。组件相关的样式，有一些在页面中重复使用的片段或相对独立的功能，你可以提炼成组件，相关的样式也应该提炼出来放在组件中，而不是混淆在页面里。
小区服务|基于SprinBoot+vue的小区服务管理系统(源码+数据库+文档)
weixin_66413741的博客
05-01 1095
这次开发的小区服务管理系统对安保管理、安保分配管理、客服聊天管理、字典管理、房屋管理、反馈管理、论坛管理、公告管理、反馈处理管理、住户管理、员工管理、管理员管理等进行集中化处理。经过前面自己查阅的网络知识，加上自己在学校课堂上学习的知识，决定开发系统选择B/S模式这种高效率的模式完成系统功能开发。这种模式让操作员基于浏览器的方式进行网站访问，采用的主流的Java语言这种面向对象的语言进行小区服务管理系统程序的开发，在数据库的选择上面，选择功能强大的Mysql数据库进行数据的存放操作。
Vue在/public目录下访问process.env.NODE_ENV(其它通用)
lllomh的博客
05-01 351
所以process.env.NODE_ENV 也无效.无法判断,当要根据这个去判断的时候就麻烦了. 但有个办法可以解决这个问题.总所周知,/public目录下的js文件是不会经过webpack处理的.先安装 npm install --save-dev cross-env。就是在index.html里面去赋值到window变量中,如下。在 /public/index.html中加上。然后在/public下的js文件中就可以判断了。然后在 package.json中标记。上面的判断就跟赋值就会生效.
公考学习平台|基于SprinBoot+vue的公考学习平台(源码+数据库+文档)
weixin_66413741的博客
04-30 1336
本共享汽车管理系统有管理员和用户。管理员功能有个人中心，用户管理，投放地区管理，汽车信息管理，汽车投放管理，汽车入库管理，使用订单管理，汽车归还管理。用户可以在注册登录，可以对汽车进行使用产生订单，还可以归还。因而具有一定的实用性。本站是一个B/S模式系统，采用Spring Boot框架，MYSQL数据库设计开发，充分保证系统的稳定性。系统具有界面清晰、操作简单，功能齐全的特点，使得共享汽车管理系统管理工作系统化、规范化。
组件化开发&根组件
最新发布
m0_74462339的博客
05-06 217
组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。好处：便于维护，利于复用，提升开发效率。
vue3、element-plus递归实现动态菜单
weixin_68531269的博客
04-30 1035
为了使用递归实现动态菜单，你需要定义一个递归组件，然后递归处理菜单数据的每一层。迭代菜单数据：在顶层组件中，使用循环或v-for遍历菜单数据，并递归生成子菜单。简化代码逻辑：当菜单结构多层嵌套时，递归可以大幅简化代码逻辑，使其更易于维护。灵活性：递归可以使代码更灵活，可以适应菜单结构的变化而不需要大量代码改动。可扩展性：递归实现的菜单可以适应不同嵌套深度，不需要特定的代码处理。多层嵌套：菜单可以包含子菜单，甚至更多层的嵌套，形成树状结构。检测终止条件：确保组件在没有子菜单时停止递归，以避免无限递归。
Vue进阶之Vue项目实战（一）
qq_34306228的博客
05-03 1060
git hooks提供的pre-commit等，可以在开发的时候，在提交对应的时机，发生一些作用。2.创建文件pre-commit.mjs 在husky/pre-commit.mjs。pre-commit:预提交 执行提交后会先预提交一下，失败的话全部打回，不会提交。husky是一个钩子工具，但是钩子本身不是husky的，钩子是属于git的。加依赖，devDependencies加。以后写脚本的时候可以尝试用zx写。node版本：20.11.1。pnpm版本：9.0.4。帮助轻松拦截hooks。
vue-countup-v2
12-01
vue-countup-v2是一个基于Vue.js的CountUp.js组件包装，用于在网页中实现数字滚动效果。它可以帮助开发者快速地实现数字滚动效果，而无需手动编写JavaScript代码。使用vue-countup-v2，开发者只需要在Vue.js模板中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Wade_Crab

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值