Vue基础(二) - 技术栈

1.Vue的生命周期

2.Vue的组件

2.1 多文件组件

2.1.1 含义

即一个文件里面包含多个组件

2.1.2 用法

组件主要分成三部分:

1.定义组件，通过Vue.extend定义组件

2.注册组件，在Vue的components中加入组件,此时注册的时候定义的组件名称

3.使用组件，将组件直接写入到模板中

javascript 复制代码

<body>
    <div id="root">
        <!-- 4.使用组件 -->
        <school></school>
        <student></student>
    </div>
    <script>
        
        // 1.定义student组件
        const student = Vue.extend({
            template:
            `
            <div>
            名称:<h1>{{name}}</h1>
            年龄:<h1>{{age}}</h1>
            </div>
            `,
            data() {
                return {
                    name :"张三",
                    age:12
                }
            }
        })
        // 2.定义的school组件
        const school = Vue.extend({
             template:
            `
            <div>
            地址:<h1>{{addreass}}</h1>
            </div>
            `,
                data() {
                    return {
                        addreass: "北京"
                    }
                }
            })

        // 3.注册组件
        new Vue({
            el:"#root",
            components:{
                student,school
            }
        })
        
    </script>
</body>

2.2 特别说明

1.上面的school组件本质上就是一个VueComponent的构造函数，并且不是程序员生成的，而是有Vue.extend生成的

2.每次写一个VueCompoent组件，都会调用new VueComponent(option)生成一个VueCompoent的实例。

3.注意，每次调用Vue.extend返回的都是一个新的VueComponent实例。

4.在组件配置中，method，computed,watch中的函数都指向VueComponent这个实例。

2.3 一个内置关系

存在一个内置关系

javascript 复制代码

VueComponent.prototype.__proto__=Vue.prototype

这样做的目的是让VueComponent找不到属性时，可以向上寻找，去Vue的原型对象上寻找。

3.Vue脚手架

3.1 Vue脚手架的创建

bash 复制代码

npm install -g vue@cli
vue create xxxx

注意：如果是Vue2的话，脚手架需要低于4版本

3.2 Vue脚手架-render

3.2.1 vue.js和vue.min.js的区别

vue.js包含vue的核心文件和模板解析器，但是vue.min.js并不包含模板解析器。

3.2.2 render的作用

由于没有模板解析器，所以不能使用template配置项，需要通过render函数接收到的createElement函数去解析组件。

3.3. 修改Vue脚手架的默认配置

查看默认配置

bash 复制代码

vue inspect > output.js

如果需要修改，可以修改vue.config.js这个文件，遵循nodejs的语法规范，并且会进行合并。

bash 复制代码

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

4.ref属性

4.1 作用

给某个标签机上ref属性后，可以通过this.$refs.属性名来获取对应的标签或者子组件（如果是加在Vue组件上）

4.2基本用法

javascript 复制代码

<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <button ref="btn" @click="test">点我查看组件</button>
        <MyHeader ref="header"></MyHeader>
      </div>
    </div>
  </div>
</template>

<script>
import MyHeader from "./components/MyHeader.vue";

export default {
  name: "App",
  components: {
    MyHeader
  },
  data() {
    return {};
  },
  methods: {
    test() {
      console.log(this.$refs.btn);
      console.log(this.$refs.header);
    },
  },
};
</script>

5.props

5.1 作用

父组件向子组件传递数据

5.2 基本用法

父组件传递信息

javascript 复制代码

<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <MyHeader ref="header" name="张三" :age="18"></MyHeader>
      </div>
    </div>
  </div>
</template>

注意：入股需要串一个计算的值过去，可以通过:age的方式，来保证传递的是一个js表达式，并将js表达式传递过去

子组件接收:

javascript 复制代码

export default {
  name: 'MyHeader',
  data() {
    return {};
  },
  props:['name','age'],

  components: {},

  computed: {},

  methods: {
      add(e) {
         this.addTodo(e.target.value);
      }
   
  },
};

5.3 特殊说明

1.严格的数据传递

javascript 复制代码

 props:{
    name:{
      type:String,  //接收参数类型
      required:true, //是否必传
      default:"默认值" //默认值
    }
  },

2.props是只读的

如果需要修改，可以复制一份到data中，在data中进行修改