1、Vue第一个实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<p>{{ message1}}</p>
<p>{{ message2}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '幸会，加油！',
message1:'幸会，加油11',
message2:'幸会，加油22'
}
})
</script>
</body>
</html>
//每个 Vue 应用都需要通过实例化 Vue 来实现。
var vm = new Vue({
// 选项
})<div id="vue_det">
<h1>site : {{site}}</h1>
//{{ }} 用于输出对象属性和函数返回值。
<h1>url : {{url}}</h1>
<h1>{{details()}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
// el 参数，是 DOM 元素中的 id
//接下来的改动全部在此指定的 div 内，div 外部不受影响。
data: {
//data 用于定义属性
site: "Vue初步学习",
url: "www.baidu.com",
alexa: "100"
},
methods: {
//methods 用于定义的函数，通过 return 来返回函数值
details: function() {
return this.site + " 梦想！";
}
}
})
</script>
</script>当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。
Vue 实例提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开。
2、Vue.js 模板语法：
（1）文本插值：双大括号{{ }}；
（2）输出 html 代码：使用 v-html 指令
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>啦啦啦</h1>'
}
})
</script>
（3）属性：HTML 属性中的值应使用 v-bind 指令：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
</head>
<style>
.class1{
background: #444;
color: #eee;
}
</style>
<body>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
<div id="app">
//使用了 Vue.js 的 v-model 指令来绑定一个复选框的选中状态到一个 Vue 实例的 use 数据属性上
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
//使用了 v-bind:class（或简写为 :class）来根据 use 的值动态地添加或移除一个 CSS 类 class1
<div v-bind:class="{'class1': use}">
//如果 use 为 true，则 div 元素将具有 class1 类；如果 use 为 false，则 class1 类将被移除。
v-bind:class 指令
</div>
</div>
<script>
//创建了一个新的 Vue 实例，并将其挂载到 id 为 app 的 DOM 元素上
new Vue({
el: '#app',
data:{
use: false
}
});
</script>
</body>（4）表达式：Vue.js 都提供了完全的 JavaScript 表达式支持。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
//首先把 message（值为 'RUNOOB'）分割成一个字符数组，然后反转这个数组，最后通过 join('') 将字符数组转换回字符串
<div v-bind:id="'list-' + id">菜鸟教程</div>
//使用 v-bind 指令（或者简写为 :id）来动态地绑定 id 属性
//这个 div 的 id 将是 "list-1"，因为您在 Vue 实例的 data 中设置了 id 为 1。
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true,
message: 'RUNOOB',
id : 1
}
})
</script>
</body>
</html>
（5）指令： v- 前缀
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="seen">现在你看到我了</p>
//v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素
<template v-if="ok">
//v-if 指令将根据表达式 ok 的值(true 或 false )来决定是否插入template 元素
<h1>菜鸟教程</h1>
<p>学的不仅是技术，更是梦想！</p>
<p>哈哈哈，打字辛苦啊！！！</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true,
ok: true
}
})
</script>
</body>
（6）参数：
参数在指令后以冒号指明。
<div id="app">
<pre><a v-bind:href="url">菜鸟教程</a></pre>
// href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'http://www.runoob.com'
}
})
</script><a v-on:click="doSomething">
// v-on 指令，它用于监听 DOM 事件（7）修饰符：
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
<form v-on:submit.prevent="onSubmit"></form>
//.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
