Vue笔记四:Vue获取DOM元素和组件元素的方法

文章目录

    • Vue获取组件元素
    • ref获取组件元素

Vue获取组件元素

如果想使用哪个DOM元素,就给它加上ref属性,然后用$refs属性获取它的元素对象,示例如下:
全部代码:

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue获取DOM元素的方法title>
	head>
	<body>
		<div id="app">
			
			<h1 ref="h1text">yoyo!这里是h1h1>
			<input type="button" name="单击" @click="btn" value="单击" />
		div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8">script>
		<script>
		var vm=new Vue({
			el:'#app',
			data:{
				
			},
			methods:{
				btn(){
					// 使用this.$refs.自定义属性,即可获取到我们刚刚定义到的标签
					console.log(this.$refs.h1text)
				}
			}
		})
		script>
	body>
html>

运行:
Vue笔记四:Vue获取DOM元素和组件元素的方法_第1张图片

ref获取组件元素

可在上一步代码基础之上进行修改
一共是三步
第一步:创建组件,声明数据和方法
第二步:为组件添加ref属性
第三步:通过$refs属性获取组件
全部代码:

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue获取DOM元素的方法title>
	head>
	<body>
		<div id="app">
			
			<h1 ref="h1text">yoyo!这里是h1h1>
			<input type="button" name="单击" @click="btn" value="单击" />
			<login ref="mylogin">login>
		div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8">script>
		<script>
		// 创建组件login
		var login={
			template:'

登录

'
, data(){ return { // 声明数据 msg:'子组件内容' } }, methods:{ // 声明子组件的方法 show(){ console.log("子组件的方法") } } } var vm=new Vue({ el:'#app', data:{ }, methods:{ btn(){ // 使用this.$refs.自定义属性,即可获取到我们刚刚定义到的标签 console.log(this.$refs.h1text.innerText) console.log(this.$refs.mylogin.msg) this.$refs.mylogin.show() } }, components:{ login } })
script> body> html>

运行
Vue笔记四:Vue获取DOM元素和组件元素的方法_第2张图片

你可能感兴趣的:(Vue,vue.js,javascript,前端)