Vue笔记1

index.html
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="vue.js" type="text/javascript" charset="UTF-8"></script>

    </head>

    <body>
        <div id="app">
            {{ message }} {{name}} {{age}}
            <div v-html="html">
                {{ html }}
            </div>
            <span v-bind:class="color">颜色</span>
            
            {{ number + 1 }}
            {{ 1==1 ? 'YES' : 'NO' }}
            {{ message.split('').reverse().join('') }}
            
            <p v-if="seen">v-if</p>
            <div @click="click1">
                <div @click.stop="click2">
                    click me
                </div>
            </div>
        </div>

        <script type="text/javascript">
            var data = {
                message: 'Hello Vue!',
                name: 'ffff',
                age: 12,
                html: "<span style='color:red'>红色</span>",
                color: '',
                number:10,
                seen:true
            }
            var app = new Vue({
                el: '#app',
                data: data,
                methods:{
                    click1:function(){
                        console.log("click1");
                    },
                    click2:function(){
                        console.log("click2");
                    }
                },
                beforeCreate: function() {
                    console.log("beforeCreate");
                },
                created: function() {
                    console.log("created");
                },
                beforeMount: function() {
                    console.log("beforeMount");
                },
                mounted: function() {
                    console.log("mounted");
                },
                beforeUpdate: function() {
                    console.log("beforeUpdate");
                },
                updated: function() {
                    console.log("updated");
                }

            })
            data.name = '123'
            data.age = '18'
            app.$data.name = 'victor'
            app.$watch('age', function(newVal, oldVal) {
                console.log(newVal + " " + oldVal);
            })
            app.$data.age = '28'
            app.$data.color = 'red'
        </script>

        <style type="text/css">
            .red {
                color: red;
            }
        </style>
    </body>

</html>
posted on 2019-09-17 17:02 上校阅读(229) 评论(0) 编辑收藏举报
淡泊以明志,宁静以致远

Vue笔记1
