拆解Vue文件

Vue中的根标签，template，script，style记住这三个外部大标签。今天主要来记录一下script内的标签内的小标签。

【一】总体结构📔

当我们新建一个vue文件时，其vue文件就会自我生成一份最原始的结构代码。

<template>
</template>
<script>
    export default {
        name: "llll"
    }
</script>
<style scoped>
</style>

【二】template标签📖

<template v-if="ok">
    <!--它是可以显示标签种的内容，但是dom结构不存在template标签。
    vue对template属性至进行编译，并将编译后的dom替换掉vue实例绑定的元素。
    template，只能存在一个根元素，如果存在多个需要使用v-if、v-else、v-else-if判定只显示一个。
    该标签属性值可以使用，vue实例中data、methods定义的数据（在script中的）。
    它本质上就是一个占位符-->
    <h1>第一个vue</h1>
    <p>段落</p>
    <h2 v-show="ok">Hello!</h2>
</template>

【三】样式style📕

<style scoped>
    <!--scoped 私有作用域，原理就是编译时，给每个组件中所有的dom节点样式提娜佳唯一data属性
    深度作用选择器 例如影响子组件，可以使用 >>> 操作符。
    -->
    .a >>> .b { /* ... */ }
    <!--/deep/ 是 >>> 别名 -->
    .a /deep/ .b { /* ... */ }
</style>

【四】脚本script📗

<script>
    import '../common/mainStyle.css'   //引入样式
    export default {
        name: "llll",
        data() { //对应template标签中的属性的值
            return {};
        },
        methods: {
            // 组件的方法
        },
        watch: {
            // watch擅长处理的场景：一个数据影响多个数据
        },
        computed: {
            // computed擅长处理的场景：一个数据受多个数据影响
        },
        beforeCreate: function() {
            // 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
        },
        created: function() {
            // 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，
            // 属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
        },
        beforeMount: function() {
            // 在挂载开始之前被调用：相关的 render 函数首次被调用。
        },
        mounted: function() {
            // 编译好的HTML挂载到页面完成后执行的事件钩子
            // el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
            // 此钩子函数中一般会做一些ajax请求获取数据进行数据初始化
        },
        beforeUpdate: function() {
            // 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改
            // 状态，这不会触发附加的重渲染过程。
        },
        updated: function() {
            // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
            // 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大
            // 多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
            // 该钩子在服务器端渲染期间不被调用。
        },
        beforeDestroy: function() {
            // 实例销毁之前调用。在这一步，实例仍然完全可用。
        },
        destroyed: function() {
            // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移
            // 除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
        }
    };
</script>

【四一】vue中computed📚

computed的每一个计算属性都会被缓存起来，只要计算属性所依赖的属性发生变化，计算属性就会重新执行，视图也会更新。

      name: "llll",
        data() { //对应template标签中的属性的值
            return {
                a:1,
                b:11,
                c:22
            };
        },
        computed: {
            // computed擅长处理的场景：一个数据受多个数据影响
            pageType () {
                return this.a + this.b  + this.c;
            }
        }