'vue$': 'vue/dist/vue.esm.js'
'vue$': 'vue/dist/vue.esm.js' ,// 用 webpack 1 时需用 'vue/dist/vue.common.js'
//现在主流的webpack2采用esm,也就是es6及以上的模块化编程,说白了就是
vue.js官方文档解释
https://cn.vuejs.org/v2/guide…术语
vue中$属性的用法
this. d a t a : v m 上 的 数 据 t h i s . data: vm上的数据 this. data:vm上的数据this.watch:监控
this.$el:当前el元素
this.$set:后加的属性实现响应式变化
this.$nextTick :异步方法,等待渲染dom完成后来获取vm
this.$refs:被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例
vue 中 $nextTick用法
this. $nextTick 中就已经是下次 DOM 更新循环结束之后执行延迟回调。
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
2.1.0 起新增:如果没有提供回调且在支持 Promise 的环境中,则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill,所以如果你的目标浏览器不原生支持 Promise (IE:你们都看我干嘛),你得自己提供 polyfill。
在Vue生命周期的created()
钩子函数进行的DOM操作一定要放在Vue.nextTick()
的回调函数中
在created()
钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()
的回调函数中。与之对应的就是mounted()钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题 。
在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.nextTick()
的回调函数中。
Tip:Vue.set()
在methods中也可以写成this.$set()
—> 相当于 Vue.nextTick()
在 methods 中也可以写成this.$nextTick()
自定义属性
如果要注册全局的自定义属性,就在main.js里写
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
然后直接在组件(xx.vue)中书写:
<input type="text" v-focus>
如果想要局部注册组件,在组件中引入:
然后直接书写