VUE基础
以下内容参考自下面视频：
https://www.bilibili.com/video/BV1y7411y7am
1.单向数据绑定 v-bind
v-bind指令，单向数据绑定，一般用在标签属性中,获取值
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<div id="app">
<h1 v-bind:title="message">
{{content}}
h1>
<h2 :title="message">
{{content}}
h2>
div>
<script src="vue.min.js">script>
<script>
new Vue({
el: '#app',
data: {
content:'我是标题',
message:'页面加载于 '+new Date().toLocaleString()
}
})
script>
body>
html>
执行结果如下
2.双向数据绑定 v-model
v-bind：用户在浏览器页面修改数据，取的的值的数据不变
v-model ：用户在浏览器页面修改数据，取的的值的数据随之改变
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<div id="app">
<input type="text" v-bind:value="searchMap.keyword"/>
<input type="text" v-model:value="searchMap.keyword"/>
{{searchMap.keyword}}
div>
<script src="vue.min.js">script>
<script>
new Vue({
el: '#app',
data: {
searchMap:{
keyword:'尚硅谷'
}
}
})
script>
body>
html>
结果如下，
修改v-bind绑定的值
修改v-model绑定的值
3.vue修饰符
v-on:submit.prevent
阻止表单提交，转为执行函数
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<div id="app">
<form action="05 vue事件操作.html" v-on:submit.prevent="onSubmit">
<input type="text" v-model="user.username"/>
<button type="submit">保存button>
form>
div>
<script src="vue.min.js">script>
<script>
new Vue({
el: '#app',
data: {
user:{}
},
methods:{
onSubmit(){
if(this.user.username){
console.log("提交表单")
}else{
alert("请输入用户名")
}
}
}
})
script>
body>
html>
4.vue指令 v-if
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<div id="app">
<input type="checkbox" v-model="ok"/>是否选中
<h1 v-if="ok">尚硅谷h1>
<h1 v-else>谷粒学院h1>
div>
<script src="vue.min.js">script>
<script>
new Vue({
el: '#app',
data: {
ok:false
}
})
script>
body>
html>
5.vue指令 v-for
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<div id="app">
<ul>
<li v-for="n in 10">{{n}}li>
ul>
<ol>
<li v-for="(n,index) in 10">{{n}} -- {{index}}li>
ol>
<hr/>
<table>
<tr v-for="user in userList">
<td>{{user.id}}td>
<td>{{user.username}}td>
<td>{{user.age}}td>
tr>
table>
div>
<script src="vue.min.js">script>
<script>
new Vue({
el: '#app',
data: {
userList:[
{id:1,username:'helen',age:18},
{id:2,username:'jobs',age:26},
{id:3,username:'linda',age:25}
]
}
})
script>
body>
html>
6.vue组件
注意此处的组件的名字Navbar是可以随意定义的
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<div id="app">
<Navbar>Navbar>
div>
<script src="vue.min.js">script>
<script>
new Vue({
el: '#app',
components: {
//组件的名字
'Navbar':{
//组件的内容
template:' - 首页
- 学员管理
'
}
}
})
script>
body>
html>
7.vue全局组件
7.1 新建Navbar.js文件
//定义全局组件
Vue.component('Navbar',{
template:' - 首页
- 学员管理
- 讲师管理
'
})
7.2 在vue中引入Navbar.js
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<div id="app">
<Navbar>Navbar>
div>
<script src="vue.min.js">script>
<script src="./components/Navbar.js">script>
<script>
new Vue({
el: '#app',
data: {
}
})
script>
body>
html>
8.vue生命周期
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<div id="app">
<h1>
hello
h1>
div>
<script src="vue.min.js">script>
<script>
new Vue({
el: '#app',
data: {
},
created(){
debugger
//页面渲染之前执行
console.log("created...")
},
mounted(){
debugger
//页面渲染之后执行
console.log("mounted...")
}
})
script>
body>
html>
9.vue路由
导入vue和vue-router的顺序不能变
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<div id="app">
<h1>Hello App!h1>
<p>
<router-link to="/">首页router-link>
<router-link to="/student">会员管理router-link>
<router-link to="/teacher">教师管理router-link>
p>
<router-view>router-view>
div>
<script src="vue.min.js">script>
<script src="vue-router.min.js">script>
<script>
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Welcome = { template: '欢迎' }
const Student = { template: 'student list' }
const Teacher = { template: 'teacher list' }
// 2. 定义路由
// 每个路由应该映射一个组件。
const routes = [
{ path: '/', redirect: '/welcome' }, //设置默认指向的路径
{ path: '/welcome', component: Welcome },
{ path: '/student', component: Student },
{ path: '/teacher', component: Teacher }
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 从而让整个应用都有路由功能
const app = new Vue({
el: '#app',
router
})
script>
body>
html>
10.axios
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<div id="app">
<table>
<tr v-for="user in userList">
<td>{{user.name}}td>
<td>{{user.age}}td>
tr>
table>
div>
<script src="vue.min.js">script>
<script src="axios.min.js">script>
<script>
new Vue({
el: '#app',
data: { //在data定义变量和初始值
//定义变量，值位空数组
userList:[]
},
created(){ //页面渲染之前执行
//调用定义的方法
this.getUserList()
},
methods:{//编写具体的方法
//创建方法，查询所有用户数据
getUserList(){
//使用axios发送ajax请求
//axios.提交方式("请求接口路径").then(箭头函数).catch(箭头函数)
axios.get("data.json")
.then((response) => {
//response就是请求之后返回的数据
console.log(response)
this.userList = response.data.data.items;
//console.log(this.userList)
})//请求成功执行then方法
.catch((error) => {
});//请求失败执行catch方法
}
}
})
script>
body>
html>
关于then方法后的赋予数据的问题，由查询控制台的response决定
如下所示：data->data->items
10.1 伪造json数据
{
"success":true,
"code":20000,
"message":"成功",
"data":{
"items":[
{"name":"张飞","age":25},
{"name":"关羽","age":28},
{"name":"刘备","age":32}
]
}
}
10.2 运行结果
