感兴趣的朋友可以去我的语雀平台进行查看更多的知识。
https://www.yuque.com/books/share/ffbf2b86-52af-4a4f-b144-507a890fb8dc?# 《木子Teng的计算机知识库》
Vue
本篇用于Vue基础入门,相对于后端开发的同学较为友好,如果想较为系统的学习Vue,不建议在此学习。
开发环境:
node.js—16.15.0
npm—8.19.1
1. Vue概述及第一个Vue程序
1.1 什么是MVVM
MVVM源自于经典的MVC(Model-View-Controller)模式。MVVM的核心是ViewModel层,负责转换Model中的数据对象来让数据变得
更容易管理和使用。其作用如下:
- 该层向上与视图层进行双向数据绑定
- 向下与Model层通过接口请求进行数据交互
MVVM已经相当成熟了,主要运用但不仅仅在网络应用程序开发中。当下流行的MVVM框架有Vue.js
,Anfular JS
1.2 为什么要使用MVVM
MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model),有几大好处
-
低耦合:视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不
变,当Model变化的时候View也可以不变。
-
可复用:可以把一些视图逻辑放在一个ViewModel里面,让很多View重用这段视图逻辑。
-
独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewMode),设计人员可以专注于页面设计。
-
可测试:界面素来是比较难以测试的,而现在测试可以针对ViewModel来写。
MVVM组成部分
-
View
View是视图层, 也就是用户界面。前端主要由HTML和CSS来构建, 为了更方便地展现ViewModel或者Model层的数据, 已经产生
了各种各样的前后端模板语言, 比如FreeMarker,Thymeleaf等等, 各大MVVM框架如Vue.js.Angular JS, EJS等也都有自己用来构
建用户界面的内置模板语言。
-
Model
Model是指数据模型, 泛指后端进行的各种业务逻辑处理和数据操控, 主要围绕数据库系统展开。这里的难点主要在于需要和前端
约定统一的接口规则
-
ViewModel
ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层, 前端开发者对从后端获取的Model数据进行转换处理, 做
二次封装, 以生成符合View层使用预期的视图数据模型。
需要注意的是ViewModel所封装出来的数据模型包括视图的状态和行为两部分, 而Model层的数据模型是只包含状态的
- 比如页面的这一块展示什么,那一块展示什么这些都属于视图状态(展示)
- 页面加载进来时发生什么,点击这一块发生什么,这一块滚动时发生什么这些都属于视图行为(交互)
视图状态和行为都封装在了View Model里。这样的封装使得View Model可以完整地去描述View层。由于实现了双向绑定, ViewModel
的内容会实时展现在View层, 这是激动人心的, 因为前端开发者再也不必低效又麻烦地通过操纵DOM去更新视图。
MVVM框架已经把最脏最累的一块做好了, 我们开发者只需要处理和维护ViewModel, 更新数据视图就会自动得到相应更新,真正实现
事件驱动编程。
View层展现的不是Model层的数据, 而是ViewModel的数据, 由ViewModel负责与Model层交互, 这就完全解耦了View层和Model
层, 这个解耦是至关重要的, 它是前后端分离方案实施的重要一环
1.3 Vue
Vue(读音/vju/, 类似于view) 是一套用于构建用户界面的渐进式框架, 发布于2014年2月。与其它大型框架不同的是, Vue被设计
为可以自底向上逐层应用。Vue的核心库只关注视图层, 不仅易于上手, 还便于与第三方库(如:vue-router,vue-resource,vue
x) 或既有项目整合
MVVM模式的实现者
- Model:模型层, 在这里表示JavaScript对象
- View:视图层, 在这里表示DOM(HTML操作的元素)
- ViewModel:连接视图和数据的中间件, Vue.js就是MVVM中的View Model层的实现者
在MVVM架构中, 是不允许数据和视图直接通信的, 只能通过ViewModel来通信, 而ViewModel就是定义了一个Observer观察者
- ViewModel能够观察到数据的变化, 并对视图对应的内容进行更新
- ViewModel能够监听到视图的变化, 并能够通知数据发生改变
至此, 我们可以大致了解, Vue.js就是一个MVVM的实现者, 他的核心就是实现了DOM监听与数据绑定
1.4 第一个Vue程序
Vue.js:我们通常使用cdn导入
<script src=“https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js”></script>
<!--或-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
- 创建一个空项目,创建一个文件夹,new一个HTML文件
- 编写代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个Vue程序</title>
</head>
<body>
<!--View层-->
<div id="app">
<!--数据绑定-->
{{message}}
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vue = new Vue({
el: "#app",
/*Model层*/
data: {
message: "Hello,Vue"
}
});
</script>
</body>
</html>
说明
- el:“#app” -----> 绑定元素的ID
- data:{message:“hello,vue —cvzhanshi!”} ----> 数据对象中有一个名为message的属性,并设置了初始值Hello,Vue
- {{message}} -----> 实现数据绑定功能
运行效果
测试双向绑定
为了能够更直观的体验Vue带来的数据绑定功能, 我们需要在浏览器测试一番, 操作流程如下:
- 在浏览器上运行第一个Vue应用程序, 进入开发者工具
- 在控制台输入vm.message=‘HelloWorld’, 然后回车, 你会发现浏览器中显示的内容会直接变成HelloWorld,不需要刷新页面
此时就可以在控制台直接输入vm.message来修改值, 中间是可以省略data的,在这个操作中,我并没有主动操作DOM, 就让页面的内
容发生了变化, 这就是借助了Vue的数据绑定功能实现的; MVVM模式中要求View Model层就是使用观察者模式来实现数据的监听与绑
定, 以做到数据与视图的快速响应
理解ViewModel:它可以类比成一个观察者,监测到了数据的变化,就立马更新页面与之绑定的值,无需更新页面,也无需操作
DOM对象,相当于一个虚拟DOM对象
2. Vue基础语法
2.1 v-bind
测试代码
<!--View层-->
<div id="app">
<!--数据绑定-->
{{message}}
<br>
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vue = new Vue({
el: "#app",
/*Model层*/
data: {
message: "Hello,Vue"
}
});
</script>
测试效果
说明:
- 看到的
v-bind
attribute 被称为指令。指令带有前缀v-
,以表示它们是 Vue 提供的特殊 attribute - 它们会在渲染的 DOM 上应用特殊的响应式行为
在这里,该指令的意思是:“将这个元素节点的
title
attribute 和 Vue 实例的message
property 保持一致”如果你再次打开浏览器的 JavaScript 控制台,输入
app.message = '新消息'
,就会再一次看到这个绑定了title
attribute 的HTML 已经进行了更新
2.2 v-if、v-else
测试代码1
<!--View层-->
<div id="app">
<h1 v-if="type">Yes</h1>
<h1 v-else>No</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
var vue = new Vue({
el: "#app",
data: {
/*Model 数据*/
type: true
}
});
</script>
测试结果
测试
-
在浏览器上运行,打开控制台
-
在控制台输入
vue.type=false
然后回车,你会发现浏览器中显示的内容会直接变成NO
注:使用v-*
属性绑定数据是不需要双花括号
包裹的
测试代码二
<div id="app">
<h1 v-if="type==='A'">A</h1>
<h1 v-else-if="type==='B'">B</h1>
<h1 v-else-if="type==='C'">C</h1>
<h1 v-else>D</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vue = new Vue({
el: "#app",
data: {
type: "A"
}
})
</script>
测试结果
测试
1.在浏览器上运行,打开控制台
2.在控制台输入vue.type="E"
然后回车,你会发现浏览器中显示的内容会直接变成D
注:===
三个等号在JS中表示绝对等于(就是数据与类型都要相等)
2.3 v-for
测试代码
<div id="app">
<li v-for="(item, index) in items">
{{item.message}}---{{index}}
</li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vue = new Vue({
el: "#app",
data: {
items: [
{message: "teng1"},
{message: "teng2"},
{message: "teng3"}
]
}
});
</script>
结果
格式说明
<div id="app">
<li v-for="(item,index) in items">
{{item.message}}---{{index}}
</li>
</div>
注:items
是数组,item
是数组元素迭代的别名,index是迭代的序号
测试
打开控制台,在控制台输入vue.items.push({message:'vue hello'})
,尝试追加一条数据,会发现页面也添加了数据
2.4 v-on
- 可以用
v-on
指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码
测试代码
<div id="app">
<button v-on:click="counter += 1">Add 1</button>
<p>按钮已经被点击了 {{counter}} 次</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vue = new Vue({
el: "#app",
data: {
counter: 0
}
})
</script>
当我们点击后
-
然而许多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在
v-on
指令中是不可行的。因此v-on
还可以接收一个需要调用的方法名称
测试代码
<div id="app">
<!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">Greet</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vue = new Vue({
el: "#app",
data: {
name: "Vue.js",
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!');
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
});
</script>
结果
3. Vue表单双绑&组件
3.1 表单数据双向绑定
数据双向绑定, 即当数据发生变化的时候, 视图也就发生变化, 当视图发生变化的时候,数据也会跟着同步变化。
注意 : 我们所说的数据双向绑定,一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定。
你可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model负责监听用户
的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
注意:v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值
v-model
在内部为不同的输入元素使用不同的 property 并抛出不同的事件:
- text 和 textarea 元素使用
value
property 和input
事件; - checkbox 和 radio 使用
checked
property 和change
事件; - select 字段将
value
作为 prop 并将change
作为事件。
单行文本
<body>
<div id="app">
<input placeholder="编辑我" v-model="message">
<p>Message is : {{message}} </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vue = new Vue({
el: "#app",
data: {
message: ''
}
});
</script>
</body>
多行文本
<body>
<div id="app">
<span>文本框内容是:</span>
<p style="white-space: pre-line;"> {{message}}</p>
<br>
<textarea v-model="message" placeholder="编辑我"></textarea>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vue = new Vue({
el: "#app",
data: {
message: ' '
}
});
</script>
</body>
复选框
- 单个复选框绑定到布尔值
<body>
<div id="app">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{checked}}</label>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vue = new Vue({
el: "#app",
data: {
checked: true
}
})
</script>
</body>
- 多个复选框,绑定到同一个数组
<div id="app">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>点击的名字:{{checkedNames}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vue = new Vue({
el: "#app",
data: {
checkedNames: []
}
})
</script>
单选按钮
<div id="app">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>选中的是:{{picked}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vue = new Vue({
el: "#app",
data: {
picked: ''
}
});
</script>
选择框
<div id="app">
下拉框:
<select v-model="selected">
<option disabled value="">---请选择---</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
value:
<span>{{selected}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vue = new Vue({
el: "#app",
data: {
selected: ''
},
});
</script>
3.2 组件
组件是可复用的Vue
实例, 说白了就是一组可以重复使用的模板, 跟JSTL
的自定义标签、Thymeleal
的th:fragment
等框架有着异曲
同工之妙,通常一个应用会以一棵嵌套的组件树的形式来组织
例如,你可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组件
自定义第一个组件
<div id="app">
<teng></teng>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
// 定义一个Vue组件component
Vue.component("teng", {
template: '<li>Hello</li>'
});
var vue = new Vue({
el: "#app",
})
</script>
说明:
Vue.component()
:注册组件teng
:自定义组件的名字template
:组件的模板
使用props
属性传递参数
<div id="app">
<teng v-for="item in items" v-bind:course="item"></teng>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
// 定义一个Vue组件component
Vue.component("teng", {
props: ['course'],
template: '<li>{{course}}</li>'
});
var vue = new Vue({
el: "#app",
data: {
items: ["Java", "Python", "Vue"]
}
});
</script>
说明:
- v-for=“item in items”:遍历Vue实例中定义的名为items的数组,并创建同等数量的组件
- v-bind:course=“item”:将遍历的item项绑定到组件中props定义名为course属性上;= 号左边的course为props定义的属性名,右边的为item in items 中遍历的item项的值