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 条评论
登录 后参与评论

相关文章

来自专栏卡少编程之旅

四个Vue的写法优化技巧

37060
来自专栏前端布道

Angular开发实践(四):组件之间的交互

在Angular应用开发中,组件可以说是随处可见的。本篇文章将介绍几种常见的组件通讯场景,也就是让两个或多个组件之间交互的方法。 根据数据的传递方向,分为父组件...

52180
来自专栏前端说吧

CSS3中的animation动画

31150
来自专栏九彩拼盘的叨叨叨

Vue2.x 写法示例

注意:只在可信内容上使用 v-html,永不用在用户提交的内容上,否则会导致XSS攻击。

22720
来自专栏JetpropelledSnake

Vue学习笔记之Vue指令系统介绍

所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了。

11040
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第四天 jQuery学习

jQuery是一个JavaScript框架。它兼容CSS3,还兼容各种浏览器。文档说明很全,应用详细,成熟插件多。

17140
来自专栏更流畅、简洁的软件开发方式

使用接口来统一控件的取值、赋值和初始化

      这里说的控件主要指的是文本框、下拉列表框这一类的控件,用户使用这些控件输入数据,然后我们需要提取这些数据进行处理。但是不同的控件有不同的取值方式,比...

20760
来自专栏马涛涛的专栏

虚拟DOM

DOM 是 JavaScript 操作网页的接口,全称为“文档对象模型”(Document Object Model)。它的作用是将网页转为一个 JavaScr...

40220
来自专栏AndroidTv

前端入门6-JavaScript客户端api&jQuery

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

13140
来自专栏郭少华

(第二季)Vue2.0-全局API

全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,说的简单些就是,在构造器外部用Vue提供给我们的API...

11910

扫码关注云+社区

领取腾讯云代金券