组件|非单文件组件|单文件组件|脚手架

组件：

非单文件组件：

一个文件中包含有n个组件。后缀名*.html

单文件组件：

一个文件中只包含有1个组件。后缀名*.vue

非单文件组件：

1.创建组件：

const comp = Vue.extend({
/*name:'compp',*///使用这个配置项可以让组件名从始至终都叫compp
data(){

return (**);

}

template:''

}) ;

1.配置项中无el，最后由vm中的el决定服务哪个容器。

2.data必须写成函数。避免组件复用时，数据存在引用关系

3.template要有根节点

2.创建vm（注册组件）：

1.局部注册

new Vue({

el:'#root',

data:{},

//注册组件

components:{

comp:comp//key也就是标签名`

}})

2.全局注册

//全局注册组件

 Vue.component('hello', {

data(){

return { first: 'love' }

},

template: '<div>{{first}}</div>'

  })

new Vue({

el: '#q'

})

3.编写

4.几个注意的问题

1. ​ 如果一个单词，纯小写/首字母大写

   ​ 多个单词：多个单词，用短横连接 s-b / 脚手架环境里用首字母大写，如：SomeBody

   ​ 注：1）. 组件名回避HTML已有元素名称

   ​ 2） .可以使用name配置项指定组件在开发者工具中呈现的名字。

2. 组件标签第一种写法 <com></com>

​ 第二种写法<com/>

​ 注：不使用脚手架时，第二种会导致后续组件不能渲染。

3. 一个简写方式：

//省略了vue.extend()
const com = {
            data(){
            return { first: 'love' }
        },
            template: '<div>{{first}}</div>'
    })
        new Vue({
            el: '#q'
        }

原理？：vue中有判断函数，如果写入components中没经过extend函数，vue会自动帮你补上。

组建的嵌套：

哇绕绕的

容器里可以不写东西，在Vue里写个template配置项。

VueComponent：

1. 组件本质是一个名为VueComponent的构造函数，是Vue.extend()生成的。

2. 写<comp>时，Vue解析会帮我们创建comp组件的实例对象，即vue帮我们执行：new VueComponent(options)

3. 每次调用Vue.extend，返回的都是一个全新的VueComponemt。

4. 关于this的指向：

   1. 组件配置中：

      data函数、methods中的函数、watch中的函数、computed中的函数，this都是VueComponent实例对象

   2. new Vue(options)配置中：

      data函数、methods中的函数、watch中的函数、computed中的函数，this都是Vue实例对象

一个重要的内置关系：

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

单文件组件：

后缀：.vue

处理加工方式：

1.webpack

2.脚手架：vue官方搭建好的

以School.vue（推荐命名用驼峰）为例：

里面的东西怎么写？

1. 三个标签：<template></template> <script></script> <style></style>

2. export default + 内容

脚手架：

结构：

搭建：

（Vue CLI命令行接口工具）

搭建后打开的样子，命令： npm run serve

ps:运行时一定要进入有package.json的文件夹中。（小伙伴遇到问题可下方留言）

render：

创建元素：

render(createElement){

return createElement('h1','value')

}

h函数就是vue中的createElement方法，这个函数作用就是创建虚拟dom，追踪dom变化的

ref:

用来获取节点

例如：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8lsj5rWi-1632842658571)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20210928145910990.png)]

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

props:

这个我理解起来有点难了o(╥﹏╥)o

大概就是，定制App的内容。通过修改App的内容，让子组件的显示发生改变。

功能：组件在复用，但是，数据是动态的。

//限制类型
props:{

name:String,

age:Number,

sex:String

}
/*********第二种写法************/
props:{
    name:{
        type:String,	//name的类型是字符串
		required:true,		//name是必要的
        default:99		//默认值
    }
}
/*******传数字要数据绑定，使引号里的为表达式而不是字符串******/
<h1 :age="19"></h1>
/****如何修改prop****/
export default{
    name:'Student',
    data(){
        return{
            myage:this.age //将props的内容复制到data中一份
        }   
    }
    methods:{
    updateAge(){
        this.myage++
    }
}
props:['age']
} 

注：props是只读的，Vue底层会检测你对props的修改，如果进行了修改，会发生警告。若业务

需求确实需要修改，那么请将复制props的内容到data中一份，然后去修改data中的数据。
myage:this.age //将props的内容复制到data中一份
}
}
methods:{
updateAge(){
this.myage++
}
}
props:[‘age’]
}

注：props是只读的，Vue底层会检测你对props的修改，如果进行了修改，会发生警告。若业务

需求确实需要修改，那么请将复制props的内容到data中一份，然后去修改data中的数据。
##### mixin：

功能：可以把组件共用的配置提取成一个混入对象

使用方式：

第一步定义混合：

如{*****}

第二步使用混入：

1. 全局混入：Vue.mixin(**)
2. 局部混入： mixins:['xxx']

![image-20210928233729626](C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20210928233729626.png)

如图所见，让这两个组件如何共享

局部混合：

```JavaScript
export const mixin = {
    methods:{
        showName(){
            alert(this.name)
        }
    }
}
/**/
import {mixin} from '../mixin' 
    export default {
        name:'Student',
        data(){
            return{

                msg:'我是一个好人',
                myage:this.age
            }
        },
        mixins:[mixin],
    
    }
/**全局**/
import mixin from './mixin'
Vue.minxin(mixin)

岔件儿：

export default {

  install(){		//插件必加个install

    console.log('@@@install',Vue)

    Vue.filter('mySlice',function(value){

      return value.slice(0,4)

    })
  }
}
/***引入插件,main.js中***/
import plugins from './plugins'
Vue.use(plugins)

export default {

  install(Vue){

    console.log('@@@install',Vue)

    //全局过滤器

    Vue.filter('mySlice',function(value){

      return value.slice(0,4)
    })

    //定义全局指令

    Vue.directive('fbind',{

      //指令与元素绑定成功时（一上来）

      bind(element,binding){

        element.value = binding.value

      },

	//定义混入

Vue.mixin{

data(){

return{

x:100,

y:200}

}

}

      //指令所在元素被插入页面时

      inserted(element,binding){

        element.focus()

     },

     //指令所在的模板被重新解析时

     update(element,binding){

        element.value = binding.value

      }



    })

    //给vue原型上添加一个方法，vm，vc就都能用了

    Vue.prototype.hello = ()=>{alert('cnm')}

  }

功能：用于增强 Vue

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

定义插件：

对象.install = function (Vue,options){

//1.添加全局过滤

//2.添加全局指令

//3.配置全局混入

//4.添加实例方法：

Vue.prototype.$myMethod = function(){…}

Vue.prototypr.$myProperty=xx

}

使用插件。Vue.use(xx)

scoped样式：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hz9YpSIT-1632926254314)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20210929220419735.png)]

防止各个子标签的style混淆