Vue练习案例（上）
案例一：入门，基本语法----点击事件，参数双向绑定
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue demo</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<div id="app1" style="text-align: center;">
<h1>{{ count }}</h1>
<button v-on:click="clickButton">点击</button>
</div>
<div id="Application" style="text-align: center;">
<h1>{{title}}</h1>
<div v-if="needlogin">账号:<input v-model="userName" type="text" /></div>
<div v-if="needlogin">密码:<input v-model="password" type="password" /></div>
<div v-on:click="click"
style="border-radius: 30px;width: 100px; margin:20px auto; color: white; background-color: blue;">
{{buttonTitle}}</div>
</div>
<script>
// const { createApp, ref } = Vue
Vue.createApp({
data() {
return {
count: 0,
needlogin: true,
userName: "",
password: "",
buttonTitle: "登录",
title: '未登录，请先登录!'
}
},
methods: {
clickButton() {
this.count = this.count + 1
},
click() {
if (this.needlogin) {
this.login();
} else {
this.logout();
}
},
login() {
if (this.userName.length > 0 && this.password.length > 0) {
alert(`userName=${this.userName}, password=${this.password}`)
this.title = `欢迎您：${this.userName}`
this.needlogin = false
this.buttonTitle = '注销'
this.userName = ''
this.password = ''
} else {
alert('请输入账号Miami')
}
},
logout() {
this.needlogin = true
this.buttonTitle = '登录'
this.title = '未登录，请先登录!'
}
},
}).mount('#Application');
</script>
</html>
案例二：V-for用法
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue demo</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app1">
<div v-for="item in list">
{{item}}
</div>
</div>
<div id="app2">
<ul>
<li v-for="(item,index) in handle(list)">
<div>{{index}}</div>
<div>{{item.name}}</div>
<div>{{item.num}}</div>
</li>
</ul>
<button @click="click">逆序</button>
</div>
=========
<div id="app3">
<ol>
<li v-for="(value,key,index) in person" :key="index">
{{index}}-{{key}}:{{value}}
</li>
</ol>
</div>
</body>
<script>
Vue.createApp({
data() {
return {
list: [1, 2, 3, 4, 5]
}
},
}).mount("#app1");
Vue.createApp({
data() {
return {
list: [
{
name: "liu1",
num: 3,
},
{
name: "liu21",
num: 5,
},
{
name: "liu31",
num: 1,
},
]
}
},
methods: {
click(){
this.list.reverse()
},
handle(data){
return data.filter(obj=> obj.name != 'liu21')
}
},
}).mount("#app2");
Vue.createApp({
data() {
return {
person:{
name:"zhang",
age:14
}
}
},
}).mount("#app3");
</script>
</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>待办任务列表</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<!-- push pop尾部追加或移除；shift unshift头部追加或移除，splice分割 -->
<body>
<div id="Application">
<!--输入框元素，用来新建待办任务-->
<form @submit.prevent="addTask">
<span>新建任务</span>
<input v-model="taskTitle" placeholder="请输入任务标题..." />
<input v-model="taskDesc" placeholder="请输入任务描述..." />
<button>添加</button>
</form>
<!--有序列表，使用v-for来构建-->
<ol>
<li v-for="(item,index) in todos">
{{item}}
<button @click="remove(index)">
删除任务
</button>
<br/>
</li>
</ol>
</div>
</body>
<script>
Vue.createApp({
data() {
return {
todos: [
{
title: "学习",
description: "学习vue技术"
},
{
title: "写作",
description: "创作小说"
},
{
title: "娱乐",
description: "玩少年三国志"
},
],
taskTitle: "",
taskDesc: ""
}
},
methods: {
addTask() {
if (this.taskTitle.length == 0) {
alert('请输入任务标题')
return
}
if (this.taskDesc.length == 0) {
alert('请输入任务描述')
return
}
this.todos.push({ taskTitle: this.taskTitle, taskDesc: this.taskDesc })
this.taskTitle = ""
this.taskDesc = ""
},
remove(index) {
this.todos.splice(index, 1)
}
}
}).mount("#Application");
</script>
</html>
案例四：计算属性
<!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>计算属性-基于存储属性</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<!-- push pop尾部追加或移除；shift unshift头部追加或移除，splice分割 -->
<body>
<div id="Application">
<div>{{type}} {{count}}</div>
<button @click="click">增加</button>
<button @click="jian">减少</button>
</div>
</body>
<script>
Vue.createApp({
data() {
return {
count: 0
}
},
computed:{
type(){
return this.count>5?"大":"小"
}
},
methods: {
click(){
this.count = this.count+1;
},
jian(){
this.count = this.count-1;
}
}
}).mount("#Application");
</script>
</html>