2025.8.12 vue学习笔记

vue的过渡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--导入Vue.js-->
    <script src="vue.js"></script>
    <!--可以独立的操作和修改 就像函数一样-->
    

</head>
<body>
    <!--前后端分离-->
    <!--div负责执行 是个模板-->

    <!--绑定一个标签-->
    <!--view层，模板-->
    <div id="app">
        {{message}}
    </div>


    <!--script层里面有vm这个对象，里面的el绑定了上面的div，data表示要传的数据-->
    
    <script>
        //标准的vm对象
        var vm=new Vue({
             el:"#app",//1.绑定一个标签 //vue的七大对象之一el
             //绑定data对象
             //model层，数据
             data:{//vue的七大对象之一：data
                message:"hello vue!"//2.放一个数据
             }
        });
        //控制台的操作可以让界面实时更新
    </script>

</body>
</html>

vue的基本语法
(1)v-bind

<div id="app">
        <span v-bind:title="message">
            点击就会出现！
        </span>
    </div>

v-bind就是鼠标停留在一串字中，就会出现提示，提示的字就是绑定的messag
aeb80fed84b708ea579ba0d40144cfb4_720

以"v-"开头的都称之为指令，指令带有前缀"v-"表示是vue提供的特殊特性
(2)v-if v-else v-else-if

    <div id="app">
        <h1 v-if="test==='A'">A</h1>
        <h1 v-else-if="test==='B'">B</h1>
        <h1 v-else>C</h1>
    </div>

(3)数组+for循环

<body>
    <div id="app">
        <li v-for="(item,index) in items">//index表示下标（从0开始）
            {{item.message}}--{{index}}
        </li>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                items:[
                    {message:"First"},
                    {message:"Second"},
                    {message:"Third"}
                ]
            }
        });
    </script>
</body>

方法的定义

<body>
    <div id="app">
        <button v-on:click="sayHi">click me</button>//button标签表示创建一个按钮
        //v-on:事件名="处理函数"，用来绑定事件，click就是一个鼠标点击事件
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                message:"hello Vue!"
            },
            methods:{//vue中的七大对象之一，所有的方法必须放到methods中，不能放到外面去
                sayHi:function(elment){
                    alert(this.message);
                }
            }
        });
    </script>
</body>

image

posted @ 2025-08-12 14:14  Granya  阅读(13)  评论(0)    收藏  举报