vue的实例属性$options

vue的实例属性$options是用来获取定义在data外的数据和方法的。

<script>
export default {
  name: "Test",
  data() {
    return {

    };
  },
  //在data外面定义的属性和方法通过$options可以获取和调用
  name: "zs",
  age: 12,
  haha() {
    console.log("haha");
  },
  created() {
    console.log(this.$options.name);  // zs
    console.log(this.$options.age);  //12
    this.$options.haha();  // haha

  },
</script>

原文地址:https://www.cnblogs.com/luguankun/p/10856911.html

时间: 2024-11-08 22:36:13

vue的实例属性$options的相关文章

vue构造器以及实例属性

一.构造器 1.vue.js就是一个构造器,通过构造器Vue来实例化一个对象:例如:var vm = new Vue({}); 2.实例化Vue时,需要传入一个参数(选项对象): 3.参数:选项对象可以包含,数据(data).挂载元素(el).方法(methods).模版(template).生命周期函数等等: 4.扩展构造器Vue,从而用预定义选项创建可复用的组件构造器,所有组件都是被扩展的Vue的实例,使用Vue.extend({})来扩展: 注意:尽管可以命令式地创建扩展实例,不过在多数情

【05】Vue 之 实例详解与生命周期

Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着.销毁等过程进行js控制. 5.1. Vue实例初始化的选项配置对象详解 前面我们已经用了很多次 new Vue({...})的代码,而且Vue初始化的选项都已经用了data.methods.el.computedd等,估计您看到这里时,应该已经都明白了他们的作用,我们就详细讲解一下他们的使用情况.更

前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)

一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模型,Vue 的设计无疑受到了它的启发.因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例. 1.vue.js就是一个构造器,通过构造器Vue来实例化一个对象:例如:var vm = new Vue({});2.实例化Vue时,需要传入一个参数(选

Vue.js—组件快速入门以及Vue路由实例应用

上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js的组件,组件其实就是页面组成的一部分,它是一个具有独立的逻辑和功能或页面,组件可以扩展 HTML 元素,封装可重用的代码.组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树,如下图: 接下来我们就仔细讲讲组件的使用吧. 1 全局组件 以下就是我们注册

五十三、初识vue,实例成员语法,指令,

vue 1.什么是vue? 可以独立完成前后端分离式web项目的JavaScript框架 2.为什么要学习vue? 三大主流框架:Angular(脸书).React(git公司).vue(中国人第三方) 先进的前端设计模式:MVVM 可以完全脱离服务器,以前端代码复用渲染整个页面:组件化开发 vue框架 vue是前端框架:Angular(脸书).React(git公司).vue(中国人第三方) vue:结合其他框架优点,轻量级,中文API,数据驱动,双向绑定,MVVM设计模式.组件化开发.单页面

8.Vue.js-计算属性

计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: <!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例 - 菜鸟教程(runoob.com)</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.

Vue2.0笔记——Vue常用实例属性,实例方法

实例属性 vm.$el vm.$data vm.options vm.$refs vm.$root vm.$el 该实例属性用于获取Vue实例使用的根DOM元素,即el选项所指的元素DOM <body> <div id="app"> <h4>你好,这是四级标题</h4> <p>这是一个段落,我什么都不想说</p> </div> <button onclick="getEl()"

Vue小实例

最近刚学习Vue的官方文档,了解了指令.模板.组件.数据双向绑定等有关Vue的知识点.因此估摸着做点实例出来练练手. 下面介绍一个简单的例子,模拟购物车自动统计金额,效果图如下: 代码如下: <div id="demo"> <a v-on:click="tog" class="list-group-item active">商品总金额:{{total}}</a> <div v-if="show&

Vue.js实例

构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的: var vm = new Vue({ // 选项 })