专栏首页web前端Vuejs --02 Vue实例

Vuejs --02 Vue实例

一、构造器

     1、vm(view model 表示Vue实例),每个Vuejs都是通过构造函数Vue创建Vue的根实例启动

var vm = new Vue({
     //传入一个选项对象{},可以包含数据data(object|function)、模板templete(会完全替代挂载元素,包含挂载元素本身)、方法methods、挂载元素el ( CSS选择器或HTMLElement实例 )、生命周期钩子等
     //选项
});

     2、扩展Vue构造器,从而用预定义的选项创建可复用的组件构造器     (注意:Vue.js 组件都是被扩展的Vue实例)

var MyComponent = Vue.extend({
     //扩展选项
})var myComponentInstance = new MyComponent();
     //尽管可以命令式地创建扩展实例,不过在多数情况下建议将组件构造器注册为一个自定义元素,然后声明式地用在模板中。

二、属性与方法

     1、每个Vue实例都代理data对象      注意只有这些被代理的属性是响应的,也就是说值的任何改变都是触发视图的重新渲染。如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。

var data = { a: 1 }
var vm = new Vue({
     data: data
})
vm.a === data.a // -> true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3

     2、 除了 data 属性, Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $,以便与代理的 data 属性区分。

var data = { a: 1 }
var vm = new Vue({
     el: '#example',
     data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
// 这个回调将在 `vm.a` 改变后调用
})

三、实例生命周期

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • backbone 整体架构学习

    一、是什么     构建前端MVC(Model,View,Collection)模型的框架,其中Model是数据模型,Collection是数据模型的集合,Vi...

    用户1148399
  • backbone 整体架构学习

        构建前端MVC(Model,View,Collection)模型的框架,其中Model是数据模型,Collection是数据模型的集合,View是视图

    用户1148399
  • JavaScript之对数组中元素进行增删改

    JavaScript中数据类型无非是:简单类型+复杂类型,什么是简单什么又是复杂。从电脑物理存储上讲,简单就是所见即所得,你看见什么,电脑里面存的就只是什么,并...

    用户1148399
  • vue实例-vue官网学习笔记

    1、构造器 ①每个vue.js应用都是通过构造函数Vue创建一个Vue的根实例启动的:

    Ewall
  • flex+php截图Demo

    一、直接将byteArray转为bitmap通过loader(flash.display.Loader)显示在舞台上;

    meteoric
  • 《Linux命令行与shell脚本编程大全》23章24章

    第二十三章 使用其他shell bash shell是linux发行版中最广泛使用的shell。但是它并不是唯一的选择,还有其他的shell可以供你选择。 23...

    xcywt
  • 滴滴面试题:打车业务问题如何分析?

    公司的app(类似滴滴、uber)为用户提供打车服务。现有四张表,分别是“司机数据”表,“订单数据”表,“在线时长数据”表,“城市匹配数据”表。(滴滴面试题)

    猴子聊数据分析
  • 智慧园区可视化应用数据源接口问题

    DIX是CamBuilder中用于实时对接入数据进行处理后输出到指定目的地的系统。可以用来接入Mysql、ActiveMq,syslog等数据源中存储的数据,可...

    要不要吃火锅
  • java基础之继承(一)

    虽然说java中的面向对象的概念不多,但是具体的细节还是值得大家学习研究,java中的继承实际上就是子类拥有父类所有的内容(除私有信息外),并对其进行扩展。下面...

    Single
  • C# 7.0 使用下划线忽略使用的变量

    编译是不通过的,会出现 error CS0103: The name '_' does not exist in the current context 上面的...

    林德熙

扫码关注云+社区

领取腾讯云代金券