Vue.js是什么？
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue.js引入方式
直接用<script>引入
- CDN
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- 本地
<script src="./js/vue.js"></script>
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
hello world 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{ title }}</h2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
title: 'hello world!'
}
})
</script>
</html>
我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似。
解析：
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：
var vm = new Vue({
// 选项
})
Vue实例中的 el 是一个选择器，就是该Vue实例管理的区域。data 代表要给vue管理的数据，一般我们称之为模型 Model，模型里面的属性，一般称之为模型变量。
在 html 页面中，{{ }} 用于数据绑定。
数据绑定
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。
那么{{}} 里面能放什么内容？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{ title }}</h2>
<hr>
<h2>Mustache里面能放什么内容？</h2>
<hr>
<h2>字面量</h2>
<p>数值型：{{ 123 }}</p>
<p>字符串：{{ 'hello' }}</p>
<p>布尔值：{{ true }} - {{ false }}</p>
<p>数组：{{ [1, 2, 3, 4, 5] }}</p>
<p>对象：{{ {id: 1, username: 'andy'} }}</p>
<hr>
<h2>四则远算</h2>
<p>加：{{ 1 + 1 }}</p>
<p>减：{{ 2 - 1 }}</p>
<p>乘：{{ 2 * 3 }}</p>
<p>除：{{ 6 / 2 }}</p>
<p>余：{{ 6 % 4 }}</p>
<p>...</p>
<hr>
<h2>逻辑运算</h2>
<p>或：{{ true || false }}</p>
<P>与：{{ true && false }}</P>
<p>非：{{ !false }} - {{ !true }}</p>
<p>...</p>
<hr>
<h2>条件表达式</h2>
<p>大于：{{ 2 > 1 }}</p>
<p>小于：{{ 1 < 2 }}</p>
<p>大于等于：{{ 2 >= 1 }} - {{ 2 >= 2 }}</p>
<p>小于等于：{{ 2 <= 3 }} - {{ 2 <= 2 }}</p>
<p>等于：{{ 1 == 1 }} - {{ 1 == '1' }}</p>
<p>不等于：{{ 1 != 1 }} - {{ 1 != '1' }}</p>
<p>恒等于：{{ 1 === 1 }} - {{ 1 === '1' }}</p>
<p>不恒等于：{{ 1 !== 1 }} - {{ 1 !== '1' }}</p>
<p>...</p>
<hr>
<h2>ECMA里面的一些函数</h2>
<p>随机数：{{ Math.random() }}</p>
<p>取整：{{ parseInt(12.3) }}</p>
<p>...</p>
<hr>
<h2>三目运算</h2>
<p>三目运算：{{ 1 === 1 ? '正确' : '错误' }}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
title: 'vue的Mustache语法'
}
})
</script>
</html>