挂载组件
//将 App组件挂载到div#app节点里
new Vue({
render: h => h(App),
}).$mount('#app')
VueComponent.$mount
封装组件
<template>
<div id="app">
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 id="app">
<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实现多个指令;