vueSy.html

<html>

<head>
    <title></title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="vue.js"></script>

</head>

<body>
    <div id="app">

        {{ message | add5 | add1 }}<br/> {{t1}}
        <p v-if="seen">现在你看到我了</p>
        <ul>
            <li v-for="todo in todos">
                {{ todo.text | add1 }}
            </li>
        </ul>
        <button v-on:click="reverseMessage">逆转消息</button>
        <input v-model="message">

        <ul>
            <wfj v-for="item in todos" v-bind:todo="item"></wfj>
        </ul>
    </div>
</body>
<script>
    Vue.component('wfj', {
        // todo-item 组件现在接受一个
        // "prop"，类似于一个自定义属性
        // 这个属性名为 todo。
        props: ['todo'],
        template: '<li>这是个待办项{{todo.text}}</li>'
            // template: '<li>{{ todo.text }}</li>'
    })
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello world!',
            t1: 'wfjuan',
            seen: false,
            todos: [{
                text: '学习 JavaScript'
            }, {
                text: '学习 Vue'
            }, {
                text: '整个牛项目'
            }]
        },
        methods: {
            reverseMessage: function() {
                this.seen = !this.seen;
                this.message = this.message.split('').reverse().join('');
            }
        },
        filters: {
            add5: function(value) {
                if (!value) return 0;
                value = value + 5;
                return value;
            },
            add1: function(value) {
                return value + ':';
            },
        }
    });
</script>

</html>