如颖随行|「Vue 入门系列」第一期，新手快速入门指南，初识 Vue( 三 ) 引言Vue是JavaScript开发人员非常喜欢

例如，下面的例子， fullName， age， gender 是在 Vue 实例创建时就有的属性，它们可以被 Vue 响应式系统监测到，而随后新添加的 work 属性则不能被监控到，相应的 {{ work }} 部分的视图也无法被重新渲染。
姓名：{{ fullName }} 年龄：{{ age }} 性别：{{ gender }} 职业：{{ work }}
监控 Vue 实例 data 的变化
如果在开发中，不确定未来是否会用到 work 属性，请在实例化 Vue 前，给 work 属性一个初始空值，以便未来 Vue 可以检测到它，方便使用。
现在，可以思考下，在您的项目中都需要哪些数据属性？
除了 el 、data 选项外，还可以给 Vue 实例传递一个 methods 选项。
methods 选项包含了方法列表，与计算属性不同，这里的方法并不会基于依赖缓存数据，但它们依然是事件处理的最佳方式。
首先，可以在模板中通过 v-on 指令给按钮设置一个事件处理器，让它监听 click 事件，并让它指向 Vue 实例中的一个方法，当按钮点击时就触发这个 Vue 实例方法。
{{ message }}反转 message然后，在 Vue 实例中的 methods 选项中，定义一个 reverseMsg 方法。
const app = new Vue({el: '#app',data: {message: 'Hello VueJS!'},methods: {reverseMsg () {this.message = this.message.split('').reverse().join('')}}})这样，当按钮点击时就触发了 Vue 实例的 reverseMsg 方法。
点击按钮触发事件
上面的代码示例，我们并没有涉及 DOM 操作，所有的 DOM 操作都由 Vue 处理，我们不用操心，而只关注逻辑实现就可以了。
这里还有一个细节， v-on: (v-on后面有冒号) 指令可以用 "@" 符号代替。
反转 messageVue CLI 方式安装 Vue
要想更好的利用 Vue 的生态，最简单的方法就是利用 Vue CLI 来搭建项目，它是 Vue 官方提供的脚手架工具，可以让我们快速搭建一个基于 Vue 的项目骨架。
试一试
在开始之前，我们可以删除之前的 vue-demo 文件夹，然后利用 Vue CLI 的方式重新安装项目。
首先，进入控制台，全局安装 Vue CLI。注意，在您进行项目开发的电脑上，需要安装 Node 环境。
npm install -g @vue/cli上面的命令就是全局安装 Vue CLI。等待一会，安装完毕。
如果觉得安装慢或者总是安装失败，可以安装 cnpm 或直接将镜像地址转换为淘宝镜像。
// 安装 cnpmnpm install -g cnpm --registry=// 安装好后，可以按照下面的方式安装插件cnpm install xxx// 也可以直接修改镜像地址npm config set registry // 修改完后，可以利用下面的命令查看是否修改成功npm config get registry// 看到如下结果，代表修改镜像成功安装完 Vue CLI，就可以利用 vue create 命令创建项目了，现在，让我们创建一个叫做 vue-demo 的项目。
在控制台，输入 vue create vue-demo，然后按回车键。
选择第三个选项，手动选择功能。按回车键。
Vue 项目搭建