Vue基础使用之声明式渲染；v-bind；v-if；v-for；v-on；v-model；通过ref获取dom元素的值_鼠标悬停几秒钟查看此处动态绑定的提示信息-CSDN博客

本文链接：https://blog.csdn.net/zcyzcyjava/article/details/137827431

本文介绍了Vue.js中声明式渲染、v-bind属性绑定、条件渲染(v-if)、数组循环(v-for)、事件监听(v-on)、数据双向绑定(v-model)以及使用ref获取DOM元素的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Square Animation</title>

</head>
<body>
<div id="app">
    <h1>1.声明式渲染</h1>
    你好，vue
        {{ message }}
    <h1>2.v-bind绑定</h1>
    <span v-bind:title="title">鼠标悬停几秒钟查看此处v-bind动态绑定的提示信息！</span>
<!--    <span :title="title">鼠标悬停几秒钟查看此处v-bind动态绑定的提示信息！</span>-->
    <h1>3.v-if判断</h1>
    <p v-if="seen">你现在可以看到我了</p>
    <h1>4.v-for循环</h1>
    <ol>
        <li v-for="item in arr">
<!--            {{item.id}}-->
            {{item.name}}
        </li>
    </ol>
    <h1>5.v-on事件监听</h1>
    <button v-on:click="AlertClick">点击触发提示</button>
    <button @click="AlertClick">点击触发提示</button>
    <button @click="reserve">点击反转字符</button>
    <p>{{message}}</p>
    <h1>5.v-model数据双向绑定</h1>
    <input v-model="message">{{message}}
    <h1>6.通过ref获取dom元素的值</h1>
    <div style="width: 100px;height: 100px;background-color: red" @click="showColor($event)" ref="div"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>

    var app = new Vue({
        el : '#app',
        data : {
            message: '这是一个插值语法',
            title:'页面加载于'+new Date().toLocaleDateString(),
            seen:true,
            arr: [
                {id:1,name:'香蕉'},
                {id:2,name:'苹果'},
                {id:3,name:'橘子'}
            ]
        },
        methods: {
            AlertClick(){
                alert('点击触发事件')
            },
            reserve(){
                this.message=this.message.split('').reverse().join('')
            },
            showColor(e){
                alert(this.$refs.div.style.backgroundColor)
            }
        }
    })
</script>
</body>
</html>