VueJS构造器:new Vue({})

构造器

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

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

属性与方法

每个 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

除了 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`  改变后调用
})
时间: 2024-10-13 16:56:05

VueJS构造器:new Vue({})的相关文章

Vue基础---->VueJS的使用(一)

Vue.js是一个构建数据驱动的web界面的库.它的目标是通过尽可能简单的API 实现响应的数据绑定和组合的视图组件,今天我们就开始vue.js的学习. vue的安装及使用 一.vue的下载地址:http://vuejs.org/js/vue.js 二.vue的第一个例子: 项目的结构如下,引入vue.js vue1.html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&

vuejs 单文件组件.vue 文件

vuejs 自定义了一种.vue文件,可以把html, css, js 写到一个文件中,从而实现了对一个组件的封装, 一个.vue 文件就是一个单独的组件.由于.vue文件是自定义的,浏览器不认识,所以需要对该文件进行解析. 在webpack构建中,需要安装vue-loader 对.vue文件进行解析.在 sumlime 编辑器中,我们 书写.vue 文件,可以安装vue syntax highlight 插件,增加对文件的支持. 用vue-cli 新建一个vue项目,看一下.vue文件长什么样

Vue.2.0.5-Vue 实例

构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模式, Vue 的设计无疑受到了它的启发.因此在文档中经常会使用 vm 这个变量名表示 Vue 实例. 在实例化 Vue 时,需要传入一个选项对象,它可以包含数据.模板.挂载元素.方法.生命周期钩子等选项.全部的选项可以在 API 文档中查看. 可以扩展 Vue 构造器,从而用预定义选项创建可复用的组件构造器: var

Vue入门--基础部分

一.初识Vue 使用双大括号{{message}}将数据渲染进DOM中. 可以使用app.message对渲染后的数据进行修改. Vue常用的指令: 1)v-bind 用来绑定常用属性 主要用法:直接在html标签上添加v-bind:属性名="vue实例中的message" 2)v-if  条件 主要用法:直接在html标签上添加v-if="vue实例中的某个属性名",这个属性对应的属性值应该是布尔值 3)v-for  可以绑定数组的数据来渲染一个列表 主要用法:实

Vue 重点 必须要记住的

基础知识: vue的生命周期: beforeCreate/created. beforeMount/mounted. beforeUpdate/updated. beforeDestory/destoryed vue常用指令: v-for. v-bind(缩写形式 :prop). v-on(缩写形式 @click='sss'). v-if/v-else/v-else-if. v-model. v-once. v-html. v-show... vue自定义组件: Vue.component('c

Vue 超快速学习

Vue 超快速学习 基础知识: 1.vue的生命周期: beforeCreate/created. beforeMount/mounted. beforeUpdate/updated. beforeDestory/destoryed 2.vue常用指令: v-for. v-bind(缩写形式 :prop). v-on(缩写形式 @click='sss'). v-if/v-else/v-else-if. v-model. v-once. v-html. v-show... 3.vue自定义组件: 

Vue常用经典开源项目汇总参考-海量

Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vju/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 易用(已经会了HTML,CSS,J

vue实例

一.构造器 每个vue应用都是通过构造函数vue创建一个vue的根实例启动的 var MyComponent=Vue.extend({ //扩展选项})var myComponentInstance=new MyComponent() 二.属性和方法 每个vue实例都会代理其data对下里所有的属性: var data={a:1}var vm=new VUe({ data:data})vm.a===data.a //truevm.a=2data.a //2data.a=3vm.a //3 只有这

vue2.0 vue.extend()的拓展

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="vue2.2.js"></script> <title>vue.extend-扩展实例构造器</title> </head>