vue中常用的术语与使用方式

1.代码部分

<!DOCTYPE html>
<html lang="zh-CN">
<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>vue常用术语</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <!-- 1. 挂载点(容器/盒子): 应用实例作用域-->
    <div id="app">
        <!-- 根组件 -->
        <p>用户名: {{username}}</p>
    </div>
<script>
    // 2. 作用实例
    const app = Vue.createApp({
        // 根组件配制项
        data () {
            return {
                // 将组件中要用到的数据全部声明在这个返回的对象中
                username: '王铁蛋',
            };
        },
    });
    // 3. 根组件实例: 应用实例与挂载点进行绑定
    const vm = app.mount('#app');
    // 4. 数据注入: 声明的数据会自动注入到当前应用实例中
    // console.log(vm.$data.username);
    // 用根组件进行访问
    console.log(vm.username);
    // 5. 响应式
    vm.username = '张铁锤';
    // 1. 没有进行dom操作,选择元素,更新内容
    // 2. 没有进行事件绑定,这些都是vue在背后默默完成
</script>
</body>
</html>
1.代码部分

相关文章
