菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: vue的使用-汪刚-2023.07.05 [打印本页]

作者: 霁后彩虹O 时间: 2023-7-10 23:44
标题: vue的使用-汪刚-2023.07.05
今日学习内容：

1.vm.$refs
类型：Object
只读
详细：
一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例。
参考：
子组件 ref
特殊 attribute - ref
2.vm.$isServer
类型：boolean
只读
详细：
当前 Vue 实例是否运行于服务器。
参考：服务端渲染
3.vm.$attrs
2.4.0 新增
类型：{ [key: string]: string }
只读
详细：
包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
4.vm.$listeners
2.4.0 新增
类型：{ [key: string]: Function | Array<Function> }
只读
详细：
包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
实例方法 / 数据
5.vm.$watch( expOrFn, callback, [options] )
参数：
{string | Function} expOrFn
{Function | Object} callback
{Object} [options]
{boolean} deep
{boolean} immediate
返回值：{Function} unwatch
用法：
观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。表达式只接受简单的键路径。对于更复杂的表达式，用一个函数取代。
注意：在变更 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变更之前值的副本。
示例：
// 键路径
vm.$watch('a.b.c', function (newVal, oldVal) {
  // 监听变量
})
// 函数
vm.$watch(
  function () {
// 表达式 `this.a + this.b` 每次得出一个不同的结果时
// 处理函数都会被调用。
// 这就像监听一个未被定义的计算属性
return this.a + this.b
  },
  function (newVal, oldVal) {
// 做点什么
  }
)
vm.$watch 返回一个取消观察函数，用来停止触发回调：
var unwatch = vm.$watch('a', cb)
// 之后取消观察
unwatch()
选项：deep
为了发现对象内部值的变化，可以在选项参数中指定 deep: true。注意监听数组的变更不需要这么做。
vm.$watch('someObject', callback, {
  deep: true
// 深度监听
})
vm.someObject.nestedValue = 123
// callback is fired
选项：immediate
在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调：
vm.$watch('a', callback, {
  immediate: true
})
// 立即以 `a` 的当前值触发回调
注意在带有 immediate 选项时，你不能在第一次回调时取消侦听给定的 property。
// 这会导致报错
var unwatch = vm.$watch(
  'value',
  function () {
doSomething()
unwatch()
  },
  { immediate: true }
)
如果你仍然希望在回调内部调用一个取消侦听的函数，你应该先检查其函数的可用性：
var unwatch = vm.$watch(
  'value',
  function () {
doSomething()
if (unwatch) {
   unwatch()
}
  },
  { immediate: true }
)
6.vm.$set( target, propertyName/index, value )
参数：
{Object | Array} target
{string | number} propertyName/index
{any} value
返回值：设置的值。
用法：
这是全局 Vue.set 的别名。
参考：Vue.set
vm.$delete( target, propertyName/index )
参数：
{Object | Array} target
{string | number} propertyName/index
用法：
这是全局 Vue.delete 的别名。
参考：Vue.delete
实例方法 / 事件
vm.$on( event, callback )
参数：
{string | Array<string>} event (数组只在 2.2.0+ 中支持)
{Function} callback
用法：
监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。
示例：
vm.$on('test', function (msg) {
  console.log(msg)
})
vm.$emit('test', 'hi')
// => "hi"
vm.$once( event, callback )
参数：
{string} event
{Function} callback
用法：
监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。
vm.$off( [event, callback] )
参数：
{string | Array<string>} event (只在 2.2.2+ 支持数组)
{Function} [callback]
用法：
移除自定义事件监听器。
如果没有提供参数，则移除所有的事件监听器；
如果只提供了事件，则移除该事件所有的监听器；
如果同时提供了事件与回调，则只移除这个回调的监听器。
7.vm.$emit( eventName, […args] )
参数：
{string} eventName
[...args]
触发当前实例上的事件。附加参数都会传给监听器回调。
示例：
只配合一个事件名使用 $emit：
Vue.component('welcome-button', {
  template: `
<button v-on:click="$emit('welcome')">
   Click me to be welcomed
</button>
  `
})
<div id="emit-example-simple">
  <welcome-button v-on:welcome="sayHi"></welcome-button>
</div>
new Vue({
  el: '#emit-example-simple',
  methods: {
sayHi: function () {
   alert('Hi!')
}
  }
})
配合额外的参数使用 $emit：
Vue.component('magic-eight-ball', {
  data: function () {
return {
   possibleAdvice: ['Yes', 'No', 'Maybe']
}
  },
  methods: {
giveAdvice: function () {
   var randomAdviceIndex = Math.floor(Math.random() * this.possibleAdvice.length)
   this.$emit('give-advice', this.possibleAdvice[randomAdviceIndex])
}
  },
  template: `
<button v-on:click="giveAdvice">
   Click me for advice
</button>
  `
})
<div id="emit-example-argument">
  <magic-eight-ball v-on:give-advice="showAdvice"></magic-eight-ball>
</div>
new Vue({
  el: '#emit-example-argument',
  methods: {
showAdvice: function (advice) {
   alert(advice)
}
  }
})
实例方法 / 生命周期
8.vm.$mount( [elementOrSelector] )
参数：
{Element | string} [elementOrSelector]
{boolean} [hydrating]
返回值：vm - 实例自身
用法：
如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。
如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。
这个方法返回实例自身，因而可以链式调用其它实例方法。
示例：
var MyComponent = Vue.extend({
  template: '<div>Hello!</div>'
})
// 创建并挂载到 #app (会替换 #app)
new MyComponent().$mount('#app')
// 同上
new MyComponent({ el: '#app' })
// 或者，在文档之外渲染并且随后挂载
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)