Vue2.5开发去哪儿网App 第三章笔记上

2022-09-22 21:24:56

1. vue 生命周期函数

　　每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些生命周期钩子，这就给我们提供了执行自定义逻辑的机会

生命周期图示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue实例生命周期函数</title>
    <script src="../../vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
    var vm = new Vue({
        el:‘#app‘,
        data:{
            test:‘template option‘
        },
        template:‘<div>{{test}}</div>‘,
        beforeCreate:function () {
            // 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

            console.log(‘beforCreate‘)
        },
        created:function () {
            // 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

            console.log(‘created‘)
        },
        beforeMount:function () {
            // 在挂载开始之前被调用：相关的 render 函数首次被调用

            console.log(‘beforeMount‘)
            console.log(this.$el);
        },
        mounted:function () {
            // el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

            console.log(‘mounted‘)
            console.log(this.$el);

            this.$data.test = ‘我改变了test‘
            // beforeUpdate   updated方法


        },
        beforeDestroy:function () {
            // 实例销毁之前调用。在这一步，实例仍然完全可用。
            
            console.log(‘beforeDestrory‘)
        },
        destroyed:function () {
            // ue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
            
            console.log(‘destroyed‘)
        },
        beforeUpdate:function () {
            // 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

            console.log(‘boforeUpdate‘)
        },
        updated:function () {
            // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
            // 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。


            console.log(‘updated‘)
            this.$destroy();
            // 完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。
            // 触发 beforeDestroy 和 destroyed 的钩子。
        }
    })
</script>
</body>
</html>

View Code

2. 模板语法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
    <script src="../../vue.js"></script>
</head>
<body>
<div id="app">
    {{name}}
    <!--#插值表达式-->
    <div v-text="name"></div>
    <!--文本-->
    <div v-html="name" :title="title"></div>
    <!--被插入的内容都会被当做 HTML —— 数据绑定会被忽略-->

    <div v-text="age + ‘岁‘"></div>

    <!--#过滤器-->
    {{ msg | capitalize }}

    <a v-bind:href="url">百度一下</a>


    v-bind 缩写
    <!-- 完整语法 -->
    <a v-bind:href="url"></a>
    <!-- 缩写 -->
    <a :href="url"></a>


    v-on 缩写
    <!-- 完整语法 -->
    <a v-on:click="doSomething"></a>
    <!-- 缩写 -->
    <a @click="doSomething"></a>


</div>
<script>
    var app = new Vue({
        el:‘#app‘,
        data:{
            name:‘<h1>Dell</h1>‘,
            title:‘this is a title‘,
            age:20,
            msg:‘this is a message‘,
            url:‘https://www.baidu.com/‘
        },
        filters: {
            capitalize: function (value) {
                if (!value) return ‘‘
                value = value.toString()
                return value.charAt(0).toUpperCase() + value.slice(1)
            }
        }
    })
    console.log(app.$data)
</script>
</body>
</html>

View Code

3. 计算属性，方法，侦听器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性，方法，侦听器</title>
    <script src="../../vue.js"></script>
</head>
<body>
<div id="app">
    <!--获取fullName-->
    <!--第一种方式-->
    <!--{{ fullName }}-->

    <!--第二种方式-->
    <!--{{getFullName()}}-->

    <!--第三种方式-->
    {{fullName}}

    {{ age }}

</div>
<script>
    var vm = new Vue({
        el:‘#app‘,
        data:{
            firstName:‘Dell‘,
            lastName:‘Lee‘,
            age:20,
            fullName:‘Dell Lee‘
        },
        // #计算属性  缓存机制，如果依赖的值没有发生改变，不会重新执行
        // computed:{
        //     fullName:function () {
        //         console.log(‘fullName 计算了一次‘)
        //         return this.firstName+"   "+this.lastName
        //     }
        // },
        // methods:{
        //     // 即使依赖的值没有发生改变，也会重新执行
        //     getFullName:function () {
        //         console.log(‘getFullName 计算了一次‘)
        //         return this.firstName+"   "+this.lastName
        //     }
        // },
        watch:{
            // #类似computed
            firstName:function () {
                console.log(‘我执行了firstName‘)
                return this.fullName = this.firstName+this.lastName
            },
            lastName:function () {
                return this.fullName = this.firstName+this.lastName
                console.log(‘我执行了lastName‘)
            },
        }
    })
</script>
</body>
</html>

View Code

4. 计算属性的 setter,getter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性setter和getter</title>
    <script src="../../vue.js"></script>
</head>
<body>
<div id="app">
    {{fullName}}
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            firstName:‘Dell‘,
            lastName:‘Lee‘,
        },
        computed: {
            fullName: {
                // #依赖的值发生改变时，执行
                get:function () {
                        return this.firstName + "   " + this.lastName
                },
                set:function (value) {
                    var name = value.split(" ");
                    console.log(name);
                    this.firstName = name[0];
                    this.lastName = name[1];
                }
            }
        }
    })
</script>
</body>
</html>

View Code

Vue2.5开发去哪儿网App 第三章笔记上

码农公寓

相关文章