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"> {{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 实例中的生命周期钩子
Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑. Vue 实例 在文档中经常会使用 vm 这个变量名表示 Vue 实例,在实例化 Vue 时,需要传入一个选项对象,它可以包含数据(data).模板(template).挂载元素(el).方法(methods).生命周期钩子(lifecyclehook)等选项. Vue 实例化的选项 需要注意的
-
Vue.js实例方法之生命周期详解
本文主要给大家介绍的是关于Vue.js实例方法之生命周期的相关内容,分享出来供大家参考学习,学习的朋友们下面来一起看看详细的介绍: 一.$mount()挂载方法 $mount是用来挂载扩张的.如果 Vue 实例在实例化时没有收到 el 选项,则它处于"未挂载"状态,没有关联的 DOM 元素.可以使用 vm.$mount() 手动地挂载一个未挂载的实例. 比如我们扩张了一个全局组件,通过$mount手动的挂载到DOM上,也就生成了一个Vue实例. <div id="#ap
-
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
随机推荐
- jquery让返回的内容显示在特定div里(代码少而精悍)
- linux之sort命令的用法
- java图片压缩工具类
- iOS开发之UIScrollView控件详解
- IE:如何使用断点续传功能
- Python Socket编程入门教程
- C# 合并GriewView相同列的小例子
- js文件Cookie存取值示例代码
- Python中使用装饰器和元编程实现结构体类实例
- SQLSERVER收集语句运行的统计信息并进行分析
- 为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
- 深入理解jQuery layui分页控件的使用
- Android中使用Gson解析JSON数据的两种方法
- 让复选框只能选择一项的方法
- 详解java集成支付宝支付接口(JSP+支付宝20160912)
- Android中使用GridLayout网格布局来制作简单的计算器App
- spring接口通过配置支持返回多种格式(xml,json,html,excel)
- iOS webview捕获H5按钮方法示例代码
- ios实现搜索关键字高亮效果
- Elasticsearch 基础介绍及索引原理分析