Vue脚手架运用

一.脚手架的文件结构

需要注意的是：

• 执行完npm run serve 之后直接去运行main.js
• assets放静态资源，放大家共同享用的资源
• 所有组件都往components里面放唯独App.vue是王者不放里面

二.ref属性

• 被用来给元素或子组件注册引用信息（id的替代者）
• 应用在html标签上获取的是真实的DOM元素，应用在组件标签上是组件实例对象（vc）
• 打标识：< h1 ref=“xxx”> 获取：this.$refs.xxx

1.想获取上方DOM元素
如何写ref属性：写在标签上

<template>
  <div>
    <h1 v-text="msg" ref="title"></h1>
    <button ref="btn" @click="show">点我输出上方的DOM元素</button>
    <School/>
  </div>
</template>

如何使用：this.$refs.title在vc身上的$refs身上获取

methods: {
      show(){
          console.log(this.$refs.title);
      }
  },

2.现在在button身上添加ref属性

<h1 v-text="msg" ref="title"></h1>
    <button ref="btn" @click="show">点我输出上方的DOM元素</button>

输出this.$refs

给哪个标签属性加ref ，那么$ref就帮你收集哪个标签
3.如果给组件标签加ref

<School ref="sch"/>

this.$refs.sch

拿的是school组件实例对象，this.$refs.sch的sch就是school组件的实例对象

总结：

		console.log(this.$refs.sch);//school组件实例对象(vc)
          console.log(this.$refs.btn);//真实的DOM元素
          console.log(this.$refs.title);//真实的DOM元素

三.props配置

1.用组件将数据动态的传入
在App.vue文件里修改Student组件标签

<template>
  <div>
    <Student name="李四" sex="女" age="age" />
  </div>
</template>

但是上步操作只是将数据传入，但是还没告诉vue怎么用，我们需要在Student.vue文件里说一声传入的数据要用
props: ["name", "sex", "age"] 顺序可颠倒

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>姓名：{{ name }}</h2>
    <h2>性别：{{ sex }}</h2>
    <h2>年龄：{{ age }}</h2>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      msg: "我是美女",
    };
  },
  props: ["name", "sex", "age"],//简单声明接收
};
</script>

这样的话组件在复用数据可更改，在页面上显示的是两个相同的组件只是数据不一样

<template>
  <div>
    <Student name="李四" sex="女" age="18" />
    <Student name="张三" sex="男" age="20" />
  </div>
</template>

注意::age="18"加了冒号引号里面的值就是一个js表达式

<Student name="李四" sex="女" :age="18" />

props是只读的，vue底层会检测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据

四.mixin混入

两个组件共享一个配置，并且这个配置是一样的
将引入一个mixin.js将共用的放在这里

//mixin.js
export const hunhe = {
    methods:{
        showName(){
            alert(this.name)
        }
    }
}

在School.vue里引入import {hunhe} from '../mixin'与name平级写mixin:[hunhe]

五.插件

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

在main,js引入插件

import Vue from 'vue'
import App from './App.vue'
// 引入插件
import plugins from './plugins'
Vue.config.productionTip = false;
// 使用插件
Vue.use(plugins)
new Vue({
    el:'#app',
    render: h => h(App)
    
})

可以在plugins.js里写很多过滤器和自定义指令

在不同的组件写的样式会汇总在一起这样会产生类名冲突
使用<style scoped>意味着他只负责自己组件的样式
它给最外层的div加了一层特殊的标签属性，后面的值是随机生成的，通过demo和控制标签属性选择器

六.Todo-list案例

1.组件化编码流程（通用）
实现静态组件：抽取组件，使用组件实现静态页面效果
组件按照功能点划分