vue08

目录

1.VueComponent:构造函数

2.一个重要的内置关系 

3. render函数

4.脚手架文件结构

5. vue . config. js配置文件

6.ref属性

---

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