Vue knowledge notes 1

1, the definition of a basic code structure Vue: introducing vue.js; script objects defined Vue var vm = new Vue ({el : '#id')} and a binding element according Dom id.
2, interpolation expressions "v-text" and use the difference between:

    <p>{{ msg }}可以添加字符</p>
    <p v-text="msg">此处字符会被替换</p>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello'
            }
        })
    </script>

3, v-cloak fixes flicker interpolation display data before the expression: [V-Cloak] {the display: none;}
. 4, V-html rendering data in html format (Comparative v-text, are all elements covering the internal dom value, but html may be parsed html format data and render, v-text converted to plain text output)
. 5, V-the bind property binding: add before the attribute name of dom "v-bind:" or ":" (abbreviated a colon) attribute values may be later replaced by the value of the corresponding data.

    <input type="button" v-bind:value="msg" v-on:click="show"/>
    <!-- 按钮值为"hello" 点击提示"world" -->
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello'
            },
            methods: {
                show: function () {
                    alert('world');
                }
            }
        })
    </script>

6, v-on event bindings: add a "v-on:" before the name attribute dom or "@" (abbreviation) can be replaced later events as a function of the corresponding methods.

Reproduced in: https: //www.jianshu.com/p/73efba6e3232