Vue.js 入门介绍代码

<!DOCTYPE html>
<head>
<meta charset='utf-8' />
</head>
<body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id='app'>
    {{ message }}
</div>

<div id='app-2'>
    <span v-bind:title="message">
        鼠标悬停
    </span>
</div>

<div id='app-3'>
    <p v-if="seen">看得见吗？</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">逆转消息</button>
</div>

<div id="app-6">
    <p>{{ message }}</p>
    <input v-model="message" />
</div>

<div id="app-7">
    <ol>
        <todo-item 
            v-for="item in groceryList"
            v-bind:todo="item"
            v-bind:key="item.id"
        >
        </todo-item>
    </ol>
</div>

<script>
var app = new Vue({
    el: '#app', 
    data: {
        message: 'Hello, Vue!'
    }
})

var app2 = new Vue({
    el: '#app-2', 
    data: {
        message: 'hello'
    }
})

var app3 = new Vue({
    el: '#app-3',
    data: {
        seen: false
    }
})

var app4 = new Vue({
    el: '#app-4', 
    data: {
        todos:[
            { text: 'A' }, 
            { text: 'B' }, 
            { text: 'C' }
        ]
    }
})

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', {
    props:['todo'], 
    template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
    el: '#app-7', 
    data: {
        groceryList: [
            { id:0, text: '蔬菜' }, 
            { id:1, text: '奶酪' }, 
            { id:2, text: '其他' }
        ]
    }
})
</script>
</body>
Vue.js 入门介绍代码

猜你喜欢
