创建Vue实例

前言

           前面我们学习过JS、jQuery、Ajax的知识了，为了应对日益复杂的前端需求，本单元将带领大家来学习Vue.js这个渐进式的框架，掌握项目功能开发的知识技能，首先是你得完成了整体Vue的安装以及环境配置，才能学习下面的的知识技能。

单元一  Vue实例

学习目标

（1）Vue构造器

（2）属性与方法

（3）生命周期

任务一  构造器

1.1任务描述

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

1.2任务实施

语法格式：

var vm = new Vue({ // 选项 })

下面通过实例来看一下构造器里面需要哪些内容

<div id="vue_det">

      <h1>site : {{site}}</h1>

      <h1>url : {{url}}</h1>

      <h1>{{details()}}</h1>

    </div>

    <script type="text/javascript">

        var vm = new Vue({//创建新的实例Vue

            el: '#vue_det',  //挂载

            data: { //数据对象

                site: "沈职工坊",

                url: "www.runoob.com",

                alexa: "10000"

            },

            methods: {   //定义方法

                details: function() {

                    return  this.site + " - 行则将至，做则必成";

                }

            }

        })

    </script>

可以看到在构造器里面有一个el参数

这里我们先给到HTML部分，这里div的id属性值在后面作为挂载目标，然后JS部分就是在 Vue.js 中定义数据和方法，并将数据渲染到 HTML 页面上，同时调用方法来生成动态内容。

后面会详细写到关于插值表达式

任务二 属性与方法

1.1任务描述

每个 Vue 实例都会代理其 data 对象里所有的属性。同时，Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的数据属性区分。

1.2任务实施

1.2.1代理属性

代理属性是指 Vue 实例可以直接访问其data对象中的属性。例如，在一个 Vue 实例vm中，如果data对象有一个属性a，你可以通过vm.a来访问data.a。

代理属性是 Vue 实现数据绑定的基础，也方便了计算属性和方法的调用。

 var data = { a: 1 };

        var vm = new Vue({

            data: data

        });

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

        vm.a = 2;

        console.log(data.a);

        data.a = 3;

        console.log(vm.a);

解析:

当创建 Vue 实例vm并将data对象传递进去后，Vue 会对data中的属性进行代理。这使得通过vm访问a属性（vm.a）和直接访问data对象中的a属性（data.a）在行为上是关联的。

1.2.2 实例属性

（1）$data：获取data里的数据，相当于用this获取

 var vm = new Vue({

            data: {

                message: 'Hello'

            }

        });

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

（2）$options：用来获取定义在data外的数据和方法的

 var vm = new Vue({

            data: {

                a: 1

            },

            methods: {

                doSomething() {

                console.log('Doing something');

                }

            }

        });

     console.log(vm.$options.methods.doSomething);

运行结果：

（3）$el： Vue 实例挂载的 DOM 元素

<div id="app">

        <p>这是一个段落</p>

    </div>

    <script>

        var vm = new Vue({

          el: '#app'

        });

        vm.$el.classList.add('custom-class');

    </script>

通过 vm.$el 获取到 Vue 实例挂载的 div#app 元素，并为其添加了一个名为 custom-class 的类名。

（4）$root：指向应用程序的根 Vue 实例

1.2.3实例方法

（1）vm.$mount(’#id’)：手动挂载

 <div id="app"></div>

    <script>

        var vm=new Vue({

            template:'<p>通过 $mount 挂载的Vue实例内容</p>',

            data:{}

        })

      // 手动将Vue实例挂载到id为app的DOM元素上

        vm.$mount('#app')

    </script>

（2）vm.$destroy()：销毁实例

<div id="app">

        <button @click="destroyInstance">销毁实例</button>

        <p>{{message}}</p>

    </div>

    <script>

        var vm = new Vue({

            el: '#app',

            data: {

                message: '这是要被销毁实例中的消息'

            },

            methods: {

                destroyInstance() {

                this.$destroy();

                }

            }

        });

    </script>

当点击按钮时，会调用destroyInstance方法，进而执行$destroy()来销毁当前的 Vue 实例，之后 Vue 实例相关的功能都将不再生效，页面上显示的消息也不会再随数据变化而改变了

（3）vm.$nextTick(cb)：将回调延迟到dom更新之后执行。

 <div id="app">

      //  @click是一个指令，用于绑定一个元素的点击事件。

        <button @click="updateMessage">更新消息</button>

        <p ref="messageParagraph">{{ message }}</p>

      </div>

      <script>

        var vm = new Vue({

          el: '#app',

          data: {

            message: '初始消息'

          },

          methods: {

            updateMessage() {

              this.message = '更新后的消息';

              // 使用 $nextTick 在DOM更新后获取元素的文本内容并打印

              this.$nextTick(() => {

                console.log(this.$refs.messageParagraph.textContent);

              });

            }

          }

        });

      </script>

实例

（4）vm.$set(obj, key, val)：添加属性值

<div id="app">

        <button @click="addNewProperty">添加新属性</button>

        <p>新属性的值是: {{ newProperty }}</p>

      </div>

      <script>

        var vm = new Vue({

          el: '#app',

          data: {

            newProperty: null

          },

          methods: {

            addNewProperty() {

              // 使用 $set 方法添加新的响应式属性

              this.$set(this, 'newProperty', '这是新添加的属性值');

            }

          }

        });

      </script>

屏

（5）vm.$watch(data, cb[, options])：监听数值变化

<div id="app">

        <input type="text" v-model="message">

        <p>输入的内容是: {{message}}</p>

      </div>

      <script>

        var vm = new Vue({

          el: '#app',

          data: {

            message: ''

          },

          mounted() {

            // 观察message数据的变化

            this.$watch('message', (newValue, oldValue) => {

              console.log(`消息从 ${oldValue} 变为 ${newValue}`);

            });

          }

        });

      </script>

学到东西

我们下一篇学习数据绑定