挂载组件 //将 App组件挂载到div#app节点里 new Vue({ render: h => h(App), }).$mount('#app')
VueComponent.$mount
封装组件 <template> <div> Hello Vue </div> </template> <script> export default { name: 'app', } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } </style>1 Vue组件文件以.vue 结尾;
2 Vue组件模版，将html,css,js分别抽离到 tempplate ,style ,script ，各司其职，层次分明;
3 Vue实现css模块化的方式，是 scoped属性，style scoped ,其原理与css-module类似，以多位hash值避免命名冲突(所以依然存在冲突的可能性);
4 Vue实现数据双向绑定, 指令 v-model = 'dataOrPropName',即绑定props对象或data对象的key。因此，props与data的key命名不可冲突；
5 Vue实现列表渲染的关键指令是 v-for:"item in list" ,v-for属性对当前标签起作用,为了diff算法依赖key值遍历比对的实现，应当同时添加 v-bind:key = 'renewableVariat'绑定key值 ;
6 Vue组件实现父子组件间通信:
<template> <div> <HelloWorld v-bind:msg='msg' v-bind:click='getDataFormChild'/> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'app', components: { HelloWorld }, methods:{ getDataFormChild:(zz,yy)=>{ console.log(zz,yy); } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } </style>如代码所示，单向数据流父传子依然是通过props传递信息，通过v-bind实现变量的传值，子组件可通过调用父组件定义的方法并传参，实现数据的逆向传递；
7 注意定义data的方式：
data:()=>({ msg:'hello, vue' }),如代码所示，data为函数，最终返回一个data对象。（这里应考虑返回data对象的函数如果为异步的情形）;
8 :
<script> import HelloWorld from './components/HelloWorld.vue'; export default { name: 'app', components: { HelloWorld }, props: { msg: String, click: Function }, data:()=>({ msg:'hello, vue' }), methods:{ getDataFormChild:(zz,yy)=>{ console.log(zz,yy); } } } </script>如代码所示，在js中引入依赖组件,最终暴露的是一个Vue组件的配置对象,其中，components为引入的组件集对象，data为函数，return出一个data对象，methods是方法集对象 ，props里为props类型检测对象。
9 注意所有js集或框架的类型检测，都是 弱类型(源于js)的静态/动态类型检测: 静态-指代码运行时才进行检测; 动态-指代码编译时就进行检测(如ts);
10 Vue其他丰富的指令及封装指令的方式;
11 Vue提供的组件通信的多种api；
12 Vue-router ， vuex等插件的使用;
13 vue 配合node 实现 ssr;
14 vue 配合node 实现部分同构；
15 vue底层源码的消化;
16 基于vue手封实现vuex的功能;
17 拥抱新版本，全面面向es6，深刻学习proxy(替代Object.defineProperty)及class(替代构造函数)的使用;
18 基于Vue指令的思想，写react继承类高阶组件基于React.Component实现多个指令;