vue核心概念

声明式渲染

    <h2>示例1：声明式渲染</h2>
    <div id="app">
        {{ message }}
    </div>
复制代码

var app = new Vue({
            el: "#app",
            data: {
                message: 'hello Vue!'
            }
        })
        
复制代码

属性绑定

<h2>示例2：属性绑定</h2>
<div id="app2">
    <span v-bind:title='message'>鼠标悬停几秒钟查看自处动态绑定的提示信息！</span>
</div>
复制代码

var app2 = new Vue({
    el: "#app2",
    data: {
        message: '页面加载于' + new Date().toLocaleString()
        }
})

复制代码

条件

<h2>示例3：条件</h2>
<div id="app3">
    <p v-if='seen'>现在你看到我了</p>
</div>
复制代码

// demo3
var app3 = new Vue({
    el: '#app3',
    data: {
        seen: true
    }
})
复制代码

循环

<h2>示例4：循环</h2>
<div id="app4">
    <ol>
        <li v-for="todo in todos">{{ todo.text }}</li>
    </ol>
</div>
复制代码

// demo4
var app4 = new Vue({
    el: '#app4',
    data: {
        todos: [
            { text: '学习 JavaScript' },
            { text: '学习 Vue' },
            { text: '整个牛项目' }
        ]
    }
})
复制代码

处理用户输入1

<h2>示例5：处理用户输入1</h2>
    <div id="app5">
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">逆转消息</button>
    </div>
复制代码

// demo5
var app5 = new Vue({
    el: '#app5',
    data: {
        message: 'hello,Vue'
    },
    methods: {
        reverseMessage: function () {
            this.message = this.message.split('').reverse().join('')
        }
    }
})
复制代码

处理用户输入2

<h2>示例6：处理用户输入2</h2>
<div id="app6">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
复制代码

// demo6
var app6 = new Vue({
    el: '#app6',
    data: {
        message: 'Hello,Vue'
    }
})
复制代码

组件化构建应用

<h2>示例7：组件化构建应用</h2>
<div id="app7">
    <ol>
        <!-- 创建一个todo-item组件的实例 -->
        <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
    </ol>
</div>
复制代码

// app7的todo-item组件
Vue.component('todo-item', {
    props: ['todo'],
    template: `<li>{{ todo.text }}</li>`
})
var app7 = new Vue({
    el: '#app7',
    data: {
        groceryList: [
            { id: 0, text: '蔬菜' },
            { id: 1, text: '奶酪' },
            { id: 2, text: '随便其它什么人吃的东西' }
        ]
    }
})
复制代码

转载于:https://juejin.im/post/5d0593d1e51d4577583ddcbf