refs的使用
<body>
<div id="app">
<App></App>
</div>
<script src="../vue.js"></script>
<script>
Vue.component('Test',{
data() {return {}},
})
const App ={
data() {return {}},
mounted() {
//1.如果给标签添加ref，获取的就是真实的DOM节点
console.log(this.$refs.btn);
//加载页面 自动让输入框获取焦点
this.$refs.input.focus();
//2.如果给子组件添加ref，获取的是当前子组件对象
console.log(this.$refs.test);
},
template:`
<div>
<Test ref='test'></Test>
<input type="text" ref='input'/>
<button ref='btn'>改变生死</button>
</div>
`
}
new Vue({
el:'#app',
data:{},
components:{
App
}
})
</script>
</body>
nextTick
<div id="app">
<h3>{{msg}}</h3>
</div>
<script src="../vue.js"></script>
<script>
const vm = new Vue({
el:'#app',
data:{
msg:'qaq'
}
})
vm.msg='new msg';
console.log(vm.$el.textContent);//qaq
//为了数据变化之后等待vue完成更新DOM，可以在数据变化之后立即使用Vue.nextTick
//在当前的回调函数中能获取最新的DOM
Vue.nextTick(()=>{
console.log(vm.$el.textContent);//new msg
})
</script>
对象变更检测
两种方法
- this.$set(Object,key,value)
- Object.assign()
<body>
<div id="app">
<h3>
{{user.name}},{{user.age}},{{user.sex}}
<button @click = 'handlerAdd'>添加属性</button>
</h3>
</div>
<script src="../vue.js"></script>
<script>
//Vue不能检测对象属性的添加和删除
new Vue({
el:'#app',
data:{
user:{}
},
methods: {
handlerAdd(){
//Vue.set(object,key,value)添加响应式属性
// this.user.age=20;//无变化
//1.this.$set
// this.$set(this.user,'age',20);
//2.Object.assign()
this.user = Object.assign({},this.user,{
age:20,
sex:'man'
})
}
},
created() {
setTimeout(()=>{
this.user = {
name:'张三'
}
},1000)
},
})
</script>
</body>
mixin
1. mixmin来分发Vue组件中的可复用功能
2. mixmin里的方法属性都会混合进该组件内部中
3. 如果命名冲突 优先使用原本组件的属性方法
<body>
<div id="app">
{{msg}}
</div>
<script src="../vue.js"></script>
<script>
const myMixin = {
data() {
return {
msg:'123'
}
},
created() {
this.sayHello();
},
methods: {
sayHello(){
console.log('hello,mixmin');
}
},
}
new Vue({
el:'#app',
data:{
title:'qaq'
},
mixins:[myMixin]
})
</script>
</body>
PS:一般用于两个或多个组件上有相同逻辑，且可以用相同代码写出时。将这部分代码const成对象，将该对象mixins入对应的组件。
全局的mixin要格外小心 每个组件实例创建时 它都会被调用
写法为：Vue.mixin({})
注册全局组件的方式
1.在组件中
export default {
name:'ShoppingCart' //组件名 注册全局组件时使用
}
2.在main.js中引入 注册
import ShoppingCart from '@/components/ShoppingCart'
Vue.component(ShoppingCart.name, ShoppingCart)
