怎样看网站有没有做301,成都布马网络科技有限公司,天津滨海新区旅游景点,网络公司网站源码下载一、场景描述 我们在页面的开发过程中#xff0c;经常需要操作dom元素#xff0c;来实现我们需要的效果。 以往js中#xff0c;我们是通过给dom添加id#xff0c;然后#xff0c;通过js代码document来获取这个dom 简写代码案例#xff1a; h2 idtest经常需要操作dom元素来实现我们需要的效果。 以往js中我们是通过给dom添加id然后通过js代码document来获取这个dom 简写代码案例 h2 idtest这里是h2标签/h2scriptdocument.getElementById(test) /script二、使用ref获取dom元素 1、ref加在html元素上 我们学习Vue之后就不在使用这个方法来获取dom元素了。 一般我们在Vue中都是在vc中操作dom 所以这个时候我们使用ref属性来获取dom从而实现操作效果。 简写代码案例 h2 v-textmsg reftitle/h2scriptconsole.log(this.$refs.title); /script效果展示 2、ref加在vue组件上 简写代码案例 School refsch/ scriptconsole.log(this.$refs.sch); /script效果展示 3、直接输出$refs h2 v-textmsg reftitle/h2 button clickshowDOM refbtn点我输出上方的DOM元素/button School refsch/scriptconsole.log(this.$refs); /script效果展示 三、总结 被用来给元素或子组件注册引用信息id的替代者应用在html标签上获取的是真实DOM元素应用在组件标签上是组件实例对象vc使用方式 打标识h1 refxxx...../h1或 School refxxx/School获取this.$refs.xxx 这对后面学习组件间通信非常有用 四、完整代码 templatedivh2 v-textmsg reftitle/h2button clickshowDOM refbtn点我输出上方的DOM元素/buttonSchool refsch//div /templatescript//App组件是汇总所有的组件的组件所以这里需要引入所有的它直接管理的子组件//引入School组件import School from ./components/Schoolexport default {name: App,components:{School},data() {return {msg:欢迎学习Vue}},methods:{showDOM(){console.log(this.$refs.title) //真实DOM元素console.log(this.$refs.btn) //真实DOM元素console.log(this.$refs.sch) //School组件的实例对象vc}}} /script