demo.html

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>帅哥</title>
</head>
<body>

    <div id="app">
    {{ message }}
        <div>{{ (num) }}</div>
        <div>{{ (bool) }}</div>
        <div>{{ (bool) ? 'a' : 'b'}}</div>
        <div>{{ arr.find(v => v.name === '张三')?.age }}</div>
        <div v-html="htmlStr"></div>
        <div>
            <input type="text" v-model="value">
        <div>{{ value }}</div>
        </div>
        <div>
            <div v-if="color === '红色'" >红色</div>
            <div v-if="color === '蓝色'" >白色</div>
            <div v-else >黄色</div>
        </div>
        <div>
            <a :href="`https://www.taobao.com`">搜索一下</a >
        </div>
        <div style="width: 100px; height: 100px; background-color: red" v-on:click="clickDiv" id="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: 'Hello Vue!',
                num:1,
                bool:false,
                arr:[{name:'张三',age:20}],
                htmlStr:`<strong style="color: red">鹏贤哥哥真棒</strong>`,
                value:``,
                color:`黑色`,
                url: `https://www.taobao.com`
            },
            methods:{
                clickDiv(){
                    console.log('我点击了div')
                    document.getElementById('div').style.backgroundColor = 'blue'
                }
            }
        })
    </script>
</body>
</html>