Vue是一套基于MVVM模式的用于构建用户界面的JavaScript框架，它是以数据驱动和组件化的思想构建的。它是渐进式的JavaScript框架，所谓渐进式，就是把框架进行分层设计，每层都是可选的，不同层可以灵活地替换为其他的方案。
Vue渐进式框架分层结构由外到里分别是构建系统、状态管理、前端路由、组件系统、声明式渲染。
假如你的系统比较简单，更多的是需要访问界面中的DOM节点，以获取用户输入数据或将更新后的数据渲染到视图中，那么可以将Vue作为一个JavaScript库来使用，使用它的声明式渲染机制可以轻松操作DOM，实现数据变化时的自动视图渲染。如果前端页面比较复杂，那么可以考虑将界面元素组件化，利用Vue的组件系统将界面元素与业务逻辑包装为一个个组件，采用分而治之的思想。如果要求前后端分离，将前端做成单页应用程序，那么可以引入前端路由Vue Router，实现单页应用。如果前端应用中有很多数据需要在多个组件间共享，如用户数据，那么可以引入Vuex统一对状态进行管理。Vue提供的构建系统可以轻松地搭建一个脚手架项目。项目内置了运行环境，便于开发、调试并观察程序的运行结果；此外，项目也集成了Webpack打包工具，可以很容易地构建发布版本。
安装Vue.js有四种方式：
- 使用CDN
- 使用npm
- 使用Vue CLI
- 使用Vite
推荐使用CDN：
<script src="https://unpkg.com/vue@next"></script>
安装VSCode。
安装Vetur插件，该插件支持.vue文件的语法高亮显示。
安装ESLint插件，它是一个JavaScript语法规则和代码风格的检查工具。
安装Code Runner插件，它使我们在VSCode中以一种快捷方式运行各类代码。鼠标右键选择Run Code运行即可。
安装vue-devtools。
https://pan.baidu.com/s/139hspAnspD7bJbo81xigmg 密码:1hsv
下载完成后，将压缩包进行解压，打开google浏览器，点击右上角的三个点，选择“更多工具”=》扩展程序，启动开发者模式，选择加载已解压的扩展程序，然后选择从解压包.
Vue.js使用了基于HTML的模板语法，允许开发者声明式地将呈现的DOM绑定至底层组件实例的数据。所有的Vue.js模板都是有效的HTML。在底层，Vue将模板编译为虚拟DOM呈现函数，结合响应式系统，当应用程序状态发生变化时，Vue可以智能的计算出需要重新渲染和应用最小数量DOM操作的组件。
syntax.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js的模板语法</title>
</head>
<body>
<div id="app">
<!-- 简单的文本插值 -->
<p>{{message}}</p>
<!-- 使用JavaScript表达式 -->
<p>{{ message.toUpperCase() }}</p>
<!-- HTML代码将以普通文本的方式插入 -->
<p>{{spanHtml}}</p>
<!-- 输出HTML代码 -->
<span v-html="spanHtml"></span>
<!-- 使用v-bind指令对HTML元素的属性进行绑定 -->
<a v-bind:href='url'>新浪网</a>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const App = {
data(){
return {
message: 'Hello Vue.js',
url: 'http://www.sina.com.cn',
spanHtml: '<span style="color: red">HTML元素，以红色字体显示</span>',
}
}
};
const app = Vue.createApp(App);
const vm = app.mount('#app');
</script>
</body>
</html>
应用程序实例
在一个Vue.js框架的页面应用程序中，需要创建一个应用程序实例，如上面的第32行，这个实例将提供应用程序上下文，应用程序实例装载的整个组件树将共享相同的上下文。Vue3引入createApp是为了解决Vue2全局配置带来的一些问题。createApp是全局API，它接受一个根组件选项对象作为参数，该对象可以包含数据、方法、组件生命周期钩子等，然后返回应用程序实例自身。
在组件选项对象中的data选项是一个函数，Vue在创建组件实例时会调用该函数。data函数返回一个数据对象，Vue会将这个对象包装到它的响应式系统中，即转换为一个代理对象，此代理使Vue能够在访问或修改属性时执行依赖项跟踪和更改通知，从而自动重新渲染DOM。数据对象的每个属性都被视为一个依赖项。
创建了应用程序实例之后可以调用实例的mount()方法，指定一个DOM元素，在该DOM元素上装载应用程序实例的根组件，这样这个元素中的所有数据变化都会被Vue监控，从而实现数据双向绑定。
插值
数据绑定最常见的形式就是使用双花括号的文本插值。花括号里面会被替换为来自相应组件实例的属性的值。在Chrome浏览器打开上面的页面进到开发者模式切换到Console窗口，输入vm.message = 'welcome you'回车，可以看到页面内容也更新了。
Vue在创建组件实例时会把data()函数返回的数据对象保存到组件实例的$data属性中，同时为了方便访问，数据对象的任何顶层属性也直接通过组件实例公开。也就是说，要访问message数据属性，vm.$data.message和vm.message是等价的。
如果绑定的数据包含了HTML代码，会以普通文本输出。要加v-html指令才能正常解析。
花括号语法不能作用于HTML元素的属性上，要使用v-bind指令绑定属性。如上面的v-bind指令将url属性和a元素的href属性进行了绑定。
除了简单的绑定，在花括号里还支持JavaScript表达式。比如：
{{a+b}}
{{isLogin?username : 'not login'}}
{{ message.split('').reverse().join('')}}
<div v-bind:id="'list-' + id"> </div>
这些表达式会在当前活动实例的数据范围内作为JavaScript进行计算。需要注意的是，每个绑定都只能包含单个表达式。
指令
指令是带有v-前缀的特殊属性，其值限定为单个表达式。指令的作用是，当表达式的值发生改变时，将这个变化反映到DOM上。例如，下面的v-if指令将根据表达式show的值的真假来决定是插入还是删除p元素。
<p v-if='show'>
hhh
</p>
此外，一些指令还可以带有参数，在指令名称之后以冒号表示，如v-bind、v-on。
<a v-bind:href='url'>新浪网</a>
<!--简写语法-->
<a :href='url'>新浪网</a>
<button v-on:click='sayGreet'>Greet</button>
<!--简写语法-->
<button @click='sayGreet'>Greet</button>
v-bind用于响应式地更新HTML属性；v-on用于监听DOM事件。
从Vue2.6版本开始，指令的参数可以是动态参数，语法为指令 :[JavaScript表达式]。
<a v-bind:[attribute]='url'>新浪网</a>
这里的attribute会被作为一个JavaScript表达式进行动态求值，求得的值将作为最终的参数使用，假设组件实例中有一个数据对象属性为attribute，其值为href，那么这个绑定将等价于v-bind:href。如果attribute的值计算为null，这个绑定将被删除，为<a>新浪网</a>。
在DOM中使用模板时（直接在一个HTML文件里编写模板），还需要避免使用大写字符命名动态参数，这是因为浏览器会把元素的属性名转换为小写字符。比如下面的DynamicParameter.html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Vue.js</title>
</head>
<body>
<!--View-->
<div id="app">
<a v-bind:[attributeName]="url">新浪网</a>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
var vm = Vue.createApp({
data(){
return{
attributeName: "href",
url: "http://www.sina.com.cn/"
}
}
}).mount('#app');
</script>
</body>
</html>
浏览器在加载该页面时会将v-bind:[attributeName]转换为v-bind:[attributename]，之后Vue在解析动态参数时会找不到attributename属性。
使用动态参数时不要使用复杂的表达式。因为HTML元素的属性名是有规范的，比如名称中不能有空格或引号。
