摘要：基础安装命令行工具提供一个官方命令行工具，可用于快速搭建大型单页应用。打开浏览器的控制台，并修改。自定义指令聚焦元素当页面加载时，元素将获得焦点注意在移动版上不工作。现在让我们完善这个指令注册一个全局自定义指令当绑定元素插入到中。
Vue基础 安装vue
npm install vue命令行工具(CLI)
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：
# 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖，走你 $ cd my-project $ npm install $ npm run dev使用
引入vue.js
一、声明和渲染Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统：
{{ message }}
var app = new Vue({
el: "#app",
data: {
message: "Hello Vue!"
}
})
这里的数据和DOM已经被绑定在一起，所有的元素都是响应式的。打开浏览器的控制台，并修改app.message。你将看到上例相应地更新.
二、指令指令带有前缀 v-，以表示它们是 Vue 提供的特殊属性,它们会在渲染的 DOM 上应用特殊的响应式行为
1.条件与循环v-if
现在你看到我了
var app3 = new Vue({
el: "#app-3",
data: {
seen: true
}
})
这里面将seen:true改为seen:false可以让现在你看到我了消失。
v-for
v-for 指令可以绑定数组的数据来渲染一个项目列表：
- {{ todo.text }}
var app4 = new Vue({
el: "#app-4",
data: {
todos: [
{ text: "学习 JavaScript" },
{ text: "学习 Vue" },
{ text: "整个牛项目" }
]
}
})
在控制台里，输入 app4.todos.push({ text: "新项目" })，你会发现列表中添加了一个新项。
2、绑定事件监听v-on
为了让用户和你的应用进行互动，我们可以用 v-on 指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法：
{{ message }}
var app5 = new Vue({
el: "#app-5",
data: {
message: "Hello Vue.js!"
},
methods: {
reverseMessage: function () {
this.message = this.message.split("").reverse().join("")
}
}
})
3、表单输入绑定
v-model
Vue 提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
{{ message }}
var app6 = new Vue({
el: "#app-6",
data: {
message: "Hello Vue!"
}
})
4、元素显示于隐藏
v-show
另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：
计算属性Hello!
在Vue实例中添加computed:{}
下面是一个简单计算属性例子-购物车:
鞋子:
数量:
小计:{{sumB}}
总价:{{Sum}}
键值修饰符
