1. Hello Vue 例子
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>我的第一个HTML5</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>效果：
2. Vue语法格式
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：
var vm = new Vue({
// 选项
})3. 模板语法
3.1 插值
3.1.1 文本
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg属性发生了改变，插值处的内容都会更新。
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>3.1.2 原始HTML
使用 v-html 指令用于输出 html 代码：
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>我是谁</h1>'
}
})
</script>3.1.3 属性
HTML 属性中的值应使用 v-bind 指令
<style>
.myclass {
background-color: yellow;
}
</style>
<body>
<div id="app">
<span for="r1">修改颜色</span><input type="checkbox" v-model="use" id="r1">
<br>
<br>
<div v-bind:class="{ 'myclass': use}">我的背景会变色哦</div>
</div>
<script>
var vm =new Vue({
el:'#app',
data:{
use:false
}
});
</script>
</body>效果：
3.1.4 使用JavaScript表达式
Vue.js 都提供了完全的 JavaScript 表达式支持。
<body>
<div id="app">
{{ index+5 }}<br>
{{ msg }}
</div>
<script>
new Vue({
el:'#app',
data:{
index:10086,
msg:"My name is zuowei.zhang"
}
});
</script>
</body>效果：
3.2 指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。
还是上面的例子，加上v-if :
<div id="app" v-if="seen">
{{ index+5 }}<br>
{{ msg }}
</div>
<script>
new Vue({
el:'#app',
data:{
index:10086,
msg:"My name is zuowei.zhang",
seen:false
}
});
</script>当seen的值为false，整个div就不可见了。
3.2.1 参数
参数在指令后以冒号指明。
<body>
<div id="app">
<a v-bind:href="url">百度</a>
</div>
<script>
new Vue({
el:'#app',
data:{
url:'http://www.baidu.com'
}
});
</script>
</body>3.2.2 修饰符
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>3.3 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写：v-on，v-bind
3.3.1 v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>3.3.2 v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>4. 计算属性
计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。
4.1 基础例子
<body>
<div id="app">
{{computedMsg}}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello'
},
computed: {
computedMsg: function () {
return this.message.split('').reverse().join('')
}
}
});
</script>
</body>如果使用 methods 的话，也是同样的效果：
<body>
<div id="app">
{{computedMsg()}}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello'
},
methods: {
computedMsg: function () {
return this.message.split('').reverse().join('')
}
}
});
</script>
</body>两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。
5. 监听属性
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
5.1 基础例子
<body>
<div id="app">
<input type="text" v-model="info">
{{value}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
info: "",
value: ""
},
watch: {
info() {
this.value = this.info;
}
}
})
</script>
</body>效果：
6. 事件处理器
6.1 v-on
6.1.1 v-on例子：
<body>
<div id="app">
<button v-on:click="msg += 1">加1</button>
{{ msg }}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 0
}
})
</script>
</body>效果：
6.1.2 事件修饰符
Vue.js为v-on提供了事件修饰符来处理DOM事件细节：
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>7. 表单
v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。
8. 组件
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。
8.1 语法
全局组件语法格式如下：
Vue.component(tagName, options)tagName 为组件名，options 为配置选项。注册后，可以使用以下方式来调用组件：
<tagName></tagName>8.2 全局组件实例
<body>
<div id="app">
<zzw></zzw>
</div>
<script>
Vue.component('zzw', {
template: '<h1>这是自定义组件</h1>'
})
new Vue({
el: '#app'
})
</script>
</body>效果：
