创建一个新的空工程：
然后新建一个module：
选中static web，静态web项目：
位置信息：
安装vue：
方法一：官网下载
下载地址：https://github.com/vuejs/vue，下载解压，得到vue.js文件。
方法二：使用CDN
直接使用公共的CDN服务：
<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者：
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
方法三：npm安装（推荐）
在idea的左下角，有个Terminal按钮，点击打开控制台，进入hello-vue目录，先输入：npm init -y 进行初始化。
安装Vue，输入命令：npm install vue --save
然后就会在hello-vue目录发现一个node_modules目录，并且在下面有一个vue目录。
node_modules是通过npm安装的所有模块的默认位置。
====================================================================
创建Vue实例:
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：
var vm = new Vue({
// 选项
})
在构造函数中传入一个对象，并且在对象中声明各种Vue需要的数据和方法，包括：el、data、methods等等
el：每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染。我们可以通过el属性来指定，然后创建Vue实例，关联这个div。
<div id="app">
</div>
<script> var vm = new Vue({
el:"#app"
}) </script>
这样，Vue就可以基于id为app的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。
数据: 当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。
<div id="app">
<input type="text" v-model="name"/>
</div>
<script> var vm = new Vue({
el:"#app",
data:{
name:"张三"
}
}) </script>
-
name的变化会影响到
input的值 -
input中输入的值，也会导致vm中的name发生改变
方法： Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue实例的作用范围内使用。
<div id="app">
{{num}}
<button v-on:click="add">加</button>
</div>
<script> var vm = new Vue({
el:"#app",
data:{
num: 0
},
methods:{
add:function(){
// this代表的当前vue实例
this.num++;
}
}
}) </script>
在hello-vue目录新建一个HTML
测试：vue声明式渲染：
首先通过 new Vue()来创建Vue实例， 然后构造函数接收一个对象，对象中有一些属性：
-
el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div
-
data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
- name：这里我们指定了一个name属性
-
页面中的
h2元素中，我们通过{{name}}的方式，来渲染刚刚定义的name属性。
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--Vue对象的html模板-->
<div id="app">
<!--花括号：js表达式-->
<h1>大家好，我是{{name}}</h1>
</div>
</body>
<!---->
<script src="node_modules/vue/dist/vue.js"></script>
<script> //初始化一个vue实例
const app =new Vue({
el: "#app", //element的缩写，选择器
data: { //定义数据模型
name: "小张",
}
}) </script>
</html>
打开页面查看效果：
双向绑定与事件处理
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--Vue对象的html模板-->
<div id="app">
<!--花括号：js表达式-->
<h1>大家好，我是{{name}}</h1>
<!--双向绑定，v-model：数据模型-->
<input type="text" v-model="name">
<!--定义一个事件,v-on:事件名=js表达式 -->
<input type="button" value="add1" v-on:click="num1++">
<input type="button" value="add2" v-on:click="inc">
<h1>{{num1}}+{{num2}}={{num1+num2}}</h1>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script> //初始化一个vue实例
const app =new Vue({
el: "#app", //element的缩写，选择器
data: { //定义数据模型
name: "小张",
num1: 1,
num2: 2
},
methods: {
inc(){
this.num2++;
this.dec()
},
dec(){
this.num1--;
}
},
created(){
//ajax
this.num1 = 1000;
}
}) </script>
</html>
### 总目录展示
该笔记共八个节点（由浅入深），分为三大模块。
**高性能**。 秒杀涉及大量的并发读和并发写，因此支持高并发访问这点非常关键。该笔记将从设计数据的动静分离方案、热点的发现与隔离、请求的削峰与分层过滤、服务端的极致优化这4个方面重点介绍。
**一致性**。 秒杀中商品减库存的实现方式同样关键。可想而知，有限数量的商品在同一时刻被很多倍的请求同时来减库存，减库存又分为“拍下减库存”“付款减库存”以及预扣等几种，在大并发更新的过程中都要保证数据的准确性，其难度可想而知。因此，将用一个节点来专门讲解如何设计秒杀减库存方案。
**高可用**。 虽然介绍了很多极致的优化思路，但现实中总难免出现一些我们考虑不到的情况，所以要保证系统的高可用和正确性，还要设计一个PlanB来兜底，以便在最坏情况发生时仍然能够从容应对。笔记的最后，将带你思考可以从哪些环节来设计兜底方案。
-----
篇幅有限，无法一个模块一个模块详细的展示（这些要点都收集在了这份《高并发秒杀顶级教程》里），觉得有需要的码友们，麻烦各位转发一下（可以帮助更多的人看到哟！）
**[CodeChina开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频】](https://codechina.csdn.net/m0_60958482/java-p7)**
由于内容太多，这里只截取部分的内容。需要这份《高并发秒杀顶级教程》的小伙伴，麻烦各位帮忙点赞分享支持一下（可以帮助更多的人看到哟！）
然介绍了很多极致的优化思路，但现实中总难免出现一些我们考虑不到的情况，所以要保证系统的高可用和正确性，还要设计一个PlanB来兜底，以便在最坏情况发生时仍然能够从容应对。笔记的最后，将带你思考可以从哪些环节来设计兜底方案。
-----
篇幅有限，无法一个模块一个模块详细的展示（这些要点都收集在了这份《高并发秒杀顶级教程》里），觉得有需要的码友们，麻烦各位转发一下（可以帮助更多的人看到哟！）
**[CodeChina开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频】](https://codechina.csdn.net/m0_60958482/java-p7)**
[外链图片转存中...(img-BvNXPdF0-1630660201263)]
[外链图片转存中...(img-5OzwWhUz-1630660201264)]
由于内容太多，这里只截取部分的内容。需要这份《高并发秒杀顶级教程》的小伙伴，麻烦各位帮忙点赞分享支持一下（可以帮助更多的人看到哟！）
538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
