Vuejs学习2--Vue实例

最新推荐文章于 2024-07-02 20:30:00 发布

canglingyue

最新推荐文章于 2024-07-02 20:30:00 发布

阅读量1.4k

点赞数

分类专栏： vuejs 文章标签：实例 vuejs

本文链接：https://blog.csdn.net/canglingyue/article/details/51744732

版权

vuejs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

个人博客

构造器

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

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

一个 Vue 实例其实正是一个 MVVM 模式中所描述的 ViewModel ，因此在文档中经常会使用 vm 这个变量名。

在实例化 Vue 时，需要传入一个选项对象，他可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。

可以扩展 Vue 构造器，从而用预定义选项创建可复用的组件构造器

var MyComponent = Vue.extend({
    //扩展选项
})

// 所有的 ‘MyComponent’ 实例都将以预定义的扩展选项被创建
var myComponentInstance = new MyComponent()

属性与方法

每个 Vue 实例都会代理其 data 对象里所有的属性：

实例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="vue.js"></script>
</head>
<body>
<script>
    var data = { a:1 }
    var vm = new Vue({
        data: data
    })

    alert(data.a === vm.a); //true

    vm.a = 3
    alert( data.a ) // 3

    data.a = 5
    alert( vm.a ) //5
</script>
</body>
</html>

只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，他不会触发视图更新。

除了这些数据属性，Vue 实例暴露了一些有用的实例属性和方法。这些属性与方法都有前缀 $ ,以便于代理的数据属性区分。

实例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="div">

    </div>
    <script>
        var data = { a : 2 }
        var vm = new Vue({
            el: '#div',
            data: data
        })
        alert(vm.$data === data) //true
        alert(vm.$el === document.getElementById('div')) //true

        // $watch 是一个实例方法
        vm.$watch('a' , function (newVal,oldVal) {
            // 这个回调将在 ‘ vm.a ’ 改变后调用 , 运行结果如下图
            alert('新值：'+newVal +"---老值"+ oldVal);
        })
    </script>
</body>
</html>

运行结果图

Vue 实例在创建时有一系列初始化步骤，例如：他需要建立数据观察，编译模板，创建必要的数据绑定。在此过程中，它也将调用一些生命周期钩子，给自定义逻辑提供运行机会。例如 created 钩子在实例创建后调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="vue.js"></script>
</head>
<body>
<script>
    var vm = new Vue({
        data:{
            a:1
        },
        created: function () {
            console.log('a is : ' + this.a) // a is : 1
        }
    })
</script>
</body>
</html>

canglingyue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vuejs学习2--Vue实例

构造器每个 Vue.js 应用的起步都是通过构造函数 Vue 创建一个 Vue 的根实例：var vm = new Vue({ // 选项})一个 Vue 实例其实正是一个 MVVM 模式中所描述的 ViewModel ，因此在文档中经常会使用 vm 这个变量名。在实例化 Vue 时，需要传入一个选项对象，他可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。可以扩展 Vue 构造器，
复制链接

扫一扫

专栏目录