Vue组件的定义方法不是只有我们之前写的建立.vue文件那一种，比如你还可以通过Vue.component()的方法来创建，不过这些都以后吧，我们这里就只说明.vue文件这一种（不喜欢一下子说太多，而且仔细想想，不就是API吗）。
【下面都是在PageTwo.vue里面进行修改，菜单名称修改为:Vue组件实例】
.vue文件的基本模板如下（下面都会是ES5的写法，本人还是不太喜欢ES6或者TS，原谅我，反正本质一样）：
<template> </template> <script> export default { //一些配置，和前面说的Vue实例类似 } </script> <style> </style>
三个地方，分工明确：模板 + 控制 + 样式
接下来我们说明配置中常用的选项（很多具体的就留到后面一点点品位，好吧，留的有点多）：
常用配置
【1】data
先看看PageTwo.vue现在的代码：
<template> <section> <input type="text" v-model="justDoIt"> <div> 输入的数据：{{justDoIt}} </div> </section> </template> <script> export default { //一些配置 data() { return { justDoIt: "初始化数据" }; } }; </script> <style> </style>
模板中的代码应该不用说了吧，前面一篇文章说的很清楚了，直接看看data。
其返回了一个键值对（还有别的写法，推荐你这样写，因为这里如果"初始化数据"这几个字是变量，这种写法形成了闭包，是安全的），在这里就是给当前组件对象是data里面添加了一个justDoIt的数据，然后上面或者别的地方才可以用，他就是干了这事情。
【2】methods
接着，我们添加一下methods属性：
methods: { doIt() { alert(this.justDoIt); } }
其实methods和data类似，只不过是用来添加的不是数据，而是方法，因此，你现在可以在模板里面添加下面代码来调用这个方法（记住，添加的全部代码必须由一个标签包裹）：
<input type="button" value="DoIt" v-on:click="doIt()">
v-on:click就是类似原生的onClick，不过因为是vue的方法，你应该用他的。
现在，你可以点击一下页面的按钮试一下，是不是很舒服。
【3】watch
这个属性是专门用来注册监听前面data里面注册的值改变的时候触发的方法集合，比如你添加下面的代码：
watch: { justDoIt: function(newval, oldval) { console.log("justDoIt改变了，新值为：" + newval + ",旧值为：" + oldval); } }
如何你运行一下，打开控制台，修改输入框的值的时候，是不是控制台时刻打印了这句话。
【4】computed
这个叫做计算属性，前面一篇文章说过了，不清楚的看看PageOne.vue，应该可以明白。
简单的说就是，它用到的data里面的值改变的时候，自己会重新计算。
生命周期
和Vue对象一样，也有类似的生命周期钩子，你可以试试，这里就随便提一下。
总结
说到这里，VUE应该是入门了，后面开始，就会针对一个个小点来说明，祝你好运！
您可能感兴趣的文章: