受欢迎的博客标签

Vue.js 学习示例

Published

1 - vue update basics

<html>
  <head>
    <title>vue updated lifecycle example</title>
    <script src="/js/vuejs/2.6.10/vue.js"></script>
  </head>
  <body>
  <div id="demo"></div>
  <script>
new Vue({
    el: '#demo',
    template: '<div><p>2^{{ pow }} = {{ n }}</p><input type="text" v-model:value="pow"></div>',
    data: {
        pow: 0,
        n: 0
    },
    // before figure
    beforeUpdate: function () {
        var data = this.$data;
        data.pow = Number(data.pow);
        if (data.pow + '' === 'NaN' || data.pow < 0) {
            data.pow = 0;
        }
        if (data.pow > 1023) {
            data.pow = 1023;
        }
    },
    // good to figure
    updated: function () {
        this.figure()
    },
    methods: {
        figure: function () {
            this.$data.n = Math.pow(2, this.$data.pow);
        }
    }
});
  </script>
  </body>
</html>

 

<div id="app">
        <input type="text" v-model="text">
        {{ text }}
    </div>  

    <script>
        var vm = new Vue({
            el: '#app', 
            data: {
                text: 'hello world'
            }
        });
    </script>