1. 工具
VSCode
VSCode 安装教程（超详细）
Node.js
使前端开发发生改变，Node.js可以做服务器程序， node index.js启动服务。会自动安装 npm。
npm
npm（Node Package Manager） 是 Node.js 的包管理工具，用来安装各种 Node.js 的扩展。 npm 是 JavaScript 的包管理工具，也是世界上最大的软件注册表。相当于后端开发的 maven。
npm常见指令：
//生成package.json，相当于pom.xml
# npm init
# npm init --yes
//全局安装
# npm install 模块名 -g
//本地
# npm install 模块名
//安装依赖，并且记录在package.json
# npm install 模块名 --save
//卸载
# npm uninstall 模块名
//查看当前安装模块
# npm ls
//安装 cnpm 工具，指定国内 npm 镜像源
# npm install -g cnpm --registry=https://registry.npm.taobao.org
//cnpm 安装
# cnpm install 模块名
//安装 yarn 工具，指定国内npm镜像源
# npm install -g yarn --registry=https://registry.npm.taobao.org
示例：
# cnpm install express --save
安装express框架，相当于springMvc，查看 package.json 以及 node_modules（各种依赖包）。
2. vue基础语法
2.1
3. vue基础实践
3.1、轮播图片
需求：
- 点击按钮 “左” ，切换上一张图片；点击按钮 “右” ，切换下一张图片。
- 当图片是最左一张时，按钮 “左” 不显示。
- 当图片是最右一张时，按钮 “右” 不显示。
思路：
- 按钮 “左”、按钮 “右”通过
v-on指定点击事件。 - 图片显示通过改变标签<img>的src属性，src属性通过
v-bind绑定数组。 - 按钮 “左”、按钮 “右”是否显示通过
v-show逻辑判断。
<!DOCTYPE html>
<html>
<head>
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="leftClick" v-show="num>0"> 左 </button>
<img :src="imgScr[num]">
<button @click="rightClick" v-show="num<imgScr.length-1"> 右 </button>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
imgScr: ["./image/1.jpeg","./image/2.jpg","./image/3.jpg","./image/4.jpeg"],
num: 0
},
methods: {
leftClick: function() {
this.num--;
},
rightClick: function() {
this.num++;
}
}
});
</script>
</html>
