vue学习07——学习笔记
学习来源：https://vuejs.bootcss.com/guide/#Vue-js-%E6%98%AF%E4%BB%80%E4%B9%88
前置条件：要在我们的html文件中引入vue.js ,如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script src="https://unpkg.com/vue@next">script>
body>
html>
1、v-for
格式举例：
li v-for="todo in todos">{{todo}}li>
<
含义：类似python中的for循环，将todos中的每一个todo循环遍历出来，放在li中，假设todos中有2个数，遍历出来如下:
<ul> <li>1<li> <li>2<li> ul>
其中数值1，2来源于todos中，todos的值以数组形式存放在下方：
data() {
return {
todos: [
{text: "吃饭"},
{text: "学习"},
{text: "打游戏"}
]
}
}
实战举例:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script src="https://unpkg.com/vue@next">script>
<div id="xuexi">
<ol>
<li v-for="todo in todos">{{ todo.text }}li>
ol>
div>
body>
<script>
const test =
{
data() {
return {
todos: [
{text: "吃饭"},
{text: "学习"},
{text: "打游戏"}
]
}
}
}
Vue.createApp(test).mount("#xuexi")
script>
html>
2、v-on
格式举例：
<button v-on:click="clickThing">v-on格式举例button>
含义：相当于点击事件，我们只需要在methods中2写入click时间，即可执行对应操作
实战举例：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script src="https://unpkg.com/vue@next">script>
<div id="xuexi">
<button v-on:click="submit">v-on举例，点击alert出数值1button>
div>
body>
<script>
const test =
{
methods:{
//v-on举例，点击alert出数值1
submit(){
alert(111111111)
}
}
}
Vue.createApp(test).mount("#xuexi")
script>
html>
3、v-if
格式举例：
<p v-if="seen">v-if格式举例，如果为真，则展示该p，否则隐藏p>
含义：及if语句，如果对应tag中的if为true时，执行对应操作。为false时执行另一操作。需要在data的返回结果中给定默认true还是false
实战举例：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script src="https://unpkg.com/vue@next">script>
<div id="xuexi">
<p v-if="seen">v-if格式举例，如果为真，则展示该div，否则隐藏p>
<button v-on:click="hidden">点击后将v-if修改为false，隐藏对应区域button>
div>
body>
<script>
const test = {
data() {
return {
seen:true //默认展示
}
},
methods:{
hidden(){
this.seen=false //隐藏
}
}
}
Vue.createApp(test).mount("#xuexi")
script>
html>
4、v-model
格式举例：
<input v-model="test"/>
含义：能够表单输入和应用状态之间的双向绑定，能够运用在以后的表单提交
实战举例：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script src="https://unpkg.com/vue@next">script>
<div id="xuexi">
<input type="text" placeholder="请输入用户名" v-model="formData.username"/>
<input type="password" placeholder="密码" v-model="formData.password"/>
<button v-on:click="submit">提交button>
div>
body>
<script>
const test =
{
data() {
return {
formData:[
{username:""},//用户名默认为空
{password:""},//密码默认为空
]
}
},
methods:{
//提交用户名和密码信息,并弹窗展示对应信息
submit(){
console.log(this.formData.username) //打印用户名
console.log(this.formData.password)//打印密码
}
}
}
Vue.createApp(test).mount("#xuexi")
script>
html>