new Vue 创建的是根实例
new Vue({ el : '#app', data(){} })Vue.component 创建的是组件
Vue.component('button-counter',{ data(){} })因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
生命周期 beforeCreate/created beforeMount/mounted beforeUpdate/updated beforeDestroy/destroyed created 和 mounted 区别： created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。 mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。 其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。 参考：https://blog.csdn.net/xdnloveme/article/details/78035065render优先级 render函数>template模板>outer HTML组件基本用法 <div id="app"> </div> Vue.component()定义全局组件 new Vue({ el : '#app' })在每个页面生成一个容器组件单文件组件 什么，你说上面这种写法和你项目中的不一样，是下面这样的，噢，那你说的是单文件组件（.vue） https://cn.vuejs.org/v2/guide/single-file-components.html
<template></template> <script></script> <style></style>对，这就是单文件组件，江湖人称 Single-File Components (SFCs），关注点分离并不代表类型分离（此话抄自vue官网），模板逻辑样式是内部耦合的
<template> <div class="example">{{ msg }}</div> </template> <script> </script> export default { data () { return { msg: 'Hello World' } } ... } <style lang="less" scoped> .example { color: red; } </style>指令 指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性，如v-bind、v-modal、v-on等
计算属性 computed计算属性是基于依赖进行缓存，依赖不变，不会重新求值。而 methods调用方法，都会重新计算。
{{reversedMessage}} ... computed: { reversedMessage: function () { // 计算属性的 getter return this.message.split('').reverse().join('') } } v-if v-else 用key管理可复用的元素v-show 与 v-if 的不同 条件渲染，使用 v-if 条件展示 ，使用v-show v-show与v-if都能控制元素的展示，不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。全局注册/局部注册 // 全局注册，用Vue.component注册的 Vue.component("blog-post",{}); // 局部注册，用js对象定义组件，然后在components中引用 var blogPost = { /* ... */ }; var app = new Vue({ el: '#app', components: { blogPost } }} 静态/动态prop // 静态，直接传值 <blog-post title="My journey with Vue"></blog-post> // 动态 <blog-post :title="title"></blog-post>vue是单项数据流，同通过prop传递，子组件不应该更改prop， 如要更改，通常有两种情况：
props: [initialCounter, size], data(){ return { counter: this.initialCounter // 情况一，data，作为初始值 } }, computed: { normalizedSize: function () { return this.size.trim().toLowerCase(); // 情况二，computed，定义计算属性 } } 作用域插槽 父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。 slot-scope异步组件 vue允许以工厂函数的方式定义组件，组件被渲染时，工厂函数才会触发 和webpack的code-splitting配合使用https://cn.vuejs.org/v2/guide/components-dynamic-async.html Vue.component('async-webpack', resolve=> require(['./my-async-component'], resolve)) // 这个特殊的 `require` 语法将会告诉 webpack，自动将你的构建代码切割成多个包，这些包会通过 Ajax 请求加载 })也可以在工厂函数中返回一个Promise
Vue.component('async-webpack', () => import('./my-async-component')) // 这个 `import` 函数会返回一个 `Promise` 对象。当使用局部注册的时候，你也可以直接提供一个返回 Promise 的函数：
new Vue({ ... components: { "my-component" : ()=>import('./my-component') } }) 过渡 Vue 提供了transition封装组件，可以给元素或组件添加进入/离开过渡 <transition name="fade" @beforeEnter="beforeEnter" :class="false"></transition> 依赖注入 this. $parent. $parent. $parent…时，需要依赖注入， provide、inject，依赖注入可以看作是“大范围有效的prop”除了 祖先组件不需要知道哪些后代组件使用它提供的属性后代组件不需要知道注入的属性来自哪里 provide 允许我们指定想要提供给后代的数据/方法 provide(){ return { getMap: this.getMap } } ...inject 在任何后代组件，我们都可以使用 inject 选项接收我们想要添加在这个实例上的属性
inject: ['getMap']