前端vue入门(纯代码)05

【02.ref属性】

ref属性

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

      .....

      或
   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

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

  说明：

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

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

App.vue

点击事件的两个输出：

1. document.getElementById('title') ====》

   欢迎来到小鸡岛学理发！

2. document.getElementById('sch') ====》

   ....
   【包含了 id=“sch”】

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

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

App.vue文件

一、获取DOM，操作DOM

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

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

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

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

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

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

• 【】

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. 传递数据：

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文件

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

Student.vue文件