Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来

1、$data和$el

var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
}) vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

2、$refs

ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例

ref 需要在dom渲染完成后才会有,在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用,或者在 this.$nextTick(()=>{}) 中调用。

     <div id="app">
<p ref="header">头部</p>
<son ref='son'></son>
<div ref="footer">尾部</div>
</div>
<template id="son">
<div>{{msg}}</div>
</template>
       var son = {
template:'#son',
data(){
return {
msg:'子组件数据'
}
},
}
var vm = new Vue({
el:'#app',
components:{
son
},
mounted(){
console.log(this.$refs.header) //<p ref="header">头部</p>
          } 
       })

3、$nextTick() 处理异步更新数据

       var son = {
template:'#son',
data(){
return {
msg:'子组件数据'
}
},
mounted(){
this.msg='更改后数据'
}
}
var vm = new Vue({
el:'#app',
components:{
son
},
mounted(){
console.log(this.$refs.son.$el.innerHTML) //子组件数据
this.$nextTick(()=>{
console.log(this.$refs.son.$el.innerHTML) //更改后数据
})
}
})

vue中$refs、$slot、$nextTick相关的语法的更多相关文章

  1. Vue.js 2.x笔记:基本语法(2)

    1. Vue实例及选项 1.1 创建Vue实例(new Vue instance) 每个Vue Application必须创建一个root Vue Instance. <script> v ...

  2. Vue学习计划基础笔记(二) - 模板语法,计算属性,侦听器

    模板语法.计算属性和侦听器 目标: 1.熟练使用vue的模板语法 2.理解计算属性与侦听器的用法以及应用场景 1. 模板语法 <div id="app"> <!- ...

  3. VUE环境配置步骤及相关Git Bash命令的使用

    组件式开发中,一定少不了Vue,废话少说,开始进行Vue应用前的关键性配置 备注:(为方便进行配置,提前可以安装Git bash,下载路径——https://git-scm.com/downloads ...

  4. 在vue中操作DOM--this.$nextTick()

    虽然 Vue.js 通常鼓励开发人员沿着"数据驱动"的方式思考,避免直接接触 DOM,但是有时我们确实要这么做.比如一个新闻滚动的列表项.如果在这里需要操作dom, 应该是等待 V ...

  5. vue api学习之nextTick的理解

    对于 Vue.nextTick 方法,之前没有听说过,突然听到别人提起,貌似作用挺大.以下为学习心得.官方文档上这样定义:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法, ...

  6. Vue.Draggable/SortableJS 的排序功能,在VUE中的使用

    此插件git: https://github.com/SortableJS/Vue.Draggable 基于Sortable.js http://www.cnblogs.com/xiangsj/p/6 ...

  7. mescroll在vue中的应用

    1.npm install --save mescroll.js 2. <template> <div> <!--全部--> <mescroll-vue re ...

  8. Vue:(二)基础常用语法

    (一)模板语法 Mustache语法:{{ msg }} Html赋值:v-html = " " 绑定属性:v-bind:id = " " 使用表达式:{{ o ...

  9. 基于iscroll的better-scroll在vue中的使用

    什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里.better-scroll 也很强 ...

随机推荐

  1. SpringMVC的入门示例

    1.配置流程说明 第一步:导入包 第二步:构建一个请求,编写请求页面 第三步:配置核心控制器 第四步:构建一个业务控制器 第五步:编写Spring配置文件 第六步:编写一个返回页面 2.配置流程--- ...

  2. 剑指offer数组1

    面试题3:数组中重复的数字 在一个长度为n的数组里的所有数字都在0到n-1的范围内. 数组中某些数字是重复的,但不知道有几个数字是重复的.也不知道每个数字重复几次.请找出数组中任意一个重复的数字. 例 ...

  3. min-max容斥 hdu 4336 && [BZOJ4036] 按位或

    题解: 之前听说过这个东西但没有学 令$max(S)$表示S中编号最大的元素,$min(S)$表示编号中最小的元素 $$max(S)=\sum{T \in S} {(-1)}^{|T|+1} min( ...

  4. build配置项中maven常用插件

    <build> <!-- 在浏览器地址栏的项目名称 --> <finalName>${project.artifactId}</finalName> & ...

  5. LeetCode问题

    1.Two Sum """Given an array of integers, return indices of the two numbers such that ...

  6. C# 错误集锦

    ①字段重复 js → qs  仔细 ② 代码臃肿 通过判断 资产类型zc_type来判断模块的显隐 实际在其中嵌入 <%=zc_type == "2"?"" ...

  7. XVII Open Cup named after E.V. Pankratiev. GP of Siberia, Division 1

    1. Ski race 枚举枚举倍数判断即可.时间复杂度$O(n\log m)$. #include<cstdio> #include<algorithm> using nam ...

  8. Voronoi图和Delaunay三角剖分

    刷题的时候发现了这么一个新的东西:Voronoi图和Delaunay三角剖分 发现这个东西可以$O(nlogn)$解决平面图最小生成树问题感觉非常棒 然后就去学了.. 看的n+e的blog,感谢n+e ...

  9. BZOJ 4644

    可以把修改当成删除再插入一个新的, 线性基不容易删除,就用线段树分治 好像手写的bitset在这里很慢 #include<bits/stdc++.h> using namespace st ...

  10. JS AJAX 跨域

    原因: 浏览器的同源策略,不允许AJAX 访问 其他接口 协议,域名,端口 一个不同 就跨域了  http 端口(80) https(443) 可以跨域的三个标签: 1. img : 打点统计,没有浏 ...