设置.babelrc，{"presets": ["@babel/preset-env","@babel/preset-react"]}

<p data-height="265" data-theme-id="0" data-slug-hash="wjXLMa" data-default-tab="js,result" data-user="whjin" data-embed-version="2" data-pen-title="组件间通信" class="codepen">See the Pen 组件间通信 by whjin (@whjin) on CodePen.</p><script async src="[链接];></script>

一个组件可以分为数据（model）和视图（view），数据更新时，视图也会自动更新。在视图中又可以绑定一个事件，它们触发methods里指定的方法，从而可以改变数据、更新视图，这是一个组件基本的运行模式。

Vue提供了一个functional的布尔值选项，设置为true可以使组件无状态和无实例，也就是没有data和this上下文。这样用render函数返回虚拟节点可以更容易渲染，因为函数化组件只是一个函数，渲染开销要小很多。

学习笔记：Render函数 Render函数 Vue2与Vue1最大的区别就在于Vue2使用了虚拟DOM来更新DOM节点，提升渲染性能。 Vue2与Vue1最大的区别就在于Vue2使用了虚拟DOM来更新DOM节点，提升渲染性能。 Vue2与Vue1最大的区别就在于Vue2使用了虚拟DOM来更新DOM节点，提升渲染性能。 Vue2与Vue1最大的区别就在于Vue2使用了虚拟DOM来...

自定义指令的注册方法分为全局注册和局部注册，比如注册一个v-focus指令，用于在<input>、<textarea>元素初始化时自动获得焦点，两种写法分别是：

要在父实例中使用这个组件，必须要在实例创建前注册，之后就可以用<my-component></my-component>的形式来使用组件。

使用v-model后，表单控件显示的值只依赖所绑定的数据，不再关心初始化时的value属性，对于在<textarea></textarea>之间插入的值，也不会生效。

这种在HTML元素上监听事件的设计看似将DOM与JavaScript紧耦合，违背分离的原理，实则刚好相反。因为通过HTML就可以知道调用的是哪个方法，将逻辑与DOM解耦，便于维护。

当网速较慢、Vue.js文件还没加载完时，在页面上会显示{{message}}的字样，直到Vue创建实例、编译模板时，DOM才会被替换，所以这个过程屏幕有闪。只要加一句CSS就可以解决这个问题：

学习笔记：前端开发文档 计算属性 所有的计算属性都以函数的形式写在Vue实例中的computed选项内，最终返回计算后的结果。 计算属性的用法 在一个计算属性中可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果即可。 计算属性还可以依赖多个Vue实例的数据，只要其中任一数据变化，计算属性就会重新执行...

学习笔记：Vue.js基础知识 基础知识 构造函数Vue的根实例new Vue({})，并启动Vue应用。 {代码...} 变量app代表这个Vue实例。 其中，必不可少的选项是el，用于指定一个页面中已存在的DOM元素来挂载Vue实例，可以是HTMLElement，也可以是CSS选择器。 {代码...} 挂载成功后，可以通过app.$el访问该元素。Vue提供了很多常用...

文章链接：Vue.js基础教程 开发工具准备： 根据个人喜欢选择IDE，我使用的是WebStorm，推荐使用Atom和VSCode； 安装git base和node.js； 安装vue-cli，命令npm i -g @vue/cli； 新建vue-cli项目： 方法一：通过图形界面进行安装vue ui； 方法二：通过命令行安装vue create project-name 运行项目npm run serve，端口8080...

Vue提供了一个functional的布尔值选项，设置为true可以使组件无状态和无实例，也就是没有data和this上下文。这样用render函数返回虚拟节点可以更容易渲染，因为函数化组件只是一个函数，渲染开销要小很多。

数字输入框只能输入数字，而且有两个快捷按钮，可以直接减1或加1。除此之外，还可以设置初始值、最大/小值，在数值改变时，触发一个自定义事件来通知父组件。

要在父实例中使用这个组件，必须要在实例创建前注册，之后就可以用<my-component></my-component>的形式来使用组件。

查看原文站点，更多扩展内容及更佳阅读体验！ Vue基础 构造函数Vue的根实例new Vue({})，并启动Vue应用。 {代码...} 变量app代表这个Vue实例。 其中，必不可少的选项是el，用于指定一个页面中已存在的DOM元素来挂载Vue实例，可以是HTMLElement，也可以是CSS选择器。 {代码...} 挂载成功后，可以通过app.$el访问该元素。V...