推广网站有哪些比较好中国seo公司
首先,我们要明确一点,使用vue的好处是:
- 想要减少开发者直接操作dom元素。
- 使用组件模版,实现代码的服用。
ref的属性的实现是为了取代原生js中使用id、class等标识来获取dom元素。
helloworld组件
<template><div class="hello"><h2>毕业院校:{{name}}</h2></div>
</template><script>
export default {name: 'HelloWorld',data(){return{name:'浙江理工大学', }}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
app组件
<template><div id="app"><h1 ref="h1">简历</h1><button ref="btn" @click="printH1">开始</button><HelloWorld id="hello" ref="hello"/></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue'
//import SimpleResume from './components/SimpleResume.vue';export default {name: 'App',components: {HelloWorld},methods:{//打印根据ref取到的组件元素以及根据id获取到的组件元素printH1(){console.log(this);console.log(this.$refs.hello);console.log(document.getElementById('hello'));}}
}
</script>
App组件的打印结果,可以看到refs对象上有了三个子元素
helloword组件ref打印的结果以及id得到的结果
可以看到我们根据ref获取到的组件是组件对象,根据id的到的模版解析器解析后得到的标签元素。