Vue实例简单方法介绍

2024-12-01 03:21:18

Vue实例的一些简单方法

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <meta charset="utf-8">
 <script src="http://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
 <div id="box">
  {{a}}
 </div>
 <script type="text/javascript">
  var vm = new Vue({
   el:'#box',
   data:{
    a:1,
   },
  });

  //vm就是实例对象
  console.log(vm.$el); //这里就是div元素
  vm.$el.style.background = 'red';
  console.log(vm.$data);
  console.log(vm.$data.a); //'1'
 </script>
</body>
</html>

手动挂载

  var vm = new Vue({
   data:{
    a:1,
   },
  });

  //手动挂载
  vm.$mount('#box');

或者下面的写法：

var vm = new Vue({
  data:{
  a:1,
  },
 }).$mount('#box');

var vm = new Vue({
  aa:11, //自定义属性
   data:{
    a:1,
   },
  }).$mount('#box');

 console.log(vm.$options.aa); //11

上面代码，自定义了属性aa，可以通过vm.$options获取。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vue.js实例方法之生命周期详解

本文主要给大家介绍的是关于Vue.js实例方法之生命周期的相关内容,分享出来供大家参考学习,学习的朋友们下面来一起看看详细的介绍: 一.$mount()挂载方法 $mount是用来挂载扩张的.如果 Vue 实例在实例化时没有收到 el 选项,则它处于"未挂载"状态,没有关联的 DOM 元素.可以使用 vm.$mount() 手动地挂载一个未挂载的实例. 比如我们扩张了一个全局组件,通过$mount手动的挂载到DOM上,也就生成了一个Vue实例. <div id="#ap
详解Vue 实例中的生命周期钩子

Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑. Vue 实例在文档中经常会使用 vm 这个变量名表示 Vue 实例,在实例化 Vue 时,需要传入一个选项对象,它可以包含数据(data).模板(template).挂载元素(el).方法(methods).生命周期钩子(lifecyclehook)等选项. Vue 实例化的选项需要注意的
Vue实例简单方法介绍

Vue实例的一些简单方法 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="box&
vue中的计算属性的使用和vue实例的方法示例

本文介绍了vue计算属性的使用和vue实例的方法示例,分享给大家,具体如下: 计算属性在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需要多于一个表达式的逻辑,应当使用计算属性. vue 计算属性当我们想要根据一端业务代码的执行结果来返回属性的值,就可以使用计算属性computed了, 计算属性是一个有结果的函数,有get方法和set方法,get方法,
使用 vue 实例更好的监听事件及vue实例的方法

文章举例说明一下在 vue 中如何更好的监听浏览器事件.原文介绍了一种新增 vue 实例的方法,单独监听事件.这样代码书写较为简练,容易管理. 当监听如下事件的传统做法是: window.scrollX window.scrollY window.innerHeight window.innerWidth 通常需要书写很多代码: created () { this.$el.addEventListener('click', this.someMethod) }, destroyed () { t
vue项目中在外部js文件中直接调用vue实例的方法比如说this

一般我们都是在main.js中引入vue,然后在vue文件中直接使用this(this指向的是vue实例),但是在实际开发中,我们往往会引入外部的js文件使用this,这个this就会指向window,并不是我们期待的vue实例,那么就需要重新引入vue文件(import Vue from 'vue'),这样很麻烦.在目前项目中我使用的方法是mian.js导出vue实例,然后在需要使用的js中引入. 步骤一:main.js导出vue实例 var vue = new Vue({ el: '#app
Linux下文件的切分与合并的简单方法介绍

linux下文件分割可以通过split命令来实现,可以将一个大文件拆分成指定大小的多个文件,并且拆分速度非常的快,可以指定按行数分割和安大小分割两种模式.Linux下文件合并可以通过cat命令来实现,非常简单. 在Linux下用split进行文件分割先看下帮助文档 Usage: split [OPTION]... [INPUT [PREFIX]] Output fixed-size pieces of INPUT to PREFIXaa, PREFIXab, ...; default size
vue中install方法介绍

目录 1.全局注册组件 2.全局自定义指令 vue提供install可供我们开发新的插件及全局注册组件等 install方法第一个参数是vue的构造器,第二个参数是可选的选项对象 export default { install(Vue,option){ 组件指令混入挂载vue原型 } } 1.全局注册组件 import PageTools from '@/components/PageTools/pageTools.vue' import update from './update/in
Java中泛型使用的简单方法介绍

一. 泛型是什么 "泛型",顾名思义,"泛指的类型".我们提供了泛指的概念,但具体执行的时候却可以有具体的规则来约束,比如我们用的非常多的ArrayList就是个泛型类,ArrayList作为集合可以存放各种元素,如Integer, String,自定义的各种类型等,但在我们使用的时候通过具体的规则来约束,如我们可以约束集合中只存放Integer类型的元素,如List<Integer> iniData = new ArrayList<>().
快速解决jquery之get缓存问题的最简单方法介绍

在ie系列下,$.get()方法在url地址固定时,会缓存返回结果,导致不可预料的问题.但在火狐下,则不会缓存. 要解决该问题有很多办法,最直接的是把$.get()方法换成$.ajax(),然后配置cache:false即可.我不喜欢$.ajax()繁琐的配置方式,可采取以下最简单方式实现: 在$.get()的data后面加上新的随机参数,如{data: mydata, stamp: Math.random() },由于每次数据不一样,故请求后返回的数据不会缓存. 另外也可把$.get()改成$
BootstrapTable refresh 方法使用实例简单介绍

本文就bootstrapTable refresh 方法如何传递参数做简单举例说明.下面代码中,一个table,一个button,单击button会触发刷新表格操作. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="../libs/bootstrap
Vue框架中正确引入JS库的方法介绍

本文主要给大家介绍的是关于在Vue框架中正确引入JS库的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: 错误示范全局变量法最不靠谱的方式就是将导入的库挂在全部变量window 对象下: // entry.js: window._ = require('lodash'); // MyComponent.vue: export default { created() { console.log(_.isEmpty() ? 'Lodash everywhere!' : 'U

Vue实例简单方法介绍

相关推荐

随机推荐