vue单页应用程序spa--day02

最新推荐文章于 2024-09-05 19:50:25 发布

JunXian9102

最新推荐文章于 2024-09-05 19:50:25 发布

阅读量189

点赞数

分类专栏： vuejs相关项目

本文链接：https://blog.csdn.net/smiple9102/article/details/82997876

版权

vuejs相关项目专栏收录该内容

6 篇文章 0 订阅

订阅专栏

动态创建组件：
一般项目中会使用vuex：全局数据管理。
局部过滤器和局部自定义指令

  <body>
    <div id="app">
      <one></one>
      <two></two>
    </div>
    <script>
      // 全局自定义指令可以在任何组件中使用
        Vue.directive('mycolor', {
          inserted(el, binding) {
            console.log(binding);
            // binding.value可以获取传入自定义指令中的属性的值
            el.style.color = binding.value
          }
        })
      // 不管是局部自定义指令还是局部过滤器都只能在当前组件内使用，脱离当前组件无效
      // 局部过滤器通过在组件内部使用filters属性创建
      Vue.component('one', {
        data () {
          return {
            time: new Date(),
            color: 'red'
          }
        },
        template: `
                      <div>
                        <p>{{time | fmtTime}}</p>
                        <input type="text" v-mycolor="color">
                      </div>
        `,
        filters: {
          fmtTime(time) {
            console.log(time);
            var y = time.getFullYear();
            var m = time.getMonth() + 1;
            var d = time.getDate();
            return y + '/' + m + '/' + d
          }
        }
      })
      // 局部自定义指令通过在组件内部使用directives属性创建
      Vue.component('two', {
        data () {
          return {
            time: new Date(),
            color: 'red'
          }
        },
        template: `
                      <div>
                        <p>{{time}}</p>
                        <input type="text" v-myfocus v-mycolor="color">
                      </div>
        `,
        directives: {
          myfocus: {
            inserted(el, binding) {
              console.log(el);
              console.log(binding);
              el.focus()
            }
          }
        }
      })
      var vm = new Vue({
        el: '#app',
        data: {

        }
      })
    </script>
  </body>

组件的生命周期钩子函数

<body>
    <div id="app">
        <p>{{info}}</p>
        <button @click="info='hello1'">更新info</button>
        <button @click="destroy">销毁实例</button>
    </div>
    <script>
        var myVm = new Vue({
            el: "#app",
            data: {
                info: "hello"
            },
            // 在实例初始化之后，数据观测 (data observer) 和 event/watcher 配置之前被调用。
            beforeCreate: function () {
                console.log("===============beforeCreate============================================")
                // $el表示Vue 实例使用的根 DOM 元素。
                console.log('$el', this.$el);
                // $data Vue 实例观察的数据对象
                console.log('$data', this.$data);
                console.log("info:", this.info)
            },
            // 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，dom还未生成，$el 属性目前不可见。
            created: function () {
                console.log("===============created=======================================")
                console.log('$el', this.$el);
                console.log('$data', this.$data);
                console.log("info:", this.info)
            },
            // 模板编译挂载之前调用，首先会判断对象是否有el选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.$mount(el)。接着判断是否有template属性，有的话就以template属性中的值作为模板，如果没有的话，就以el属性指向的作为模板。这里会生成vm.$el，但指令尚未被解析
            beforeMount: function () {
                console.log("===============beforeMount=========================================")
                console.log('$el', this.$el);
                console.log('$data', this.$data);
                console.log("info:", this.info)
            },
            // 模板编译挂载之后调用，vm.$el替换掉el指向的dom
            mounted: function () {
                console.log("===============mounted===========================================")
                console.log('$el', this.$el);
                console.log('$data', this.$data);
                console.log("info:", this.info)
            },
            // 数据变更导致虚拟DOM重新渲染之前调用
            beforeUpdate: function () {
                console.log("===============beforeUpdate============================================");

            },
            // 数据变更导致虚拟DOM重新渲染之后调用
            updated: function () {
                console.log("===============updated======================================================");
            },
            // 实例销毁之前调用，在这一步，实例完全可用
            beforeDestroy: function () {
                console.log("===============beforeDestroy===============================================")
                console.log('$el', this.$el);
                console.log('$data', this.$data);
                console.log("info:", this.info)
            },
            // vue实例指向的所有东西解除绑定，包括watcher、事件、所以的子组件，后续就不再受vue实例控制了
            destroyed: function () {
                console.log("===============destroyed================================================")
                console.log('$el', this.$el);
                console.log('$data', this.$data);
                console.log("info:", this.info)
            },
            methods: {
                destroy() {
                    // 表示销毁组件
                    this.$destroy()
                },
                udpateinfo() {
                    this.info = 'hello2'
                }
            }
        })
    </script>
</body>