vue[TOC] 使用Vue脚手架脚手架文件结构关于不同版本的vue vue.js与vue.runtime.xxx.

[TOC]

使用Vue脚手架

脚手架文件结构

vue_test                 
├─ public                
│  ├─ favicon.ico   //页签图标     
│  └─ index.html    //主页面    
├─ src                   
│  ├─ assets        //存放静态资源     
│  │  └─ logo.png        
│  ├─ components    //存放组件     
│  │  └─ SchoolInfo.vue  
│  ├─ App.vue       //汇总所有组件     
│  └─ main.js            
├─ babel.config.js   //label配置文件    
├─ jsconfig.json         
├─ package.json      //应用包配置文件    
├─ README.md        //应用描述文件     
├─ vue.config.js         
└─ yarn.lock

关于不同版本的vue

vue.js与vue.runtime.xxx.js的区别
1. vue.js是完整的vue，包含：核心功能+模板解析器
2. vue.runtime.xxx.js是运行版的vue，只包含：核心功能，==没有模板解析器==
因为没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容

ref属性

被用来给元素或子组件注册引用信息（==id的替代者==）
应用在HTML标签上获取==真实DOM元素==，应用在组件标签上是用来获取==组件实例对象==
使用方式

<h1 ref='xxx'></h1>  <school ref='xxx'></school>
      获取：
      this.$refs.xxx

配置项props

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

1.传递数据： 
<Demo name="xxx" :age="19"/>
2.接收数据：
      1.只接收
        props:['name']
      2.限制类型
        props:{
          name:String
        }
3.限制类型、必要性、默认值
        props:{
          name:{
            type:String,
            required:true
          },
          age:{
            type:Number,
            default:99
          }
        }

      备注：props是只读的，Vue底层会监测你对props的修改，要是一定要修改就复制一份props的内容到data中，修改data中的数据

mixin(混入)

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

 使用方式：
      第一步定义混合.js
      {
        data(){},
        methods:{}
      }
      第二步使用混入
        (1).Vue.mixin(a)——全局，每个组件都混入
        (2).mixins:[a,b,...]——对应组件混入

插件

功能：增强vue,把很多写的东西都可以用到组件中。就是你已经使用了某个设置，你还可以在插件里全局再设置一次，统一改变你使用的某个设置

本质：包含==install==方法的一个对象，install的第一个参数是vue,第二个及以后的参数自定义

1.定义插件：
	export default {
        install(Vue,x,y){
            console.log(x,y)
            
        // 全局过滤器 
        Vue.filter('mySlice', function (value) {
            return value.slice(0, 4)
        })

        // 全局指令 使用了fbind就会执行指令
        Vue.directive('fbind', {...})

        // 定义混入，所有vc、vm都有
        Vue.mixin(...)

        // 给Vue原型添加方法
        Vue.prototype.hello = () => {
            alert('HI!')
        }
        }
    }
2.使用插件：在main.js中引入并使用
	Vue.use(plugins)

scoped/lang

scoped让样式在==局部生效==，防止冲突。

lang='less'代表less语言，less语言最大的特点是可以嵌套css样式，不写默认css

vue所有组件最终样式都会汇总到一起。要是有例如School.vue和Student.vue都有同一个类名会冲突
<style lang="less" scoped>
.test {
  color: rgb(238, 138, 201);
}
</style>

todoList案例

兄弟组件之间通信，初级方式：==通过父组件传递==。父组件给子①传入一个函数，①通过函数将对象给父，父将对象再传给②。注意父组件不得与子组件相同函数名。（否则①收到props¹优先级最高，会覆盖本组件方法）

props优先级最高 ↩

vue