前端Vue2-Day52

Vue组件化编程：

非单文件组件：一个文件包含n个组件

① 定义组件：Vue.extend(options)创建，在options内部不能写el(组件都需要经过vm统一管理和分配)，data必须写成函数模式，避免组件复用时数据存在引用关系。

② 注册组件：局部注册：new Vue时创建的components属性。全局注册：Vue.component('组件名'，组件)

③ 使用组件(直接在页面写组件标签)

 

注意点：

① 组件命名：

• 一个单词：首字母大写或首字母小写
• 多个单词：短横线命名（school-name）或大驼峰命名（SchoolName）需要Vue脚手架支持
• 可以在组件内部定义name配置项指定组件在开发者工具中呈现的名字

② 组件标签：

1.<school></school>写法

2.<school/>写法：若不在Vue脚手架环境下，则该种写法会导致后续组件不能渲染。

③ 定义的简写方式：

const xxx = Vue.extend(options) 可简写为 const xxx = options

const person = {
            data() {
                return {
                    name: 'LWH',
                    age: 18
                }
            },
            template: `
            <div>
                <h1>name: {{name}}</h1>
                <h2>age: {{age}}</h2>
            </div>
            `,
  }

 

组件嵌套：可以在组件内部再次注册组件，利用app组件管理所有子组件。

　　　　const student = Vue.extend({
            template: `<div>
                <h2>{{name}}</h2>
                <h2>{{age}}</h2>
            </div>`,
            data() {
                return {
                    name: 'LWH',
                    age: 22
                }
            }
        })
        const school = Vue.extend({
            template: `<div>
                <h2>{{name}}</h2>
                <h2>{{address}}</h2>
                <student></student>
            </div>`,
            data() {
                return {
                    name: 'HNU',
                    address: 'HRB'
                }
            },
            components: {
                student
            }
        })
        const hello = Vue.extend({
            template: `<h2>Hello {{name}}</h2>`,
            data() {
                return {
                    name:'LWH'
                }
            }
        })
        // 管理所有组件的组件
        const app = Vue.extend({
            template: `<div>
                    <school></school>
                    <hello></hello>
                </div>`,
            components: {
                school,
                hello
            }
        })
        new Vue({
            el: '#root',
            components: {
                app
            },
            template:`<app></app>`
        })

 

VueComponent：

① 组件本质为VueComponet的构造函数，由Vue.extend(options)生成。

② 编写组件标签时，Vue会自动创建组件的实例对象，即执行new VueComponent(options)

③ 每次调用Vue.extend，返回的都是一个全新的VueComponent！

④ this指向：

1. 组件配置中，data函数，methods函数，watch函数，computed函数等的this，均指向VueComponent实例对象。

2. new Vue(options)中的以上函数，this指向为Vue实例对象。

组件和Vue实例接受相同的配置选项（data，methods，生命周期钩子等），但el配置项组件不能配置。

-------------------------------------------------------------------------------------

VueComponent.prototype.__proto__ = Vue.prototype

-------------------------------------------------------------------------------------

 

 

 

单文件组件：一个文件仅包含一个组件

文件结构：

子组件.vue：<template>模板结构</template> <script>export default {子组件配置}</script> <style>结构渲染</style>

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

<script>
export default {
  name:'School',
  data() {
    return {
      name:'HNU',
      address:'HAERBIN'
    }
  },
};
</script>

<style>
  #school {
    color: skyblue;
  }
</style>

入口文件main.js：导入App.vue并声明new Vue

// 入口文件
import App from './App.vue'

new Vue({
    el: '#root',
    components: { App },
    template: '<App></App>'
})

统一管理子组件的App.vue：

// App.vue 负责管理所有组件
<template>
  <div>
    <School></School>
    <Student></Student>
  </div>
</template>

<script>
import School from "./School.vue";
import Student from "./Student.vue";
export default {
  components: {
    School,
    Student,
  },
};
</script>

<style>
</style>

页面index.html

此时不能运行，需要引入脚手架Vue cli 

 

Vue脚手架：vue cli (command line interface)

安装：

① 全局安装@vue/cli：npm i -g @vue/cli

② 切换到要创建项目的目录，vue create xxx

③ 启动项目：npm run serve

 

关于不同版本的vue：

① vue.js是完整版的vue，包含核心功能+模板解析器。

② vue.runtime.xxx.js是运行版的vue，只包含核心功能，没有模板解析器。

由于vue.runtime.xxx.js没有模板解析器，故不能使用template配置项，需要使用render函数接受createElement函数去指定具体内容。

 

render函数：字符串模板的代替函数

① 接受createElement函数，该函数接受参数，创建一个模板。

② Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。