VUE基础术语

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .active {
          color: red;
        }
        .bgc {
          background-color: lightblue;
        }
      </style>
</head>
<body>
    <!-- 挂载点 -->
    <div id="app">
        <!-- 跟组件 -->
        <p >用户名：{{neirong}}</p>
        <p v-html="ys"></p>
        <p v-bind:style="{color:myColor,backgroundColor:bgc}">Hello world</p>
        <p :class="[jh,bj]">好好学习</p>
    </div>
    <script>
        // 应用实例
        const app = Vue.createApp({
            data: function(){
                return{
                    // 将数据声明在返回对象中
                    neirong:'少壮不努力',
                    ys:'<em style="color:red;">老大徒伤悲</em>',
                    myColor: 'red',
                    bgc: 'yellow',
                    jh: 'active',
                    bj: 'bgc',
                }
            }
        })
        // 应用实例和挂载点进行绑定
       const nr = app.mount('#app')
    //    响应式
        nr.neirong = '老大徒伤悲'
    </script>
</body>
</html>
相关文章
