vue3初步学习

vue模版练习代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>实验4</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div style="border: 1px solid #949494;padding: 20px;margin-top: 10px;"><h2>1.文本插值</h2><div id="app1"><!-- v-html 解析js属性中的标签及属性 --><h3 v-html=message></h3><!-- 文本插值和表达式插值 --><div>{{a}}+{{b}}={{a+b}}</div></div><script>const text = {data(){return{message: '<p style="color:red">表达式求值</p>',a: 10,b: 20,}}}Vue.createApp(text).mount("#app1")</script></div><div style="border: 1px solid #949494;padding: 20px;margin-top: 10px;"><h2>2.常用vue命令</h2><div id="app2"><h3>{{message}}</h3><input type="button" value="-" @click="sub"><span :title="name">{{count}}</span><input type="button" value="+" @click="add"><br><!-- v-model 可以在组件上使用以实现双向绑定。 --><input v-model="taskText" placeholder="请输入内容..."><div>您输入的内容是:{{taskText}}</div></div><script>const app2 = {data(){return{message:'常用指令',count: 0,name: "计数器",taskText: ""}},methods:{sub(){if(this.count > 0)this.count -= 1},add(){this.count += 1}}}Vue.createApp(app2).mount("#app2")</script></div><div style="border: 1px solid #949494;padding: 20px;margin-top: 10px;"><h2>3.v-if指令</h2><div id="app3"><h3 v-if="cj">成绩等级</h3><p>姓名：{{name}}<br>成绩：{{score}}<br>等级：<span v-if="score>90">优秀</span><span v-else-if="score>80">良好</span><span v-else>一般</span></p></div><script>const student ={data(){return{cj: false,name: "张三",score: 85}}}Vue.createApp(student).mount("#app3")</script></div><div style="border: 1px solid #949494;padding: 20px;margin-top: 10px;"><h2>4.v-for指令</h2><div id="app4"><!-- 数组的参数为元素和下标 --><div v-for="(item,index) in arr">第{{index + 1}}个学生是{{item}}</div><!-- 对象数组的参数是元素 --><p v-for="item in stu">id:{{item.id}} ------- name:{{item.name}}</p><!-- 对象的参数是值，键和下标 --><p v-for="(value,key,i) in obj">{{i}}:{{key}}:{{value}}</p><!-- 数字 --><p v-for="i in 5">第{{i}}次循环</p></div><script>const student2 = {data(){return{// 数组arr:['张三','李四','王五'],// 对象数组stu:[{id: 1,name:'white'},{id: 2,name:'rose'},{id: 3,name:'mark'}],// 对象obj:{id: 1,name: "rose",sex: "female"}}}}Vue.createApp(student2).mount("#app4")</script></div><div style="border: 1px solid #949494;padding: 20px;margin-top: 10px;"><h2>5.综合实例--待办任务</h2><div id="app5"><!-- 输入框元素，用来新建待办任务 --><!-- prevent是修饰符，阻止默认事件，而去触发指定的事件 提交以后不会刷新页面--><form @submit.prevent="addTask"><span>新建任务</span><!-- placeholder属性用于设置表单输入框的占位符 --><input v-model="taskText2" placeholder="请输入任务..."><button>添加</button></form><!-- 有序列表，使用v-for来构建 --><ol><li v-for="(item,index) in todos">{{item}}<button @click="remove(index)">删除任务</button><hr></li></ol></div><script>const App5 = {data(){return{// 待办任务列表数据todos:[],// 当前输入的待办任务taskText2: "",}},methods: {// 添加一条待办任务addTask(){// 判断下输入框是否为空if(this.taskText2.length == 0){alert("请输入任务")// alert()方法是显示一条弹出提示消息和确认按钮的警告框。return}this.todos.push(this.taskText2)this.taskText2 = ""},// 删除待办remove(index){this.todos.splice(index,1)}}}Vue.createApp(App5).mount("#app5")</script></div></body>
</html>