vue 笔记

    // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
    Vue.filter('msgFormat', function (myMsg, arg2, arg3) {
        // 字符串的  replace 方法：第一个参数，除了可写一个 字符串之外，还可以定义一个正则；第二个参数代表要替换为 xxx
        //将 myMsg 中的所有`xx`字样，修改为`arg2 + arg3`
        return myMsg.replace(/xx/g, arg2 + arg3)
    })
    // 自定义私有过滤器
    new Vue({
        filters: {
            // input是自定义过滤器的默认参数，input的值永远都是取自于 | 左边的内容
            msgFormat: function (input, arg2, arg3) {
                return input.replace(/xx/g, arg2 + arg3)
            }
        }
    })

    <div id="app">
        <!-- 通过 两个过滤器（msgFormat、myFilter2）对 msg 进行过滤-->
        <!-- 将 msg 交给第一个过滤器来处理，然后将处理的结果交给第二个过滤器来处理-->
        <p>{{ msg | msgFormat('参数1', '参数2') | myFilter2}}</p>
    </div>

    //自定义全局指令 v-focus，让文本框自动获取焦点
    //参数1：指令的名称。注意，在定义的时候，指令的名称前面，不需要加 v- 前缀；但是：在`调用`的时候，必须在指令名称前 加上 v- 前缀
    //参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
    Vue.directive('color', {
        //在每个函数中，第一个参数，永远是 el ，表示 被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象（DOM对象）
        bind: function (el) { // 每当指令绑定到元素上的时候，会立即执行这个 bind 函数，【只执行一次】
          el.style.color = "red"

        },
        inserted: function (el) {  // inserted 表示元素 插入到DOM中的时候，会执行 inserted 函数【触发1次】
        },
        updated: function (el) {  // 当VNode更新的时候，会执行 updated， 【可能会触发多次】
        }
    })
    
    //简写
    Vue.directive('color', function (el, binding) { //注意，这个function等同于把代码写到了 bind 和 update 中去
        el.style.color = binding.value
    })

    //自定义私有指令
    new Vue({
      directives: {
        'color': function (el, binding) {
          el.style.color = binding.value;
        }
      }
    })

    <div id="app">
        <!-- 直接调用指令 -->
        <p v-color="'green'"></p>
    </div>

    new Vue({
        // 这是第1个生命周期函数，表示实例完全被创建出来之前，会执行它
        beforeCreate: function () {
            console.log('01 beforeCreate', this.msg);
            //注意：在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化
        },

        // 这是第2个生命周期函数
        created: function () {
            console.log('02 created', this.msg);
            //注意：如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
        },

        // 这是第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中
        beforeMount: function () {
            console.log('03 beforeMount', this.msg);
            // 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
        },

        // 这是第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
        mounted: function () {
            console.log('04 mounted', this.msg);
            // 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了
            // 此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动
        },
        // 运行中的两个事件
        beforeUpdate() {
          console.log('-------------05 beforeUpdate', this.msg);
          // 结论：当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步
        },
        updated() {
          console.log('-------------06 updated', this.msg);
          // 结论：updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
        },
        beforeDestroy() {
            //实例销毁之前调用。在这一步，实例仍然完全可用。可以在beforeDestroy里**清除定时器、或清除事件绑定**。
        },
        destroyed(){
            //Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
        }
    });

    <!-- 第三步：父组件在引用子组件的时候， 通过 属性绑定（v-bind:）的形式,  -->
    <!--   把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 -->
    <component1 v-bind:parent-msg="msg"></component1>

    <!-- 定义子组件的模板 -->
    <template id="myTemplate">
      <!-- 第二步：在子组件的模板中，使用props中的属性 -->
      <h2 @click="change">我是子组件。我想使用父组件中的数据parentMsg： {{ parentMsg }}</h2>
    </template>
    <script>
      // 创建 Vue 实例，得到 ViewModel
      var vm = new Vue({
        data: {
          msg: '父组件中的数据123'
        },
        components: {
          // 子组件默认无法访问到 父组件中的 data 中的数据 和 methods 中的方法
          component1: { //将子组件的名称定义为 component1
            template: '#myTemplate',
            // 注意： 组件中的 所有 props 中的数据，都是通过 父组件 传递给子组件的
            // props 中的数据，都是只读的，无法重新赋值
            props: ['parentMsg'], // 第一步：把父组件传递过来的 parentMsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据
          }
        }
      });
    </script>

    <div id="app">
        <!-- 父组件向子组件 传递 方法，是通过 事件绑定机制； v-on。当我们自定义了 一个 事件属性 parent-show（这个地方不能用驼峰命名）之后，-->
        <!-- 那么，子组件就能够，通过 emit 来调用 传递进去的 这个 方法了 -->
        <!-- 【第一步】。意思是说，`show`是父组件的方法名，`parent-show`是自定义的时间属性，稍后要在子组件中用到 -->
        <component1 @parent-show='show'></component1>
    </div>

    <!-- 定义子组件的模板 -->
    <template id="myTemplate">
        <!-- 【第二步】按照正常的写法来：点击按钮，调用子组件的方法 -->
        <div @click="childClick">我是子组件，点击调用父组件的方法</div>
    </template>

    <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
            el: '#app',
            methods: {
                show: function () { // 定义父组件的show方法
                    console.log('父组件提供的方法');
                }
            },
            components: {
                component1: { //将子组件的名称定义为 component1
                    template: '#myTemplate',
                    methods: {
                        childClick() {
                            // 当点击子组件的按钮时，如何 拿到 父组件传递过来的 func 方法，并调用这个方法？？？
                            //  emit 英文原意： 是触发，调用、发射。意思是，触发父组件的方法
                            // 【第三步】 在子组件的方法中，通过 emit 触发父组件的方法
                            this.$emit('parent-show');
                            // 子组件如果要给父组件传递参数，在触发 emit 的时候，通过参数的形式带出去就可以了
                            //this.$emit('parent-show', 'xx', 'xx1');
                        }
                    }
                }
            }
        });
    </script>

//通过Image对象进行错误上报
// myPath表示上报的路径（我要上报到哪里去）。后面的内容是自己加的参数。
(new Image()).src = 'http://xxx.com/myPath?badjs=msg';