Vue起步

最新推荐文章于 2025-08-23 11:44:58 发布

转载最新推荐文章于 2025-08-23 11:44:58 发布 · 67 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wozixiaoyao/p/6045070.html

文章标签：

#javascript #ViewUI

demo1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello VUE</title>
    <script src="../dist/vue.js"></script>

</head>
<body>
    <div id="app">
        {{ message }}
    </div>

    <div id="app-2">
        <span v-bind:title="message">
            Hover your mouse over me for a few seconds to see my dynamically bound title!
        </span>
    </div>
    <div id="app-3">
        <p v-if="seen">Now you see me</p>
    </div>
    <div id="app-4">
        <ol>
            <li v-for="todo in todos">
                {{ todo.text }}
            </li>
        </ol>
    </div>
    <div id="app-5">
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">Reverse Message</button>
    </div>
    <div id="app-6">
        <p>{{ message }}</p>
        <input v-model="message">
    </div>
    <div id="app-7">
        <ol>
            <!-- Now we provide each todo-item with the todo object    -->
            <!-- it's representing, so that its content can be dynamic -->
            <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
        </ol>
    </div>
</body>
<script src="demo1.js"></script>
</html>

demo1.js

/**
 * Created by Administrator on 2016/11/5.
 */
var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});
var app2 = new Vue({
    el: '#app-2',
    data: {
        message: 'You loaded this page on ' + new Date()
    }
});
var app3 = new Vue({
    el: '#app-3',
    data: {
        seen : true
    }
});
var app4 = new Vue({
    el: '#app-4',
    data: {
        todos: [
            { text: 'Learn JavaScript' },
            { text: 'Learn Vue' },
            { text: 'Build something awesome' }
        ]
    }
});
var app5 = new Vue({
    el: '#app-5',
    data: {
        message: 'Hello Vue.js!'
    },
    methods: {
        reverseMessage: function () {
            this.message = this.message.split('').reverse().join('')
        }
    }
});
var app6 = new Vue({
    el: '#app-6',
    data: {
        message: 'Hello Vue!'
    }
});
Vue.component('todo-item', {
    // The todo-item component now accepts a
    // "prop", which is like a custom attribute.
    // This prop is called todo.
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
});
var app7 = new Vue({
    el: '#app-7',
    data: {
        groceryList: [
            { text: 'Vegetables' },
            { text: 'Cheese' },
            { text: 'Whatever else humans are supposed to eat' }
        ]
    }
})

转载于:https://www.cnblogs.com/wozixiaoyao/p/6045070.html