作为一名 Web 前端开发工程师，其主要职能就是将网站的界面更好地呈现给用户。随着互联网技术的爆发，越来越多的前端开发技术如雨后春笋般出现，在众多的 JavaScript 前端框架中，Vue.is 无疑是最出色的(曾经一项针对 JavaScript 的调查表明，Vue.is 有着 89%的开发者满意度)。相比其他前端框架，如 Angular 和 React，Vue.is 框架在实现上更容易，程序员上手更快。使用 Vue.is 技术不仅提高了开发的效率，也改善了开发的体验，因此，熟练掌握Vue.is 前端框架已经成为 Web 前端开发工程师的必备技能。本章将介绍 Vue.is 有关的一些概念和技术，并帮助读者了解它们背后的工作原理，同时构建第一个 Vue.is 应用。
第一个vue实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
// 第一步：引入vue.js
<script src="../js/vue.js"></script>
</head>
<body>
// 第二步：创建根节点
<div id="app">
</div>
<script>
// 第三步：初始化vue实例，绑定根节点
var app= new Vue({
el: "#app",
data: {
msg: "第一个vue实例!",
},
})
</script>
</body>
</html>1、定义一个侧边栏子组件，组件名为 sliderBar ，并在父组件页面进行调用。
2、点击侧边栏，把当前点击的标题栏的数据显示在右侧父组件当中。
提供的数组数据：
sliderBar: [
{ id: 1, name: "热门推荐" },
{ id: 2, name: "手机数码" },
{ id: 3, name: "京东超市" },
{ id: 4, name: "家用电器" },
{ id: 5, name: "男装" },
{ id: 6, name: "女装" },
{ id: 7, name: "美妆护肤" },
{ id: 8, name: "汽车生活" },
],
<template>
<div class= "home"›
<cc :sliderBar-"sliderBar" @getName-"onclick"›</ cc> <h1›{{ setName.name }}</h1>
</div> </template›
<script>
/ @ is an alias to /src import Cc from
*g/ components/Cc.vue"
export default {
name: 'HomeView' components:
Cc
}.
return
sliderBar: [
{id: 1,name：“热门推荐”了。
{ id:2,name：“手机数码。了，
f id: 3, name: "京京超市"}
{ id: 4, name:
〝家用电器了，
{ id: 5，name：“男装”了，{ id: 6，name：“女装”了，{ id: 7，name：“美妆护肤”了
{ id: 8,name："汽车生活”了
],
setName: { id: "",
• name:
};
methods:
onclick(e) {
this.setName e;
</script>
<style scoped>
1 reference . home> h1,
margin-top: 0%;
</style>功能要求：
1、购买数量列的按钮可以增加或减少商品数量，当点击减少按钮时，当数量小于0时，减少按钮处于禁用状态。
2、页面一加载时默认把所有商品的价格计算出来得到一个总价，并显示在总价区域；点击增加或减少按钮时，可以计算商品的总价，并在总价那里显示最终的商品价格。
请完成以下学生信息的增、删、查案例。具体需求描述如下：
（1）将学生信息列表渲染到网页上。
（2）添加新的列表项。
（3）删除指定的列表项。
（4）实现筛选年级的功能。 V-model computed/watch/methods
（5）使用filters过滤器进行文本格式化，用蓝色字体标注年级为2022级的学生。
运行效果截图如下
这是我学习vue.js的总结
Vue.js 是一个渐进式的 JavaScript 框架，用于构建用户界面。与其他大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，也便于与第三方库或已有项目整合。另一方面，Vue 也提供了一系列强大的功能，如组件系统、自定义指令、过渡效果等，以满足复杂应用的需求。
以下是 Vue.js 的主要特点：
- 响应式数据绑定：Vue.js 使用数据劫持和发布订阅模式来实现响应式数据绑定。当数据发生变化时，视图会自动更新。
- 组件化开发：Vue.js 采用了组件化的开发方式，使得代码更加模块化，易于维护和复用。组件之间可以通过 props、事件进行通信。
- 模板语法：Vue.js 提供了一套简洁的模板语法，使得我们可以以声明式的方式将数据渲染到 DOM 中。
- 轻量级易上手：相对于其他的大型前端框架，Vue.js 的核心库更加轻量级，易于上手。同时，它也提供了丰富的特性和工具，以满足复杂应用的需求。
- 灵活的集成：由于 Vue.js 的轻量级和模块化特性，它可以很容易地与第三方库或已有项目整合。
- 虚拟 DOM：Vue.js 使用虚拟 DOM 来提高性能，通过 diff 算法来最小化实际 DOM 操作，从而提高应用的性能。
1360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
