有文本插值和html插值

属性绑定

DOM节点属性使用v-bind指令绑定

<!DOCTYPE Html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <meta charset="UTF-8">
    <style>
        .italic {
            font-style: italic;
        }
    </style>
</head>
<div id="app">
    <p v-bind:class="className" v-bind:title="title">危险</p>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                className: 'italic',
                title: 'ming'
            }
        }
    })
</script>
</html>

类名和样式绑定

类名为字符串,属性为数组,对象

事件

用v-on指令

<!DOCTYPE Html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <meta charset="UTF-8">
    <style>
        .italic {
            font-style: italic;
        }
    </style>
</head>
<div id="app">
    <button @click="logInfo()">打印消息</button>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        methods: {
            logInfo(msg) {
                console.log(msg);
            }
        }
    })
</script>
</html>

获取事件对象

<!DOCTYPE Html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <meta charset="UTF-8">
</head>
<div id="app">
    <input type="text" @keyup="handleKeyUp($event)">打印消息</input>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        methods: {
            handleKeyUp(event) {
                console.log(event);
            }
        }
    })
</script>
</html>

修饰符

用于阻止元素行为

<!DOCTYPE Html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <meta charset="UTF-8">
</head>
<div id="app">
    <form @submit.prevent="handleSubmit">
        <button type="submit">提交</button>
    </form>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        methods: {
            handleSubmit() {
                console.log('minfg');
            }
        }
    })
</script>
</html>

阻止元素表单的默认行为,,即提交

双向绑定

使用指令v-model
根据元素类型自动更新元素
2019-05-30-14-35-33----

<!DOCTYPE Html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <meta charset="UTF-8">
</head>
<div id="app">
    <input tye="text" v-model="singLeText">
    <p>{{ singLeText }}</p>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                singLeText: '',
            }
        }
    })
</script>
</html>

条件渲染和列表渲染

<!DOCTYPE Html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <meta charset="UTF-8">
</head>
<div id="app">
    <h2 v-if="order === 0">正确</h2>
    <h2 v-else-if="order === 1">else</h2>
    <h2 v-else>最后</h2>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                order: 0
            }
        }
    })
</script>
</html>

列表渲染,使用指令v-for

<!DOCTYPE Html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <meta charset="UTF-8">
</head>
<div id="app">
    <ul>
        <li v-for="(item, index) in users">{{ index }} &nbsp {{ item.name }}</li>
    </ul>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                users: [
                    {
                        name: 'ming',
                        age: '21',
                        city: 'chicago'
                    },
                    {
                        name: 'Jackson',
                        age: '20',
                        city: 'Sydney'
                    }
                ]
            }
        }
    })
</script>
</html>

2019-05-30-15-03-17----

渲染键值对

<!DOCTYPE Html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <meta charset="UTF-8">
</head>
<div id="app">
    <ul>
        <li v-for="(user, index) in users">
            用户{{ index + 1 }}
            <ul>
                <li v-for="(value, key) of user">{{ key }} &nbsp; {{ value }}</li>
            </ul>
        </li>
    </ul>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                users: [
                    {
                        name: 'ming',
                        age: '21',
                        city: 'chicago'
                    },
                    {
                        name: 'Jackson',
                        age: '20',
                        city: 'Sydney'
                    }
                ]
            }
        }
    })
</script>
</html>

修改数组,对应视图同步更新

<!DOCTYPE Html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <meta charset="UTF-8">
</head>
<div id="app">
    <ul>
        <li v-for="(user, index) in users">
            用户{{ index + 1 }}
            <ul>
                <li v-for="(value, key) of user">{{ key }} &nbsp; {{ value }}</li>
            </ul>
        </li>
    </ul>
    <button @click="reverse">倒序数组</button>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                users: [
                    {
                        name: 'ming',
                        age: '21',
                        city: 'chicago'
                    },
                    {
                        name: 'Jackson',
                        age: '20',
                        city: 'Sydney'
                    }
                ]
            }
        },
        methods: {
            reverse() {
                this.users.reverse();
            }
        }
    })
</script>
</html>