5.Vue基础学习
五.Vue基础学习
1.什么是Vue
2.如何开始Vue
3.Vue的使用
4.Vue关键字的使用
5.Vue实例
6.Element-UI的简介
7.Element-UI的使用
五.Vue基础学习
1.什么是Vue
- vue是javascript的框架
- 能够动态构建用户界面
2.如何开始Vue
- ①引入Vue.js
- ②新建Vue对象（绑定数据节点，渲染页面）
- ③定义数据节点（dom对象）
3.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>Documenttitle>
head>
<body>
<div id="app">
{{title}}
<p>欢迎{{user.username}}p>
div>
<script src="vue.js">script>
<script>
new Vue({
el: '#app', //css3选择器语法，element的简写
data: {
title: '第一个vue程序',
user: {
username: 'hellen',
age: 18,
},
},
})
script>
body>
html>
②属性位置使用数据模型（单向绑定）
- 单向绑定（更改数据模型 dom对象变，更改dom对象数据模型不变）
v-bind - 练习
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>Documenttitle>
head>
<body>
<div id="app">
<a v-bind:href="site">{{company}}a>
div>
<script src="vue.js">script>
<script>
new Vue({
el: '#app',
data: {
company: '尚硅谷',
site: 'http://www.atguigu.com',
},
})
script>
body>
html>
③属性位置使用数据模型（双向绑定）
-
双向绑定（属性变，数据模型变。数据模型变，属性也变）
v-model:（注意，只用在与用户交互的dom对象中）
可以简略写为: -
MVVM
通过dom对象监听器和数据绑定器实现双向绑定
view（html）和model（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>Documenttitle>
head>
<body>
<div id="app">
<input type="text" :value="company" />
<input type="text" v-model:value="company" />
<a v-bind:href="site">{{company}}a>
div>
<script src="vue.js">script>
<script>
new Vue({
el: '#app',
data: {
company: '尚硅谷',
site: 'http://www.atguigu.com',
},
})
script>
body>
html>
④属性位置的事件监听调用模型方法
- 事件调用方法
v-on:click
简洁方法@click - 练习
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>Documenttitle>
head>
<body>
<div id="app">
<button v-on:click="hello">点击事件button>
<button @click="hello">点击事件button>
div>
<script src="vue.js">script>
<script>
new Vue({
el: '#app',
methods: {
hello() {
alert('hello')
},
},
})
script>
body>
html>
⑤Vue对象的计算属性和方法属性
- 计算属性和方法属性
methods:{}
computed:{}
第一个每次调用都会重新执行，第二个每次调用都会缓存一次结果，之后调用不会再次执行 - 练习
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>Documenttitle>
head>
<body>
<div id="app">
<p>{{message}}p>
<p>翻转字符串：{{ message.split('').reverse().join('')}}p>
计算属性：{{reverseMessage}}
方法：{{reversed()}} {{reversed()}} {{reversed()}}
方法：{{reverseMessage()}}
div>
<script src="vue.js">script>
<script>
new Vue({
el: '#app',
data: {
message: 'hello',
},
methods: {
reversed() {
console.log('方法被调用')
return this.message.split('').reverse().join('')
},
},
//属性方式（只会调用一次）
computed: {
reverseMessage() {
return this.message.split('').reverse().join('')
},
},
})
script>
body>
html>
⑥计算属性如何实现双向绑定
- 引言
计算属性可以结果可以直接写在input对象的v-model属性里面，此时更改计算属性引用的Vue对象模型相应的会更改计算属性结果，但是更改计算属性结果，如何更改相应的Vue对象模型 - 使用
计算属性每个方法都有get，set方法
get是获取值时调用的
set是值改变时调用的 - 例子
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>Documenttitle>
head>
<body>
<div id="app">
姓: <input placeholder="First Name" v-model="firstName" /><br />
名: <input placeholder="Last Name" v-model="lastName" /><br />
全名：{{fullName1}}
姓名1(单向): <input placeholder="Full Name1" v-model="fullName1" /><br />
姓名2(双向): <input placeholder="Full Name2" v-model="fullName2" /><br />
div>
<script src="vue.js">script>
<script>
new Vue({
el: '#app',
data: {
firstName: 'Helen',
lastName: 'Yao',
},
computed: {
fullName1() {
console.log('计算fullName1')
return this.firstName + ' ' + this.lastName
},
fullName2: {
get() {
console.log('计算fullName2')
return this.firstName + ' ' + this.lastName
},
//当给fullName2指定新值时自动调用：实现双向绑定
set(value) {
console.log('fullName2 的 setter')
const names = value.split(' ')
this.firstName = names[0]
this.lastName = names[1]
},
},
},
})
script>
body>
html>
⑦监听事件实现双向绑定
- 监听事件
一个数据模型的属性对应一个监听事件的方法，名称都相同。
当数据模型的属性改变时调用监听方法。 - 监听事件
能够实现双向绑定。
watch: - 例子
<body>
<div id="app">
姓: <input placeholder="First Name" v-model="firstName" /><br />
名: <input placeholder="Last Name" v-model="lastName" /><br />
姓名: <input placeholder="Full Name" v-model="fullName" /><br />
div>
<script src="vue.js">script>
<script>
new Vue({
el: '#app',
data: {
firstName: 'Helen',
lastName: 'Yao',
// fullName: 'Helen Yao',
},
watch: {
//当firstName改变时自动调用
firstName(value) {
console.log('watch firstName')
this.fullName = value + ' ' + this.lastName
console.log(this.fullName)
},
//当lastName改变时自动调用
lastName(value) {
console.log('watch lastName')
this.fullName = this.firstName + ' ' + value
}
},
})
script>
body>
⑧条件渲染）
- 前言
根据属性值来确定dom对象的展示与否 - 使用
v-if v-else
v-show v-show - 两者区别
前者是通过删除创建dom对象来完成逻辑的，后者是通过隐藏节点（设置disabled）完成逻辑的。
不切换内容多时使用v-if，切换内容少时使用v-show - 例子
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>Documenttitle>
head>
<body>
<div id="app">
<input type="checkbox" v-model="ok" />是否同意许可协议<br />
<button v-if="ok">下一步button>
<button v-else disabled>下一步button>
<button v-show="ok">yes下一步button>
<button v-show="!ok">no上一步button>
div>
<script src="vue.js">script>
<script>
new Vue({
el: '#app',
data: {
ok: 'false', //是否同意许可协议
},
})
script>
body>
html>
⑨列表渲染
- 批量渲染
v-for - 使用
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>Documenttitle>
head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in userList">
{{index}} {{item.username}} {{item.age}}
li>
ul>
div>
<script src="vue.js">script>
<script>
new Vue({
el: '#app',
data: {
userList: [
{ username: 'helen', age: 18 },
{ username: 'peter', age: 28 },
],
},
})
script>
body>
html>
⑩实例的生命周期
- 生命周期
created 在创建完成Vue对象后执行。
mounted 在渲染Dom对象后执行。 - 对比
先创建，再渲染。
两者都能够获取Vue对象中的属性和方法。
created操作dom对象是未渲染的，mounted操作对象是渲染后的。 - 例子
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>Documenttitle>
head>
<body>
<div id="app">
<h3 id="h3">{{ message }}h3>
div>
<script src="vue.js">script>
<script>
new Vue({
el: '#app',
data: {
message: '床前明月光',
},
// 页面在内存中已经初始化完毕：
// 可以操作 data 中的数据、调用methods中的方法
// 但是数据尚未被渲染到页面中：用户看不见
created() {
console.log('created')
//可以操作 data 中的数据
console.log(this.message)
//可以调用methods中的方法
this.show()
//无法取出dom节点取数据，说明用户无法在浏览器中看见这个内容
console.log(document.getElementById('h3').innerText)
},
// 数据已经被渲染到页面中
mounted() {
// 第四个被执行的钩子方法
console.log('mounted')
//可以取出dom节点取数据，说明用户已经在浏览器中看见内容
console.log(document.getElementById('h3').innerText)
},
methods: {
show() {
console.log('show方法被调用')
},
},
})
script>
body>
html>
4.Vue关键字的使用
①在dom对象的文本块中
- 用{{}}调用Vue对象的方法或者属性
②在dom对象的属性中
- 绑定属性，方法
v-bind: 单向绑定
v-model:（：） 双向绑定 - 绑定事件监听
v-on:（@） - 渲染dom对象执行
v-if: v-else:
v-show - 批量渲染
v-for:
③vue对象的初始化
- el:
绑定vue作用的范围，用id选择器选中div - data:
绑定vue作用的数据模型 - methods:
绑定vue作用的方法（执行多次） - computed:
绑定vue作用的方法（执行一次缓存）
注意有set get方法（调用和改变时候） - watch:
绑定Vue作用的方法（直接绑定到数据模型中的每一个数据上，数据改变，调用方法） - created:
创建完成vue对象后调用的方法 - mounted:
渲染完成vue对象后调用的方法
5.Vue实例
①后端接口
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
package com.atguigu.mybatisplus.controller;
import com.atguigu.mybatisplus.entity.User;
import com.atguigu.mybatisplus.service.UserService;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
import java.util.List;
@RestController
@RequestMapping("/user")
@CrossOrigin
public class UserController {
@Resource
private UserService userService;
@GetMapping("/list")
public List<User> list(){
//运用mybatisplus
return userService.list();
}
}
②前端
- 用axios库来发送请求
- 用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>Documenttitle>
head>
<body>
<div id="app">
<table>
<tr>
<td>序号td>
<td>姓名td>
<td>年龄td>
<td>emailtd>
tr>
<tr v-for="(item,index) in userList">
<td>{{index+1}}td>
<td>{{item.name}}td>
<td>{{item.age}}td>
<td>{{item.email}}td>
tr>
table>
div>
<script src="vue.js">script>
<script src="axios.js">script>
<script>
new Vue({
el: '#app',
data: {
userList: [],
},
//对象创建完立马发送ajax请求
created() {
this.showUserList()
},
methods: {
showUserList() {
//通过axios访问远程接口
const request = axios.create({
baseURL: 'http://localhost:8080',
})
request({
method: 'get',
url: '/user/list',
})
.then((response) => {
console.log('获取数据成功', response)
this.userList = response.data
})
.catch((error) => {
console.log('获取数据失败', error)
})
},
},
})
script>
body>
html>
6.Element-UI的简介
- elementUI是饿了么发布的前端组件库（PC端）
- mintUI是饿了么发布的前端组件库（移动端）
- 能够提供基本的UI组件（基于Vue的）
表格，列表，按钮，css文件等 - 理解CDN服务器
CDN：内容分发网络。
即比如说中国北京访问美国纽约的服务器，很慢，那么可以在中国设置CDN，其内容可以被同步，然后中国北京直接访问中国的CDN即可。 - 一般脚本都放在CDN上，故我们使用库也在CDN上引
7.Element-UI的使用
①引入Element-UI
- head上
<link
rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
- body中引入脚本（基于vue的，引在vue后面）
<script src="vue.js">script>
<script src="axios.js">script>
<script src="https://unpkg.com/element-ui/lib/index.js">script>
②看文档开发
- 确定版本
f12+看对应文档版本 - 表格数据
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>Documenttitle>
<link
rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
head>
<body>
<div id="app">
<div>
<el-button>默认按钮el-button>
<el-table :data="userList" stripe border style="width: 100%">
<el-table-column type="selection" width="55">el-table-column>
<el-table-column
type="index"
width="55"
label="序号"
>el-table-column>
<el-table-column prop="name" label="姓名">el-table-column>
<el-table-column prop="age" label="年龄">el-table-column>
<el-table-column prop="email" label="email">el-table-column>
el-table>
div>
div>
<script src="vue.js">script>
<script src="axios.js">script>
<script src="https://unpkg.com/element-ui/lib/index.js">script>
<script>
new Vue({
el: '#app',
data: {
userList: [],
},
//对象创建完立马发送ajax请求
created() {
this.showUserList()
},
methods: {
showUserList() {
//通过axios访问远程接口
const request = axios.create({
baseURL: 'http://localhost:8080',
})
request({
method: 'get',
url: '/user/list',
})
.then((response) => {
console.log('获取数据成功', response)
this.userList = response.data
})
.catch((error) => {
console.log('获取数据失败', error)
})
},
},
})
script>
body>
html>
- 按钮数据
看文档开发即可。