1. Introduction to vue
1.1 The complexity of using JQuery
- Use JQuery for front-end and back-end separation development, which can not only realize front-end and back-end interaction (ajax), but also complete data rendering
- Existing problems: JQuery needs to complete the display of data through HTML tag splicing and DOM node operations. The development efficiency is low and error-prone, and the rendering efficiency is low
- Vue is another excellent front-end framework after JQuery: focusing on the rendering of front-end data———— Simple syntax and high rendering efficiency
1.2 Introduction to VUE
1.2.1 Front-end framework
-
Front-end three frameworks: HTML, CSS, JavaScript
- HTML determines the structure of web pages
- CSS determines the display effect
- JavaScript determines web page functions (interaction, data display)
-
UI framework: (only styles and display effects are provided)
- Bootstrap
- amaze UI
- Layui
-
JS framework:
- JQuery (JQuery UI)
- React
- angular
- nodejs ---- backend development
- Vue is developed from the advantages of various front-end frameworks
1.2.2 MVVM
The project structure goes through three phases:
Back-end MVC : It can be understood as a single structure, and the process control is completed by the back-end controller
Front-end MVC : front-end and back-end separate development, the back-end is only responsible for receiving response requests
MVVM is an enhanced version of MVC. It is essentially the same as MVC, except that the location of the code changes.
The MVVM front-end requests the back-end interface, the back-end returns data, the front-end receives the data, and sets the received data to "VM", and HTML gets the value from vm
- M model data model, refers to the data returned by the backend interface
- V view view
- VM ViewModel The bridge between the view model data model and the view, the model returned by the backend converts the vm required by the front end, and the view layer can directly extract data from the vm
[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-rKmhc58L-1675781372002)(vue-study.assets/MVVMPattern.png)]
Model-View-ViewModel - concept map
2. Getting Started with Vue
Vue (pronounced /vjuː/, similar to view) is a progressive framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library only focuses on the view layer, which is not only easy to use, but also easy to integrate with third-party libraries or existing projects. On the other hand, when combined with a modern toolchain and various supporting libraries, Vue is also fully capable of powering complex single-page applications.
2.1 Introduction of vue
-
Offline reference: download the js file of vue, add it to the front-end project, and refer to the vue.js file through the script tag in the web page
-
CDN reference:
Import directly by using online CDN
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
2.2 Getting Started Case – Hello World
Text: The most common form of data binding is text interpolation using the "Mustache" syntax (double braces):
{ {message}}
-
Create an HTML file
-
Import the vue.js file
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app-1">
从 0 开始： {
{message}}
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app-1',
data: {
message: 'Hello World!'
}
})
</script>
</body>
</html>
[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-W5MaJ4bx-1675781372004)(vue-study.assets/image-20211205165420235.png)]
The Mustache tag will be replaced with messagethe value of the property on the corresponding data object. Whenever messagethe property on the bound data object changes, the content of the interpolation will be updated.
3. The grammar of vue
3.1 Basic data and strings
<div id="app-2">
{
{code}}
从 0 开始： {
{message}}
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app-2',
data: {
code: 1_3_3,
message: 'Hello World!'
}
})
</script>
[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-vvaW6r9U-1675781372006)(vue-study.assets/image-20211205212337929.png)]
3.2 Object type data
- Support ognl syntax
<div id="app-3">
学号：{
{stu.stuNum}} <br />
姓名：{
{stu.stuName}} <br />
性别：{
{stu.stuGender}} <br />
年龄：{
{stu.stuAge}}
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app-3',
data: {
stu: {
stuNum: '10001',
stuName: '张三',
stuGender: 'M',
stuAge: 20
}
}
})
</script>
[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-u2TWdI3y-1675781372007)(vue-study.assets/image-20211205215759140.png)]
3.3 Condition v-if
v-if: Used to control whether to switch an element to display (the underlying control is a DOM element, operate DOM)
Note: F12 opens this file on the webpage in the browser, and it can be seen from the label that there is no stu.stuGender == 'F' corresponding element. That is, if the condition is not met, the web page will not render the DOM, and there will not even be labels.
<div id="app-4">
学号：{
{stu.stuNum}} <br />
姓名：{
{stu.stuName}} <br />
性别：
<label v-if="stu.stuGender == 'M'">
男
</label>
<label v-if="stu.stuGender == 'F'">
女
</label>
<br />
年龄：{
{stu.stuAge}}
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app-4',
data: {
stu: {
stuNum: '10001',
stuName: '张三',
stuGender: 'M',
stuAge: 20
}
}
})
</script>
[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-HAkfuksF-1675781372009)(vue-study.assets/image-20211205220747989.png)]
3.4 Loop v-for
v-forDirective to render a list based on an array.Inside
v-forthe block , we can access all properties of the parent scope.v-forAn optional second argument, the index of the current item, is also supported.
<div id="app-5">
<table border="1" cellspacing="0" width="400">
<tr>
<th>序号</th>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr v-for="(stu, index) in stus">
<td>{
{index + 1}}</td>
<td>{
{stu.stuNum}}</td>
<td>{
{stu.stuName}}</td>
<td>
<table v-if="stu.stuGender == 'M'">
男
</table>
<table v-if="stu.stuGender == 'F'">
女
</table>
</td>
<td>{
{stu.stuAge}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app-5',
data: {
stus: [
{
stuNum: '10001',
stuName: '张三',
stuGender: 'M',
stuAge: 20
},
{
stuNum: '10002',
stuName: '李四',
stuGender: 'M',
stuAge: 23
},
{
stuNum: '10003',
stuName: '郑红',
stuGender: 'F',
stuAge: 19
}
]
}
})
</script>
[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-dN40pYyJ-1675781372010)(vue-study.assets/image-20211205222910734.png)]
3.5 Binding tag attribute v-bind
- v-bind: attribute name Abbreviation :
:属性名
<div id="app-6">
<input type="text" v-bind:value="message">
<hr /><br />
<table border="1" cellspacing="0" width="400">
<tr>
<th>序号</th>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr v-for="(stu, index) in stus">
<td>{
{index + 1}}</td>
<td>{
{stu.stuNum}}</td>
<td><img height="30" :src="stu.stuImg" /> </td>
<td>{
{stu.stuName}}</td>
<td>
<table v-if="stu.stuGender == 'M'">
男
</table>
<table v-if="stu.stuGender == 'F'">
女
</table>
</td>
<td>{
{stu.stuAge}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app-6',
data: {
message: 'Hello World!!',
stus: [
{
stuNum: '10001',
stuName: '张三',
stuGender: 'M',
stuAge: 20,
stuImg: 'img/1.jpg'
},
{
stuNum: '10002',
stuName: '李四',
stuGender: 'M',
stuAge: 23,
stuImg: 'img/2.jpg'
},
{
stuNum: '10003',
stuName: '郑红',
stuGender: 'F',
stuAge: 19,
stuImg: 'img/3.jpg'
}
]
}
})
</script>
[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-AwvsVbWv-1675781372011)(vue-study.assets/image-20211205224219915.png)]
3.6 Two-way binding of form tags v-model
- Can only be used in form input tags
- v-model:value can be abbreviated as v-model
<div id="app-7">
<input type="text" v-model="message">
<hr /><br />
双向绑定：{
{message}}
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app-7',
data: {
message: 'Hello World!!'
}
})
</script>
4. Vue instance
Each web page document that uses vue for data rendering needs to create a vue instance —— ViewModel
4.1 Life cycle of vue instance
Vue instance life cycle - the process of vue instance from creation to destruction
[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-IS1xMdjp-1675781372012)(vue-study.assets/lifecycle.png)]
- Create a vue instance (initialize data, load el)
- Data mounting (render the data in the vue instance data to the HTML tag of the web page)
- Re-render (when the data data of vue changes, it will be re-rendered to HTML tags)
- destroy instance
Create object ---- attribute initialization ---- get attribute value ----- GC recycling
4.2 Hook function
In order to facilitate developers to perform specific operations in different stages of the life cycle of the vue instance, vue provides a function before and after the four stages of the life cycle. This function does not need to be called by the developer. When the vue instance reaches the specified stage of the life cycle, it will automatically Call the corresponding function.
<div id="app-8">
<label v-once>{
{message}}</label><br />
<label>{
{message}}</label><br />
<input type="text" v-model="message">
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app-8',
data: {
message: 'Hello World!!'
},
beforeCreate: function () {
// 1. data 初始化之前执行，不能操作 data
},
create: function () {
// 2. data 初始化之后执行，模板加载之前，可以修改 / 获取 data 中的值
console.log(this.message);
// this.message = 'Hello World!! create(）';
},
beforeMount: function () {
// 3. 模板加载之后，数据初始渲染（挂载）之前，可以修改 / 获取 data 中的值
// this.message = 'Hello World!! beforeMount';
},
mounted: function () {
// 4. 数据初始渲染（挂载）之后，可以对 data 中的变量进行修改，但是不会影响 v-once 的渲染
// this.message = "Hello World!! mounted";
},
beforeUpdate: function () {
// 5. 数据渲染之后，当 data 中的数据发生变化触发重新渲染，渲染之前执行此函数
console.log("---" + this.message);
this.message = 'Hello World!! beforeUpdate';
},
update: function () {
// 6. data 数据被修改之后，重新渲染到页面之后
// this.message = "Hello World!! update";
},
beforeDestroy: function () {
// 7. 实例销毁之前
},
destroy: function () {
// 8. 实例销毁之后
}
})
</script>
5. Computed properties and listeners
5.1 Computed properties
The properties in data can be obtained through declarations, or through getters in computed properties
Features: Changes in the value of the attribute on which the computed attribute depends will affect the value of the computed attribute to change at the same time
example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app-9">
<input type="text" v-model="message1"><br />
<input type="text" v-model="message2"><br />
{
{message3}}
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app-9',
data: {
message1: 'Hello',
message2: 'World'
},
computed: {
message3: function () {
return this.message1 + this.message2;
}
}
})
</script>
</body>
</html>
5.2 Listeners
The listener is the listener of the attribute in data. When the value of the attribute in data changes, the execution of the listener function will be triggered
While computed properties are more appropriate in most cases, sometimes a custom listener is required. That's why Vue provides a more general way to respond to data changes through watchoptions . This approach is most useful when you need to perform asynchronous or expensive operations on data changes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app-10">
<input type="text" v-model="message1"><br />
<input type="text" v-model="message2"><br />
{
{message3}}
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app-10',
data: {
message1: 'Hello',
message2: 'World',
message3: 'Hello World'
},
watch: {
message1: function () {
this.message3 = this.message1 + this.message2;
},
message2: function () {
this.message3 = this.message1 + this.message2;
}
}
})
</script>
</body>
</html>
Six, class and style binding
6.1 class binding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.my-style1 {
width: 200px;
height: 100px;
background: orange;
}
.my-style2 {
border-radius: 10px;
}
.my-style3 {
width: 200px;
height: 100px;
background: black;
}
</style>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app-11">
<!-- 如果 message1 为 true, 就加载 my-style1，如果 message2 为 true, 就加载 my-style2 -->
<div :class="{'my-style1': message1, 'my-style2' : message2}">
</div><hr />
<!-- 为 class 属性加载多个样式名 -->
<div :class="[booleanValue1, booleanValue2]">
</div><hr />
<!-- 如果 message3 为 true, 则 class = 'my-style3',否则 class = 'my-style1'
如果在三目运算中使用样式名则需要加单引号，不加单引号则表示从 data 变量中获取样式名
-->
<div :class="[message3 ? 'my-style3' : 'my-style1']">
</div>
<div :class="[message1 ? booleanValue1 : booleanValue3]"></div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app-11',
data: {
message1: true,
message2: true,
message3: true,
booleanValue1: "my-style1",
booleanValue2: "my-style2",
booleanValue3: "my-style3"
}
})
</script>
</body>
</html>
[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-dD7yvtv6-1675781372015)(vue-study.assets/image-20211206164317378.png)]
6.2 style binding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app-12">
<!-- 当使用 v-bind 绑定内联样式时：
1. 使用 {} 定义 style 样式，才能获取 data 的值， {} 要遵循 JSON 格式
2. {} 中不在使用 style 样式属性名 “font-size”, 而要使用对应的 js 属性名
border-style-width --- borderStyleWidth
-->
<div v-bind:style="{color: colorName, fontSize: fontsize + 'px' }">
Hello World!
</div>
<!-- 我们可以直接为 style 属性绑定一个 data 中定义好的内联样式的字符串 -->
<div v-bind:style="myStyle1">
Hello World!!
</div>
<!-- 我们可以直接为 style 属性绑定一个 data 中定义好的内联样式的对象 -->
<div v-bind:style="myStyle2">
Hello World!!!
</div>
<!-- 我们可以在同一个 style 属性通过数组引用多个内联样式的对象 -->
<div v-bind:style="[myStyle2, myStyle3]">
Hello World!!!!
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app-12',
data: {
colorName: "yellow",
fontsize: "40",
myStyle1: "color: orange; font-size: 50px",
myStyle2: {
color: "blue",
fontSize: "60px"
},
myStyle3: {
textShadow: "orange 3px 3px 5px"
}
}
})
</script>
</body>
</html>
[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-JPCJ0Ov4-1675781372016)(vue-study.assets/image-20211206170540492.png)]
7. Conditional and list rendering
7.1 Conditional rendering
Conditional judgment statement:
v-ifv-else-ifv-else
7.1.1 v-if
v-ifDirectives are used to conditionally render a piece of content. This content will only be rendered if the directive's expression returns a truthy value.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app-13">
<h3 v-if="code == 1">Hello ：可以看到</h3>
<h3 v-if="flag">flag 为 true, 可以看到</h3>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app-13',
data: {
code: 1,
flag: false
}
})
</script>
</body>
</html>
[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-vG3XqOEB-1675781372017)(vue-study.assets/image-20211206171347121.png)]
7.1.2 v-else
v-elsedirective tov-ifrepresent the "else block" of
<div id="app-13">
<!-- v-else 标签需要紧跟在 v-if 的标签之后，中间不能有其他标签, 否则它将不会被识别 -->
<h3 v-if="code == 1">Hello ：可以看到</h3>
<h3 v-else>World ：可以看到</h3>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app-13',
data: {
code: 1
}
})
</script>
7.1.3 v-else-if
<div id="app-13">
分数 {
{code}}
对应的等级：
<h3 v-if="code >= 90">优秀</h3>
<h3 v-else-if="code >= 80">良好</h3>
<h3 v-else-if="code >= 70">中等</h3>
<h3 v-else-if="code >= 60">及格</h3>
<h3 v-else>挂科</h3>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app-13',
data: {
code: 85
}
})
</script>
[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-iRrwxXXH-1675781372018)(vue-study.assets/image-20211206173017480.png)]
7.1.4 v-show
v-show: Also used to display elements conditionally.Functionally, v-show and v-if have the same function, but the rendering process is different.
The difference between v-if and v-show:
v-ifis "true" conditional rendering, as it will ensure that event listeners and child components inside the conditional block are properly destroyed and recreated during the transition.v-ifAlso lazy : if the condition is false on initial render, do nothing - the conditional block won't start rendering until the condition becomes true for the first time.- In contrast,
v-showit's much simpler - the element is always rendered no matter what the initial condition is, and is simply toggled based on CSS. - In general,
v-ifhas a higher switching overhead, whilev-showhas a higher initial rendering overhead. Therefore,v-showit is betterv-ifbetter to use if conditions rarely change during runtime.
7.2 List rendering
During the encoding process, an error was found on the web page:
Uncaught Error: Bootstrap's JavaScript requires jQuery at bootstrap.min.js:6
Solution: When introducing the JQuery file, just put it in front of the bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app-14">
<ul>
<li v-for="c in categories">
<a :href="'query?cid=' + c.cid">{
{c.cname}}</a>
</li>
</ul>
<table class="table table-bordered">
<tr>
<th>学号</th>
<th>照片</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr>
<template v-for="(s, index) in stu">
<tr :id="'tr' + s.stuNum">
<td>{
{s.stuNum}}</td>
<td>
<img height="30" :src="s.stuImg" />
</td>
<td>{
{s.stuName}}</td>
<td>
<!-- {
{s.stuGender == 'M' ? '男' : '女'}} -->
<img v-if="s.stuGender == 'M'" src="img/m.bmp">
<img v-else src="img/f.bmp">
</td>
<td>{
{s.stuAge}}</td>
<td>
<a class="btn btn-danger" :href="'stu/delete?cid=' + s.stuNum">删除</a>
<a class="btn btn-success" :href="'stu/update?cid=' + s.stuNum">修改</a>
</td>
</tr>
</template>
</table>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app-14',
data: {
categories:[
{
cid: 1,
cname: "华为"
},
{
cid: 2,
cname: "小米"
},
{
cid: 3,
cname: "OPPO"
},
{
cid: 4,
cname: "VIVO"
}
],
stu: [
{
stuNum: "10010",
stuImg: "img/1.jpg",
stuName: "Tom",
stuGender: "M",
stuAge: 20
},
{
stuNum: "10011",
stuImg: "img/2.jpg",
stuName: "Joker",
stuGender: "M",
stuAge: 21
},
{
stuNum: "10012",
stuImg: "img/3.jpg",
stuName: "Ling",
stuGender: "F",
stuAge: 20
},
{
stuNum: "10013",
stuImg: "img/1.jpg",
stuName: "Jack",
stuGender: "F",
stuAge: 18
},
]
}
})
</script>
</body>
</html>