阅读更多系列文章请访问我的GitHub博客，示例代码请访问这里。 在命令行使用webpack命令就可以进行编译，在浏览器中打开index.html文件，并且跳转到路由/index就可以查看效果。

阅读更多系列文章请访问我的GitHub博客，示例代码请访问这里。 使用this.$router.push方法可以实现路由跳转，this.$router.replace实现替换当前路由。 两个方法的第一个参数可为string类型的路径，或者可以通过对象将相应参数传入。 通过thi…

阅读更多系列文章请访问我的GitHub博客，示例代码请访问这里。 在实例化VueRouter时，配置一个路由表，每个路由中配置相应的组件模板，就可以通过vue-router.html#/index地址访问页面时，在HTML的标签中，渲染出index的模板。 同时可以在HTML中…

阅读更多系列文章请访问我的GitHub博客，示例代码请访问这里。 计算属性类似于方法，用于输出数据的计算结果，在数据变化时，它会同步更新，计算属性不可与data中的属性重名。 相对于方法，它的优势是当它的依赖变化时，才会重新进行计算，也就是说它拥有缓存，而方法在每次render…

阅读更多系列文章请访问我的GitHub博客，示例代码请访问这里。 通过事件修饰符可以实现为事件添加event.preventDefault()、event.stopPropagation()等操作。

阅读更多系列文章请访问我的GitHub博客，示例代码请访问这里。 利用Proxy拦截可以对数据的修改，得知数据被修改时，将模板中相应属性的部分替换，就完成了简单的数据同步功能。 在data改变时，查找页面中含有相应v-model属性的input标签，将input的value值改…

阅读更多系列文章请访问我的GitHub博客，示例代码请访问这里。 v-pre可以用来阻止预编译，有v-pre指令的标签内部的内容不会被编译，会原样输出。 如果已知页面内部有大段内容无需编译，使用v-pre指令阻止编译可以提高性能，同时可以防止页面内有可能导致Vue编译出错的代码…

阅读更多系列文章请访问我的GitHub博客，示例代码请访问这里。 使用v-for="(item, index) in items"就可以将数组或对象中的数据循环输出。 v-for指令除了常规循环数组、对象外，还可以循环字符串和数字，需要注意的是，循环数字时默认从1开始。 在v-…

阅读更多系列文章请访问我的GitHub博客，示例代码请访问这里。 通过v-on指令添加事件，如v-on:click="onClick(1)"，表示添加的是click事件，同时传入1作为参数。 v-on:click="onClick(1)"也可以简写为@click="onClic…