HMVue3.5.1【vue组件】

1 Test.vue

2 $mount 和 el

<!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>
</head>
<body>
    
    <div id="app">{{username}}</div>

    <script src="./lib/vue-2.6.12.js"></script>
    <script>
        const vm = new Vue({
            // el: '#app',
            data: {
                username: 'admin'
            }
        })
        vm.$mount('#app') //与el: '#app'作用一致，效果相同
    </script>

</body>
</html>

View Code

3 课件

4 源码

<template>
<div>

    <div class="test-box">
        <h1>这是用户自定义的Test.vue--->{{username}}</h1>
        <button @click="changeName">修改用户名字</button>
    </div>
    <div></div>

</div>
</template>



<script>
//默认导出（固定写法）
export default {

    // data 数据源
    // 注意：.vue 组件中的 data 不能像之前一样指向对象,组件中的 data 必须是一个函数
    /*//这样写在.vue中是错误的
    data: {
        username: 'zs'
    }*/
    data(){
        return{
            username: 'admin'
        }
    },

    methods: {
        changeName(){
            console.log(this) //在组件中， this 就表示当前组件的实例对象vm
            this.username = 'root'
        }
    },
    // 当前组件中的侦听器
    watch: {},
    // 当前组件中的计算属性
    computed: {},
    // 当前组件中的过滤器
    filters: {}

}
</script>


//lang默认值是css
<style scoped lang="less"> 
    .test-box{
        background-color: tomato;
        /* 普通css不支持以下这种写法。但less支持，less需要在style标签中开启 */
        h1{
            color: pink;
        } 
    }
</style>