Vue框架入门

Author：

Dawn_T17??
目次
什么是框架
一.Vue 的使用方向
二.Vue 框架的使用场景
（TIP）MVVM头脑
三.Vue入门案例
TIP：插值表达式
四.Vue-指令?
（1）v-bind 和 v-model?
? （2）v-on?
? （3）v-if/v-else和 v-show
（4）v-for?
（5）Vue指令的案例练习?编辑
五.Vue-生命周期?
小结?
?六.Vue组件库Element
七.Vue路由
1.安装
2.界说路由
3.main中导入路由
4.关联路由?
5.路由界面表现切换?
6.初始默认界面设置

---

什么是框架

在编程中，框架是一种提供了根本结构和功能的软件架构。
它就像是一个预先搭建好的根本模板，为开辟者设定了一套规则、模式和工具，以资助他们更高效、更规范地举行软件开辟。
框架通常包罗了以下几个紧张的方面：

• 根本架构：界说了软件的团体结构，包罗模块的构造方式、数据的流向等。
  
• 通勤奋能：提供了一些常见的功能模块，如数据库使用、网络通讯、用户认证等，开辟者无需从零开始实现这些功能。
  
• 开辟规范：规定了代码的编写风格、文件构造方式、模块之间的交互方式等，以确保项目标同等性和可维护性。
  

比方，在 Web 开辟中，Django（Python 框架）和 Spring（Java 框架）为开辟者处置惩罚了很多底层的复杂逻辑，如路由、数据库毗连和管理等。
再好比，在移动开辟中，Flutter 框架为开辟者提供了一套跨平台的 UI 组件和工具，使得开辟者可以或许更轻松地创建同时实用于 Android 和 iOS 平台的应用。
框架的使用可以大大紧缩开辟时间，进步代码质量，低落开辟本钱，同时也使得团队协作更加顺畅。
Vue是一套构建用户界面的渐进式 JavaScript 框架。
一.Vue 的使用方向

• 构建用户界面
  
  
  
  • 资助开辟者创建网页或应用的前端页面，实现页面元素的展示和结构。
    
  
  
• 实现数据与视图的自动同步
  
  
  
  • 当数据发生厘革时，Vue 能自动更新页面中相干的部分，无需手动使用。
    
  
  
• 组件化开辟
  
  
  
  • 把复杂的页面拆分成多个独立的小模块（组件），方便管理和复用。
    
  
  
• 提拔开辟服从
  
  
  
  • 提供了简便的语法和丰富的功能，让开辟者更快速地实现各种交互结果和功能。
    
  
  

比方，在一个购物网站中，Vue 可以用来创建商品列表页面，当商品数据有更新时，页面会自动展示新的商品信息；还能将商品详情部分做成一个组件，在多个页面中重复使用。
总的来说，Vue 就是资助前端开辟者更轻松、高效地打造出功能丰富、交互精良的用户界面。
二.Vue 框架的使用场景

• 单页面应用（SPA）开辟
  
  
  
  • 比方电商平台的商品详情页、在线文档编辑工具等，提供流通的用户体验，无需频仍革新页面。
    
  • 像一个在线音乐播放器，用户在切换差异的歌曲页面时，页面无需团体革新，而是通过 Vue 的组件切换和数据更新来实现。
    
  
  
• 移动端应用
  
  
  
  • 构建移动端的 Web 应用，顺应差异尺寸的屏幕，提供精良的交互结果。
    
  • 好比一个移动版的消息阅读应用，可以或许根据用户的滑动使用快速加载和更新内容。
    
  
  
• 配景管理体系
  
  
  
  • 用于企业内部的各种管理体系，如订单管理、用户管理、数据分析等。
    
  • 比方一个电商配景的订单处置惩罚体系，通过 Vue 的组件化，可以清晰地展示订单列表、订单详情、使用按钮等。
    
  
  
• 数据可视化页面
  
  
  
  • 展示大量动态数据，通过 Vue 实现数据的实时更新和交互使用。
    
  • 好比一个实时的股票行情展示页面，可以或许根据数据厘革动态更新图表和相干信息。
    
  
  
• 渐进式加强传统网站
  
  
  
  • 对于一些旧的网站，可以渐渐引入 Vue 来提拔部分页面的交互性和用户体验。
    
  • 好比在一个传统的企业官网中，将产物展示页面用 Vue 举行改造，增长动态结果和交互功能。
    
  
  
• 前端工具和小部件
  
  
  
  • 开辟独立的可复用的前端组件，如日历组件、搜索框组件等。
    
  • 像一个可定制的日期选择组件，可以在多个项目中重复使用。
    
  
  

总之，Vue 框架实用于各种必要构建交互性强、用户体验精良的前端应用场景。
（TIP）MVVM头脑

MVVM（Model-View-ViewModel）是一种软件架构模式，常用于构建用户界面的应用步调。
它将应用步调分为三个紧张部分：

• Model（模子）：负责处置惩罚应用步调的数据和业务逻辑。这包罗与数据库的交互、数据的验证和处置惩罚等。
  
• View（视图）：即用户界面，负责向用户展示数据并吸收用户的输入。
  
• ViewModel（视图模子）：作为毗连 Model 和 View 的桥梁。它将 Model 中的数据举行转换和处置惩罚，以顺应 View 的展示需求；同时，它将 View 中的用户使用（如点击、输入等）转换为对 Model 的使用。
  
  
  

MVVM 的紧张优点包罗：

• 实现了视图和模子的分离，进步了代码的可维护性和可测试性。
  
• 双向数据绑定：当 Model 中的数据发生厘革时，View 会自动更新；反之，当用户在 View 中举行使用时，Model 中的数据也会相应地改变。
  

比方，在一个电商应用中，商品的库存数量是 Model 中的数据。View 大概是展示商品信息的页面，而 ViewModel 则负责将库存数量转换为符合的格式（如添加单元、判断库存是否富足并表现相应的提示）在 View 中展示，而且当用户购买商品时，通过 ViewModel 将购买数量通报给 Model 举行库存的更新。
总的来说，MVVM 模式有助于进步开辟服从，加强应用步调的交互性和相应性。
三.Vue入门案例

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <meta charset="UTF-8">
5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.     <title>Vue-快速入门</title>
8.     <script src="js/vue.js"></script>       //导入Vue框架
9. </head>
10. <body>
12.     <div id="app">
13.         <input type="text" v-model="message"> /*v-model?指令将输入框的值
14.                                                 与?message?数据属性双向绑定*/
15.         {{message}}                           //将message的值展示出来
16.     </div>
18. </body>
19. <script>
20.     //定义Vue对象
21.     new Vue({
22.         el: "#app", //vue接管区域
23.         data:{
24.             message: "Hello Vue"
25.         }
26.     })
27. </script>
28. </html>

复制代码

• 使用v-model指令将输入框的值与message数据属性双向绑定，意味着输入框的值的厘革会同步更新message的值，反之亦然。
  
• {{message}}：这是 Vue 的模板语法，用于表现message的值。
  
• el: el是一个选项，用于指定 Vue 实例要管理的 DOM 元素。"#app"：指定 Vue 实例要控制的 DOM 元素是具有id="app"的div元素。
  
• data: { message: "Hello Vue" }：界说了一个名为message的数据属性，并初始化为"Hello Vue"。
  
• 当您在输入框中输入内容时，{{message}}表现的内容会随之实时更新，这展示了 Vue 的数据驱动视图的特性。
  

实现结果：输入框里内容改变时，背面的文本(message)也随之改变

TIP：插值表达式

在 Vue 中，插值表达式是一种在模板中动态表现数据的方式。
插值表达式使用双花括号{{ }}来包裹要表现的数据。比方，假如在 Vue 实例的data选项中界说了一个数据属性message，值为"Hello, Vue!"，那么可以在模板中使用{{ message }}来表现这个值。
插值表达式不但可以表现简朴的数据值，还可以举行一些简朴的盘算和逻辑处置惩罚。
四.Vue-指令

Vue 中的指令是特别的属性，以v-开头，用于在模板中为 DOM 元素添加特定的功能或举动。

（1）v-bind 和 v-model

v-bind：用于动态绑定属性值。
v-model：用于实现表单元素（如输入框、单选框、复选框等）和数据的双向绑定。

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <meta charset="UTF-8">
5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.     <title>Vue-指令-v-bind</title>
8.     <script src="js/vue.js"></script>
9. </head>
10. <body>
11.     <div id="app">
13.         <a v-bind:href="url">链接1</a>
14.         <a :href="url">链接2</a>
16.         <input type="text" v-model="url">
18.     </div>
19. </body>
20. <script>
21.     //定义Vue对象
22.     new Vue({
23.         el: "#app", //vue接管区域
24.         data:{
25.            url: "https://www.baidu.com"
26.         }
27.     })
28. </script>
29. </html>

复制代码

• 在<a v-bind:href="url">链接 1</a>和<a :href="url">链接 2</a>中，使用了v-bind指令（缩写情势为:）将url数据属性的值绑定到a标签的href属性上。这意味着当url的值发生厘革时，链接的href属性也会自动更新。
  
• <input type="text" v-model="url">使用了v-model指令实现了双向数据绑定。用户在输入框中输入的内容会同步更新到url数据属性，同时url数据属性的厘革也会反映在输入框的值中。
  
• 在 Vue 实例中，通过data选项界说了初始的url值为"https://www.baidu.com"。
  

当您在输入框中修改url的值时，两个链接的href属性都会随之更新。
（2）v-on

v-on：用于监听 DOM 变乱。

Vue中函数写在methods方法块中（可以写多个函数）
函数名：function(参数列表){}
大概直接
函数名（参数列表）{}

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <meta charset="UTF-8">
5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.     <title>Vue-指令-v-on</title>
8.     <script src="js/vue.js"></script>
9. </head>
10. <body>
11.     <div id="app">
13.         <input type="button" value="点我一下" v-on:click="handle()">
15.         <input type="button" value="点我一下" @click="handle()">
17.     </div>
18. </body>
19. <script>
20.     //定义Vue对象
21.     new Vue({
22.         el: "#app", //vue接管区域
23.         data:{
24.            
25.         },
26.         methods: {
27.             handle: function(){
28.                 alert("你点我了一下...");
29.             }
30.         }
31.     })
32. </script>
33. </html>

复制代码

（3）v-if/``v-else和 v-show

? v-if和v-else：根据条件决定元素是否渲染。
v-show：根据条件控制元素的表现或潜伏。

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <meta charset="UTF-8">
5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.     <title>Vue-指令-v-if与v-show</title>
8.     <script src="js/vue.js"></script>
9. </head>
10. <body>
11.     <div id="app">
12.         
13.         年龄<input type="text" v-model="age">经判定,为:
14.         <span v-if="age <= 35">年轻人(35及以下)</span>
15.         <span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
16.         <span v-else>老年人(60及以上)</span>
18.         <br><br>
20.         年龄<input type="text" v-model="age">经判定,为:
21.         <span v-show="age <= 35">年轻人(35及以下)</span>
22.         <span v-show="age > 35 && age < 60">中年人(35-60)</span>
23.         <span v-show="age >= 60">老年人(60及以上)</span>
25.     </div>
26. </body>
27. <script>
28.     //定义Vue对象
29.     new Vue({
30.         el: "#app", //vue接管区域
31.         data:{
32.            age: 20
33.         },
34.         methods: {
35.             
36.         }
37.     })
38. </script>
39. </html>

复制代码

v-if/v-else和 v-show的区别
实现方式：

• v-if是“真正”的条件渲染，它会根据表达式的值在 DOM 中添加或移除元素。假如条件为假，对应的元素及其子元素不会被创建和渲染。
  
• v-show则是通过修改元素的displayCSS 属性来控制表现或潜伏。无论条件怎样，元素始终会被渲染到 DOM 中。
  

性能：

• 当频仍切换表近况态时，v-show的性能更高，由于它只是简朴地切换样式，不必要举行 DOM 使用。
  
• 当初始渲染时条件为假，而且之后不太大概改变，大概很少必要切换表近况态时，v-if性能更好，由于它不会创建初始不必要的元素。
  

打开网页检视：

（4）v-for

v-for：用于遍历数组或对象来渲染多个元素。
v-for=“(item, index) in items” :key=“index”（自动天生格式）
item 得到值，index得到索引（从0开始)
v-for=“itemin items” 遍历数组内的全部元素

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <meta charset="UTF-8">
5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.     <title>Vue-指令-v-for</title>
8.     <script src="js/vue.js"></script>
9. </head>
10. <body>
11.     <div id="app">
13.         <div v-for="addr in addrs">{{addr}}</div>
15.         <hr>
17.         <div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>
19.     </div>
20. </body>
21. <script>
22.     //定义Vue对象
23.     new Vue({
24.         el: "#app", //vue接管区域
25.         data:{
26.            addrs:["北京", "上海", "西安", "成都", "深圳"]
27.         },
28.         methods: {
29.             
30.         }
31.     })
32. </script>
33. </html>

复制代码

（5）Vue指令的案例练习

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <meta charset="UTF-8">
5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.     <title>学生成绩</title>
7.     <script src="js/vue.js"></script>
8.     <style>
9.         #st{
10.             text-align: center;
11.         }
12.     </style>
13. </head>
14. <body>
15.     <div id="students">
16.         <table border="1" cellspacing="0" width="60%">
17.         <tr>
18.             <th>编号</th>
19.             <th>姓名</th>
20.             <th>年龄</th>
21.             <th>性别</th>
22.             <th>成绩</th>
23.             <th>等级</th>
24.         </tr>
25.         <tr id="st" v-for="(user,index) in users">   
26.             <td>{{index+1}}</td>
27.             <td>{{user.name}}</td>
28.             <td>{{user.age}}</td>
29.             <td>
30.                 <span v-if="user.gender==1">男</span>
31.                 <span v-else-if="user.gender==2">女</span>
32.             </td>
33.             <td>{{user.score}}</td>
34.             <td>
35.                 <span v-if="user.score >= 85">优秀</span>
36.                 <span v-else-if="user.score >= 60">及格</span>
37.                 <span v-else style="color:red;">不及格</span>
38.             </td>
40.         </tr>
41.     </table>
42.     </div>
43.     <script>
44.         new Vue({
45.             el:"#students",
46.             data:{
47.                 users: [{
48.                 name: "Tom",
49.                 age: 20,
50.                 gender: 1,
51.                 score: 78
52.             },{
53.                 name: "Rose",
54.                 age: 18,
55.                 gender: 2,
56.                 score: 86
57.             },{
58.                 name: "Jerry",
59.                 age: 26,
60.                 gender: 1,
61.                 score: 90
62.             },{
63.                 name: "Tony",
64.                 age: 30,
65.                 gender: 1,
66.                 score: 52
67.             }]
68.             },
69.             methods: {
70.                
71.             },
73.         })
74.     </script>
75. </body>
76. </html>

复制代码

五.Vue-生命周期

在 Vue 中，组件具有一系列的生命周期钩子函数，答应开辟者在组件的差异阶段实行特定的逻辑。
紧张的生命周期钩子函数包罗：

• beforeCreate：在实例初始化之前被调用，此时数据观测和变乱设置尚未完成。
  
• created：实例已经创建完成，此时数据观测、属性和方法的运算已经完成，但 DOM 尚未挂载，无法访问到$el。
  
• beforeMount：在挂载开始之前被调用，此时模板已经编译完成，但尚未渲染到页面中。
  
• mounted：实例被挂载到 DOM 后调用，此时可以举行 DOM 使用。
  
• beforeUpdate：数据更新时调用，发生在假造 DOM 重新渲染和打补丁之前。
  
• updated：数据更新导致的假造 DOM 重新渲染和打补丁完成之后调用。
  
• beforeDestroy：实例烧毁之前调用，可以在此举行一些清算使用，好比解绑变乱监听等。
  
• destroyed：实例烧毁后调用，此时组件的全部数据、方法、指令和变乱监听都已被排除。
  new Vue({
  el: ‘#app’,
  data: {
  message: ‘Hello Vue!’
  },
  beforeCreate() {
  console.log(‘beforeCreate: 实例初始化之前’);
  },
  created() {
  console.log(‘created: 实例创建完成’);
  },
  beforeMount() {
  console.log(‘beforeMount: 挂载开始之前’);
  },
  mounted() {
  console.log(‘mounted: 实例挂载到 DOM 后’);
  },
  beforeUpdate() {
  console.log(‘beforeUpdate: 数据更新前’);
  },
  updated() {
  console.log(‘updated: 数据更新后’);
  },
  beforeDestroy() {
  console.log(‘beforeDestroy: 实例烧毁前’);
  },
  destroyed() {
  console.log(‘destroyed: 实例烧毁后’);
  }
  })
  

小TIP：
为什么叫钩子函数？
在编程中，“钩子（Hook）”这个术语被使用，通常是由于它就像一个“挂钩”或“接口”，答应开辟者在特定的时候“钩住”或加入步调的实行流程，从而可以或许添加自界说的逻辑或使用。
在 Vue 的生命周期中，这些钩子函数提供了明白的机会点，让开辟者可以在组件的差异阶段“钩入”自己的代码，就好像在组件的生命周期流程中挂上了自己的处置惩罚逻辑。
之以是称为“钩子”，形象地表达了开辟者可以或许通过这些特定的点来“捉住”或“挂接”组件的运行过程，从而实现对组件举动的定制和扩展。
小结

六.Vue组件库Element

见文章Vue组件库Element-DawnT17
七.Vue路由

前端路由是当代前端开辟中用于管理页面之间导航和视图切换的一种机制。
它的紧张作用包罗：

• 实现单页应用（SPA）的页面切换结果，无需每次跳转都重新加载整个页面，提供更流通的用户体验。
  
• 可以根据差异的 URL 路径，动态地渲染相应的组件或页面内容。
  

常见的前端路由实现方式有两种：
Hash 路由：通过 URL 中的#背面的部分来标识差异的路由状态。比方http://example.com/#/home和http://example.com/#/about。欣赏器不会将#背面的内容发送到服务器，路由的处置惩罚完全在前端举行。
History 路由：使用 HTML5 的History API来实现更雅观和更靠近传统 URL 的路由情势。比方http://example.com/home和http://example.com/about。
前端路由通常必要共同框架或库来使用，好比 Vue Router、React Router 等。

1.安装

想要使用VueRouter必要安装(通过npm)
大概直接在VueCli创建Vue项目时间,直接勾选添加VueCli

2.界说路由

在router文件下的index.js文件里界说

打开后,已经有一段路由信息

设置

在路由设置中，当设置了{ path: '/emp', component:...... }，之以是输入/emp就能被辨认和处置惩罚，是由于路由体系会监听欣赏器所在栏中的 URL 厘革。
当用户在欣赏器中输入/emp时，路由体系会将这个输入的路径与之前设置的路由规则举行匹配。在这个例子中，/emp与我们设置的路径完全匹配，以是路由体系就知道应该加载并表现EmpView这个组件。
3.main中导入路由

通过VueCli创建且勾选路由项的会自动添加

4.关联路由

把两条项目名称语句的代码的标签换成router-link

5.路由界面表现切换

在App.Vue中用emp-view标签即可
留意把背面的导文件和components解释掉
A

6.初始默认界面设置

由于默认是’/',而路由都有后缀,以是直接访问时间,会是一片空缺
可以自己做初始界面,也可以以此中一个当作初始界面
用redirect
在路由设置中，redirect通常用于重定向。当访问某个特定路径时，自动将用户重定向到另一个路径。