案例一：入门，基本语法----点击事件，参数双向绑定
<!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 } = VueVue.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 = falsethis.buttonTitle = '注销'this.userName = ''this.password = ''} else {alert('请输入账号Miami')}},logout() {this.needlogin = truethis.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>
