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 的系统：
<div id="app">
{{ message }}
</div>var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})这里的数据和DOM已经被绑定在一起，所有的元素都是响应式的。打开浏览器的控制台，并修改app.message。你将看到上例相应地更新.
二、指令
指令带有前缀 v-，以表示它们是 Vue 提供的特殊属性,它们会在渲染的 DOM 上应用特殊的响应式行为
1.条件与循环
v-if<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})这里面将seen:true改为seen:false可以让现在你看到我了消失。
v-forv-for 指令可以绑定数组的数据来渲染一个项目列表：
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表中添加了一个新项。
2、绑定事件监听
v-on为了让用户和你的应用进行互动，我们可以用 v-on 指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法：
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})3、表单输入绑定
v-modelVue 提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})4、元素显示于隐藏
v-show另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：
<h1 v-show="ok">Hello!</h1>计算属性
在Vue实例中添加computed:{}
下面是一个简单计算属性例子-购物车:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="vue.js"></script>
<div id="app">
杯子:<input type="number" v-model="priceA" />
数量:<input type="number" v-model="numberA" />
小计:{{sumA}}
<br />
鞋子:<input type="number" v-model="priceB" />
数量:<input type="number" v-model="numberB"/>
小计:{{sumB}}
<br />
总价:{{Sum}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
priceA: 150,
numberA:3,
priceB: 1,
numberB: 1
},
// 存放所有的计算属性，就是一个方法，不过使用的时候和属性一样
computed: {
sumA() {
return this.priceA * this.numberA;
},
sumB() {
return this.priceB * this.numberB;
},
Sum() {
return this.sumA + this.sumB;
}
},
methods: {
}
})
</script>
</body>
</html>
键值修饰符
<input @keyup.13="submit" value="回车提交" />
<input @keyup.enter="submit" value="回车提交" />
<input @keydown.tab.prevent="submit" value="tab"/>
<input @keyup.delete="submit" value="delte或退格"/>
<input@keyup.esc="submit" value="esc" />
<input@keyup.space="submit" value="space" />
<input@keyup.up="submit" value="up" />
<input@keyup.down="submit" value="down" />
<input@keyup.left="submit" value="left" />
<input@keyup.right="submit" value="right" />
<input@keydown.f1.prevent="submit" value="f1" />
<input@keyup.alt.67="submit" value="alt+c" />
<input@keyup.ctrl.67="submit" value="ctrl+c" />
<input@keyup.ctrl.86="submit" value="ctrl+v" />
<input@keydown.shift.67="submit" value="shift+c" />在Vue实例中添加methods:{},用于写submit()事件。
自定义指令
聚焦input元素
当页面加载时，元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。事实上，你访问后还没点击任何内容，input 就获得了焦点。现在让我们完善这个指令：
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})也可以注册局部指令，组件中接受一个 directives 的选项：
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}然后你可以在模板中任何元素上使用新的 v-focus 属性：
<input v-focus>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。