Vue2学习笔记03——Vue组件化编程

一、模板与组件，模板化与组件化

组件的基本使用：
- Vue中使用组件的三大步骤
  - 定义组件（创建组件）
  - 注册组件
  - 使用组件（写组件标签）
- 如何定义一个组件
  -使用Vue.extend(options)创建
- 如何注册组件
  - 局部注册：靠new Vue的时候传入components选项
  - 全局注册：靠Vue.conponent(‘组件名’,组件)注册
- 在页面中使用自定义组件标签 <组件名></组件名>

组件

关于组件名：
- 由一个单词组成：第一种写法（首字母大写）；第二种写法（首字母小写）
- 由多个单词组成：第一种写法（Kabad-case命名）；第二种写法（CamelCase命名）
注：组件命名注意点：
- 组件命名尽可能回避HTML中已有的元素名称，如h2,H2都不可以
- 可以使用name:""配置项指定组件在开发者工具中呈现的名字。
关于组件标签
- 第一种写法：<school></school>
- 第二种写法：<school/>
- 备注：不使用脚手架时，使用<school/>会导致后续组件无法渲染

一种简写方式：

定义组件：

//定义组件的一般方式
//const school=Vue.extend(options);
 const school=Vue.extend({
     name:"school",
     template:`模板内容`,
     data(){
         return{

         }
     }
 })
 //简写方式
 const school=options

组件嵌套
- 组件的嵌套需要注意定义组件的顺序，需要在定义组件之后使用嵌套组件
- 一般会以app作为整个页面的应用组件，在里面进行组件嵌套的管理，只负责组件嵌套的管理
VueComponent的相关知识
- school组件的本质是一个名为 VueComponent 的构造函数，且不是程序员自定义的，是vue.extend生成的。
- 我们只需要写<school></school>或者<school/>，Vue解析时会帮助我们建立school组件的实例对象，即Vue帮助我们执行：new VueComponent(options)
- 特别注意：每次调用Vue.extend，返回的都是最新的 VueComponent
- 关于this指向：
  - 组件配置中：data函数、methods中的函数、watch函数、computed函数。它们的指向均为【VueComponent实例对象】
  - new Vue()配置中：data函数、methods中的函数、watch函数、computed函数。它们的指向均为【Vue实例对象】
- VueComponent的实例以后简称vc（也可称为：组件实例对象）
- Vue的实例对象简称为vm

Vue实例与组件实例

构造函数与原型对象

//定义一个构造函数
function Demo() {
    this.a = 1
    this.b = 2
}
//c创建一个Deom的实例对象
const d = new Demo()
console.log(Demo.prototype); //显式原型属性
console.log(d.__proto__) //隐式原型属性
    //程序员通过显式原型属性操作原型对象，追加一个x属性，
Demo.prototype.x = 99
console.log("ee", d.x)

一个重要的内置关系：VueComponent.prototype.__proto === Vue.prototype
为什么要这个关系：让组件实例对象（vc）可以访问Vue原型上的属性和方法

单文件组件
- Vetur插件是vscode展示编写vue文件代码的插件
- Vue单文件组件的基本结构
- 单个组件在<script></script>标签中使用ES6的三个到处语法均可以到处，一般使用默认导出。

三、使用Vue脚手架

Vue脚手架是Vue官方提供的一个标准化开发工具（开发平台）
- 官方文档：https://cli.vuejs.org/zh/
- 基本使用：
  - 第一步（仅第一次执行）：全局安装 @vue/cli
    1
    npm install -g @vue/cli
  - 第二步：切换到需要创建项目的目录，然是使用命令创建项目
    1
    vue create xxx
  - 第三步：启动项目
    1
    npm run serve
  - 注：若出现下载缓慢的情况，配置npm淘宝镜像
    1
    npm config set registry https://registry.npm.taobao.org

main.js中实例化vue遇到的render()函数

new Vue({
 //主要功能，将App组件放入容器中
 render: h => h(App),
 //render的一般写法，createElement的类型是一个函数
 render(createElement){
   return createElement('h2','你好呀')
 }
}).$mount('#app')

关于不同版本的Vue:
- vue.js与vue.runtime.xxx.js的区别
  - vue.js是完整版的Vue，包含：核心功能+模板解析器
  - vue.runtime.xxx.js是运行版的Vue, 只包含：核心功能，没有模板解析器
- 因为vue.runtime.xxx.js没有模板解析器，因此不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。
修改脚手架默认配置 vue.config.js
- 在最外层目录新建 vue.config.js 文件
- 使用如下命令可以查看vue脚手架的默认配置
  1
  vue inspect > output.js
- 使用 vue.config.js 文件可以对脚手架的一些默认配置进行修改，具体修改详情：https://cli.vuejs.org/zh/config/
ref属性
- 被用来给元素或子组件注册引用信息（id的替代者）
- 应用在html标签上获取真实的DOM元素，应用在组件标签上是组件的实例对象（vc）
- 使用方式
  - 标识符：<h1 ref="xxx">......<h1/> 或者 <School ref="xxx"><School/>
  - 获取：this.refs.xxx

props配置

props配置项的功能：让组件接收外部传过来的数据

传递数据
1
<Demo name="xxx" :age="xxx" sex="xxx">

接收数据

//父组件向子组件传值，简单声明接收
 props:['name','age','sex'],
 //接收的同时对数据类型进行限制
 props:{
     name:String,
     age:Number,
     sex:String
 },
 //接收的同时:对数据类型进行限制+默认值的指定+必要性的限定
 props:{
     name:{
         type:String,   // name为字符串属性
         required:true,   //name为必要的
     },
     age:{
         type:Number,
         default:99, //默认值
     },
     sex:{
         type:String,
         required:true,
     }
 }

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

mixin混入（混合）
- 功能：可以把多个组件公用的配置提取成一个混入对象
- 使用方式：
  - 第一步：混合
    1
    2
    3
    4
    5
    {
    data(){return{......}},
    methods:{....},
    ....
    }
  - 第二部：使用混合,可以分为全局混入和局部混入
    1
    2
    3
    4
    5
    //全局混入
    Vue.mixin(xxx)
    
    //局部混入
    mixins:[xxx,xxx]

Vue技术——插件

功能：用于增强Vue
本质：包含install方法的一个对象，install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。

定义插件：

对象.install=function(Vue,options){
  //1.添加全局过滤器,mySlice为过滤器名称
    Vue.filter('mySlice',function(value){
      return value.slice(0,5)
    })
  //2. 添加全局指令
    Vue.directive(...)
  //3. 配置全局混入（合）
   Vue.mixin(...)
  //4. 添加实例方法
    Vue.prototype.$myMethod=function(){......},
    Vue.prototypt.$myProperty=xxx
}

使用插件：Vue.use()

scoped样式
- 作用：让样式在局部生效，防止冲突
- 写法：<style scoped>
TodoList案例
- 组件化编码流程（通用）
  - 实现静态组件：抽取组件，使用组件实现静态页面
  - 展示动态数据：
    - 数据类型是什么
    - 数据名称是什么
  - 交互——从绑定事件监听开始
- props适用于
  - 父组件 ==> 子组件通信
  - 子组件 ==> 父组件通信（要求父组件先给子组件一个函数）
- 使用v-model需要注意：v-model绑定的值不能是props传递过来的值，因为props是不可以修改的
- props传递过来的若是对象类型的值，修改对象中的属性时Vue不会报错，因为对象中的属性被修改不能被vue所监视到，但是不推荐直接使用。