Vue学习（一）：Vue实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue实例创建</title>

</head>

<body>

<h3 id="example">{{ message }}</h3>

<script type="text/javascript" src="vue.min.js"></script>

<script>

    let data = {message: 'Hello Vue.'};

    // 每个 Vue.js 应用的起步都是通过构造函数 Vue 创建一个 Vue 的根实例

    let vm = new Vue({

        el: '#example',

        data: data

    });

    console.log(vm.message === data.message);

    // 数据是双向绑定

    vm.message = 'Hello Vue World.';

    console.log(data.message);

    data.message = 'Hello Vue World, ha ha.';

    console.log(vm.message);

    console.log(vm.$data === data);

    console.log(vm.$el === document.getElementById('example'));

    vm.$watch('message', function (newVal, oldVal) {

        // 这个回调将在 `vm.message`  改变后调用

        console.log('改变前：message=' + oldVal);

        console.log('改变后：message=' + newVal);

    });

    vm.message = 'Hello Vue.';

</script>

</body>

</html>
巴特西

Vue学习（一）：Vue实例

最新文章

热门文章
