<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
Vue.component('Sub', {
template: `
<div class="sub">子组件</div>
`
});
var App = {
template: `
<div>
<input type="text" ref="input">
<button ref="btn1">btn1</button>
<button ref="btn2">btn2</button>
<Sub ref="subref"/>
</div>
`,
created() {
console.log(this.$refs.input); // undefined
},
beforeMount() {
console.log(this.$refs.input); // undefined
},
mounted() {
console.log(this.$refs.input); // <input type="text">
console.log(this.$refs.btn1); // <button>btn1</button>
console.log(this.$refs.btn2); // <button>btn2</button>
console.log(this.$refs.subref); // VueComponent Sub子组件
}
};
new Vue({
el: '#app',
data() {
return {
}
},
components: {
App
},
template: `<App />`
});
</script>
</body>
</html>