1.Vue的生命周期2.Vue的组件2.1 多文件组件2.1.1 含义即一个文件里面包含多个组件2.1.2 用法组件主要分成三部分:1.定义组件通过Vue.extend定义组件2.注册组件在Vue的components中加入组件,此时注册的时候定义的组件名称3.使用组件将组件直接写入到模板中body div idroot !-- 4.使用组件 -- school/school student/student /div script // 1.定义student组件 const student Vue.extend({ template: div 名称:h1{{name}}/h1 年龄:h1{{age}}/h1 /div , data() { return { name :张三, age:12 } } }) // 2.定义的school组件 const school Vue.extend({ template: div 地址:h1{{addreass}}/h1 /div , data() { return { addreass: 北京 } } }) // 3.注册组件 new Vue({ el:#root, components:{ student,school } }) /script /body2.2 特别说明1.上面的school组件本质上就是一个VueComponent的构造函数并且不是程序员生成的而是有Vue.extend生成的2.每次写一个VueCompoent组件都会调用new VueComponent(option)生成一个VueCompoent的实例。3.注意每次调用Vue.extend返回的都是一个新的VueComponent实例。4.在组件配置中methodcomputed,watch中的函数都指向VueComponent这个实例。2.3 一个内置关系存在一个内置关系VueComponent.prototype.__proto__Vue.prototype这样做的目的是让VueComponent找不到属性时可以向上寻找去Vue的原型对象上寻找。3.Vue脚手架3.1 Vue脚手架的创建npm install -g vuecli vue create xxxx注意如果是Vue2的话脚手架需要低于4版本3.2 Vue脚手架-render3.2.1 vue.js和vue.min.js的区别vue.js包含vue的核心文件和模板解析器但是vue.min.js并不包含模板解析器。3.2.2 render的作用由于没有模板解析器所以不能使用template配置项需要通过render函数接收到的createElement函数去解析组件。3.3. 修改Vue脚手架的默认配置查看默认配置vue inspect output.js如果需要修改可以修改vue.config.js这个文件遵循nodejs的语法规范并且会进行合并。const { defineConfig } require(vue/cli-service) module.exports defineConfig({ transpileDependencies: true })4.ref属性4.1 作用给某个标签机上ref属性后可以通过this.$refs.属性名来获取对应的标签或者子组件如果是加在Vue组件上4.2基本用法template div idroot div classtodo-container div classtodo-wrap button refbtn clicktest点我查看组件/button MyHeader refheader/MyHeader /div /div /div /template script import MyHeader from ./components/MyHeader.vue; export default { name: App, components: { MyHeader }, data() { return {}; }, methods: { test() { console.log(this.$refs.btn); console.log(this.$refs.header); }, }, }; /script5.props5.1 作用父组件向子组件传递数据5.2 基本用法父组件传递信息template div idroot div classtodo-container div classtodo-wrap MyHeader refheader name张三 :age18/MyHeader /div /div /div /template注意入股需要串一个计算的值过去可以通过:age的方式来保证传递的是一个js表达式并将js表达式传递过去子组件接收:export default { name: MyHeader, data() { return {}; }, props:[name,age], components: {}, computed: {}, methods: { add(e) { this.addTodo(e.target.value); } }, };5.3 特殊说明1.严格的数据传递props:{ name:{ type:String, //接收参数类型 required:true, //是否必传 default:默认值 //默认值 } },2.props是只读的如果需要修改可以复制一份到data中在data中进行修改