目录
1.VueComponent:构造函数
关于VueComponent:
1. school组件本质是个 名为VueComponent的构造函数。 且不是程序员定义的,是Vue.extend生成的。
2.我们只需要写<school/>或<school></school>, Vue解析时帮我们创建school组件(是个构造函数)的实例对象,即Vue帮我们执行的: new VueComponent(options )
3.特别注意:每次调用Vue. extend, 返回的都是一个全新的VueComponent ! ! !
4.关于this指向:
(1).组件配置中:
- data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是[VueComponent实例对象(vc)]
(2).new Vue(options)配置中:
- data函数、 methods中的函数、watch中的函数、computed中的函数它们的this均是[Vue实例对象(vm)]。
5. VueComponent的实例对象,也可称之为:组件实例对象.(自定义名字:vc,本文中vc自己定义代表组件实例对象)
- Vue的实例对象,以后简称vm。(vc有的功能vm都有,但vm有一个功能vc没有,那就是vm可以通过el决定为哪个容器服务,而vc却不行,且vc中data只能写成函数式,每个定例可以维护一 份被返同对象的独立的拷贝,而vm中不仅可以写函数式还可以写成对象式)
2.一个重要的内置关系
- 一个重要的内置关系: VueComponent . prototype._ proto__ === Vue.prototype
- 为什么要有这个关系:让组件实例对象(vc)可以访问到Vue原型上的属性、方法。
转载图:
3. render函数
关于不同版本的Vue:
1.vue. js与vue.runtime.xxx. js的区别:
- (1).vue.js是完整版的Vue,包含:核心功能+模板解析器。
- (2)vue.runtime.xxx.js是运行版的Vue,只包含:核心功能;没有模板解析器。
2.因为vue . runtime .xxx.js没有模板解析器,所以不能使用template配置项,需要使用
render函数(要有返回值)接收到的createElement函数去指定具体内容。
4.脚手架文件结构
- --node_ modules
- --public:favicon.ico:页签图标,
index.html:主页面
- --src:assets :存放静态资源(logo. png)
component:存放组件(HelloWorld. vue)
App.vue:汇总所有组件
main.js:入口文件
- --gitignore: git版本管制忽略的配置
- --babel. config. js: babel的配置文件
- --package. json:应用包配置文件
- --README. md:应用描述文件
- --package-lock . json:包版本控制文件
5. vue . config. js配置文件
- >使用vue inspect > output . js可以查到Vue脚手架的默认配置。
- >使用yue . config. js可以对脚手架进行个性化定制,详情见: https ://cli.vuejs.org/zh
6.ref属性
1.被用来给元素或子组件注册引用信息(id的替代者)
2.应用在html标签上获取的是真实DOM元素, 应用在组件标签上是组件实例对象(vc)
3.使用方式:
- 打标识: <h1 ref="xxx">.....</h1> 或<School ref=" x" ></School>
- 获取: this . $refs . xx