vue初使用实例之笔记本

作者：AllinToyou | 2024-06-16 20:58:30

踩

vue初使用实例之笔记本


<!DOCTYPE html>
 
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <style>
        #app{
            width: 500px;
            margin:200px auto;
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 10px;
            box-shadow: 0 0 10px #ccc;
        }
        #app h2{
        
            text-align: center;
            margin-bottom: 10px;
        }
        #app ul{
            list-style: none;
            padding: 0;
            margin: 0;
            margin-top: 10px;
            border-top: 1px solid #ccc;
        }
        #app li{
            padding: 10px;
            border-bottom: 1px solid #ccc;
            cursor: pointer;
            transition: all 0.5s;
            background-color: #f5f5f5;
        }
        #app li:hover{
            background-color: #ccc;
        }
        #app input{
            margin-bottom: 10px;
            width: 85%;
            height: 30px;
            
        }
        #app button{
            margin-left: 10px;
            height: 30px;
            
        }
        #app li button{
            float: right;
        }
        </style>
    </head>
    <body>
        <div id="app">
            <h2>记事本</h2>
            <input  type="text" v-model="active" placeholder="请输入内容">
            <button  @click="add">添加</button>
            <ul>
                <li v-for="(item,index) in items" :key="item.id">
                    <span>
                        {{(index+1)+'.'}}
                    </span>
                    {{item.name}}
                    <button @click="del(item.id)">删除</button>
                </li>
                
            </ul>
            <div style="margin-top: 10px;">
                <span style="margin-left: 10px;">总计：{{items.length}}</span>
                <button style="float: right;margin-right: 10px;width: 9%;height: 25px;margin-top: 3px;margin-bottom:2px;" @click="clear">清空</button>
            </div>
           
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
 
          <script> 
           var app=new Vue({
            el: '#app',
            data: {
            items: [
                {id:1,name:'唱跳'},
                {id:2,name:'rap'},
                {id:3,name:'篮球'}
            ],
            active:'',
          
                },
            methods:{
                add(){
                    if(this.active){
                        this.items.push({
                            id:+new Date(),
                            name:this.active
                        })
                        this.active=''
                    }
                    else{
                        alert('请输入内容')
                    }
                },
                del(id){
                    this.items=this.items.filter(item=>item.id!==id)
                    console.log(id)
                },
                clear(){
                    this.items=[]
                }
            },
           
            })
            </script>
    </body>
</html>

这段代码是一个简单的记事本应用，使用Vue.js实现了添加、删除、清空功能。下面逐行解析代码：

<!DOCTYPE html>：声明这是一个HTML文档。
<html>：HTML文档的根元素。
<head>：头部元素，用于定义文档的一些元数据，如字符编码、标题、样式表等。
<meta charset="utf-8">：声明文档使用的字符编码为UTF-8。
<meta http-equiv="X-UA-Compatible" content="IE=edge">：告诉IE浏览器使用最新的渲染引擎。
<title></title>：文档的标题，这里为空。
<meta name="description" content="">：文档的描述，这里为空。
<meta name="viewport" content="width=device-width, initial-scale=1">：设置文档的视口，使其能够在不同设备上正常显示。
<link rel="stylesheet" href="">：引入样式表，这里为空。
<style>：内部样式表，样式定义在这个标签里。
#app{...}：定义了一个id为app的元素的样式。
<body>：文档的主体部分。
<div id="app">：一个id为app的div元素，这里将作为Vue实例的挂载点。
<h2>记事本</h2>：一个h2标签，显示标题。
<input type="text" v-model="active" placeholder="请输入内容">：一个文本输入框，使用v-model指令与Vue实例的active属性进行双向绑定。
<button @click="add">添加</button>：一个按钮，点击时调用Vue实例的add方法。
<ul>：一个无序列表，用于显示记事本条目。
<li v-for="(item,index) in items" :key="item.id">：一个li标签，使用v-for指令遍历Vue实例的items数组，并将每个数组项显示为一个li元素。
<span>{{(index+1)+'.'}}</span>：一个span标签，显示序号(index+1)。
{{item.name}}：显示每个条目的name属性。
<button @click="del(item.id)">删除</button>：一个按钮，点击时调用Vue实例的del方法，传入item.id作为参数。
<div style="margin-top: 10px;">：一个div元素，用于显示总计和清空按钮。
<span style="margin-left: 10px;">总计：{{items.length}}</span>：一个span标签，显示总条目数(items数组的长度)。
<button style="float: right;margin-right: 10px;width: 9%;height: 25px;margin-top: 3px;margin-bottom:2px;" @click="clear">清空</button>：一个按钮，点击时调用Vue实例的clear方法。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>：引入Vue.js库。
<script>：内部脚本，JavaScript代码定义在这个标签里。
var app=new Vue({...})：创建一个Vue实例，将其赋值给变量app。
el: '#app'：将Vue实例挂载到id为app的元素上。
data: {...}：定义Vue实例的数据对象。
items: [...]：定义一个数组items，用于存储记事本的条目。
active: ''：定义一个字符串active，用于存储用户输入的内容。
methods: {...}：定义Vue实例的方法。
add(){...}：add方法，用于向items数组添加一个新的条目。
del(id){...}：del方法，用于删除指定id的条目。
clear(){...}：clear方法，用于清空items数组。
</script>：脚本结束标签。

整个代码使用Vue.js实现了一个简单的记事本应用，包括添加条目、删除条目、清空条目等功能。使用Vue的数据绑定和方法调用，实现了视图与数据的双向同步。

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】