前端vue入门(纯代码)05

【02.ref属性】

ref属性

1. 被用来给元素或子组件注册引用信息（id的替代者）
2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
3. 使用方式：
   1. 打标识：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School>
   2. 获取：this.$refs.xxx

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

components/School.vue

<template>
  <div class="school">
    <h2>学校名称：{{ name }}</h2>
    <h2>学校地址：{{ address }}</h2>
  </div>
</template>

<script>
  export default {
    // 变量值:不许用双引号"",只能用单引号''。
    name: 'School',
    data() {
      return {
        name: '小鸡岛职业技术学院',
        address:'小鸡岛',
      }
    },
  }
</script>

<style>
 .school{
  background-color: antiquewhite;
 }
</style>

• 使用v-text和v-html指令来替代 {{}}

  说明：

  v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出

  v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

App.vue

<template>
  <div class="d1">
    <!-- 使用v-text和v-html指令来替代 {{}} -->
    <h1 v-text="msg" id = "title"></h1>
    <button @click="showDOM">点我输出上方的DOM元素</button>
    <!-- 组件标签中采用id打标识 -->
    <School id="sch"/>
  </div>
</template>

<script>
import School from './components/School'

  export default {
    name:'App',
    components: { School },
    data() {
      return {
        msg:'欢迎来到小鸡岛学理发！'
      }
    },
    methods:{
      showDOM(){
        // 采用js方法获取DOM元素
        console.log(document.getElementById('title'))
        // <h1 id = "title">欢迎来到小鸡岛学理发！</h1>
        // 获取的是School组件中的整个div模板，获取的是：真实DOM
        console.log(document.getElementById('sch'))
        //   <div class="school" id="sch">....</div>
      }
    },  
  }
</script>

<style>
/* 类class="d1"的样式设置 */
 .d1{
  background-color: aquamarine;
 }
</style>

点击事件的两个输出：

1. document.getElementById('title') ====》 <h1 id = "title">欢迎来到小鸡岛学理发！</h1>

2. document.getElementById('sch') ====》<div class="school" id="sch">....</div>【包含了 id=“sch”】

vue也有自带的获取DOM的方法，那就是ref。它不仅可以获取DOM元素还可以获取组件

1、如果给普通的dom元素使用，引用指向的是dom元素。
2、如果是给子组件使用，引用指向的是子组件的实例。

App.vue文件

<template>
  <div class="d1">
    <!-- 使用v-text和v-html指令来替代 {{}} -->
    <h1 v-text="msg" id = "title" ref="title"></h1>
    <button @click="showDOM" ref="btn">点我输出上方的DOM元素</button>
    <!-- 组件标签中采用id打标识 -->
    <School id="sch" ref="sch"/>
  </div>
</template>

<script>
//引入School组件
import School from './components/School'

  export default {
    name:'App',
    components: { School },
    data() {
      return {
        msg:'欢迎来到小鸡岛学理发！'
      }
    },
    methods:{
      showDOM(){
        // 采用js方法获取DOM元素
        console.log(document.getElementById('title'))
        // <h1 id = "title">欢迎来到小鸡岛学理发！</h1>
        // 获取的是School组建中的整个div模板，获取的是：真实DOM元素
        console.log(document.getElementById('sch'))
        //   <div class="school" id="sch">....</div>

        // this 是App组件的实例对象
        console.log(this.$refs.title) //真实DOM元素
		console.log(this.$refs.btn) //真实DOM元素
		console.log(this.$refs.sch) //不是DOM元素，是School组件的实例对象（vc）
        console.log(this.$refs) //{title: h1#title, btn: button, sch: VueComponent}
      }
    },  
  }
</script>

<style>
/* 类class="d1"的样式设置 */
 .d1{
  background-color: aquamarine;
 }
</style>

一、获取DOM，操作DOM

1、给dom节点记上ref属性，可以理解为给dom节点起了个名字。

2、加上ref之后，在$refs属性中多了这个元素的引用。

3、通过vue实例的$refs属性拿到这个dom元素，然后就可以对这个DOM元素进行操作了。

二、获取组件，拿到组件中的变量和方法

• ref 加在子组件上，用this.$refs.（ref值） 获取到的是组件实例，可以使用组件的所有方法和属性。

1、给组件记上ref属性，可以理解为给组件起了个名字。

• 【<School ref="sch"/>】

2、加上ref之后，在$refs属性中多了这个组件的引用。

• 【this.$ref.School】:拿到了School组件实例对象

3、通过vue实例的$refs属性拿到这个组件的引用，之后可以通过这个引用调用子组件的方法，或者获取子组件的数据。

• 【this.$ref.School.xxx】:拿到了School组件实例对象里的方法xxx或属性xxx

ref优点

1. ref是vue里的方法，更加安全，不会依赖class或者id的样式变了而影响布局。
2. vue的主要目的是减少dom的操作。减少dom节点的消耗。

【03.props配置】

请先点连接：vue中组建的props属性的详细介绍【必点】

问题1：如果子组件Student.vue接收到数据后，要对数据进行操作，比如说：让显示在页面上的年龄比接收到的年龄要大，怎么操作？–> 通过 v-bind绑定属性 ,其属性值是 运行引号里面JS表达式执行的结果

1. 功能：让组件接收外部传过来的数据。

   【props主要用于组件的传值，他的工作就是为了接收外面传过来的数据，与data、el、ref是一个级别的配置项。】

2. 使用场景：父组件与子组件的通信。

3. 传递数据：<Demo name="xxx"/>

4. 接收数据：【props接收到的数据是放在组件实例对象VC上面】

   1. 第一种方式：简单声明接收（只接收）

       props:['name'] 
      

   2. 第二种方式（限制类型）：

        props: {
          name:string
        }
      

   3. 第三种方式（限制类型、限制必要性、指定默认值）：

      props:{
      	name:{
      	type:String, //类型
      	required:true, //必要性
      	default:'老王' //默认值
      	}
      }
      

   总结：

   1.如果父组件给子组件传递数据（非函数）： 本质其实是父组件给子组件传递数据

   2.如果父组件给子组件传递数据（函数）：本质其实是子组件给父组件传递数据

   3.如果props中的属性和data中的属性相同，那么显示的为props中的属性，优先级：props > data，但控制台会发出警告

   4.props是单向数据流，默认是只读的

   5.props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

App.vue文件

<template>
  <div>
    <!-- 大春：会报错的，age传的类型需要number，但是此处传的是字符串 -->
    <!-- <student name="大春" age="22" sex=" 男"></student> -->
    <!--江主任：加了：，即v-bind：value的简写形式
    v-bind:单向绑定(v-bind),数据只能从data流向页面。  -->
    <student name="江主任" :age="35" sex="女"></student>
  </div>
</template>

<script>
//引入Student组件
import Student from './components/Student'

  export default {
    name:'App',
    components: { Student }
  }
</script>

• 在html代码中，v-bind绑定的是动态的表达式，而非固定的字符串，在v-bind后，就可以动态获取数据。
• v-bind支持的类型：
  • html中的属性、css的样式、对象、数组、number 类型、bool类型。

Student.vue文件

<template>
	<div>
		<h1>{{ msg }}</h1>
		<h2>学生姓名：{{ name }}</h2>
		<h2>学生性别：{{ sex }}</h2>
		<!-- <h2>学生年龄：{{ age }}</h2> -->
		<h2>学生年龄：{{ newAge }}</h2>
		<button @click="updateAge">修改收到的年龄</button>
	</div>
</template>

<script>
export default {
	// 变量值:不许用双引号"",只能用单引号''。
	name: 'Student',
	data() {
		console.log(this);//组件Student实例对象VueComponent
		return {
			msg: '我是小鸡岛职业技术学院的一名学生',
      newAge:this.age,
		};
	},
	methods: {
      // 【this.age++】：浏览器页面显示的值会变，但是控制台会出现警告，
      // 最好是使用data属性或computed属性去修改该值。
		updateAge() {
            //this.age++
			this.newAge ++
		},
	},
  //简单声明接收
  // props: ['name','age','sex']

  //接收的同时对数据进行类型限制
		/* props:{
			name:String,
			age:Number,
			sex:String
		} */

		//接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
		props:{
			name:{
				type:String, //name的类型是字符串
				required:true, //name是必要的，必须传参
			},
			age:{
				type:Number,
				default:99 //默认值【一般default和required不会同时出现】
			},
			sex:{
				type:String,
				required:true
			}
		}
};
</script>