一、Vue概览
Vue是前端的一种开发框架，它主要解决前端开发中的核心痛点：复杂的DOM操作。
1.1 前置知识
html+css、JavaScript、css3、html5、第三方库、网络通信、ES6+、webpack、模块化、包管理器、
css预编译器
1.2 Vue拥有以下特点
1、渐进式
不要求将之前用html+css+js写好的页面全部推翻用Vue重写，而是可以在原来页面中嵌入Vue或部分页面用Vue重写，逐渐改进。
2、组件化
页面由一个一个组件组成，一个组件又可以包含n多个子组件（复用）。
3、响应式
指的是数据响应式，数据(data)改变，页面值也会自动改变，页面的值改变了，data也能对应改变(数据双向绑定)
1.3 Vue的应用场景
1、前台的部分页面
2、后台的全部页面
二、体验Vue开发
2.1 使用Vue的两种方式
1、在页面中引入Vue的js文件
工作中不会使用该方式
2、脚手架
- 官方脚手架vue-cli
- 其他民间脚手架，如webpack-simple
- 手动搭建
2.2 Vue初体验
2.2.1 创建项目
我们在页面中引入Vue的js文件方式来体验Vue，在官网上下载vue.js或者是vue.min.js https://vuejs.org/v2/guide/installation.html
Vue官网下载vue.min.js
我们使用的IDE开发工具为Visual Studio Code(简称vscode)
我们新建一个项目目录，名称为001，将刚下载的vue.min.js复制到该目录下，用vscode打开001目录，创建index.html，用vscode快速生成html骨架，然后输入一个叹号，点击第一个选项，接着就快速的生成了一个html结构了。
vscode快速生成html骨架
vscode快速生成html骨架
2.2.2 编写Vue代码
编写Vue代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id ="app">
<!-- 界面模板 -->
<!-- mustache -->
<h1>系统名称：{{title}}</h1>
</div>
<script src="./vue.min.js" ></script>
<script>
new Vue({ //配置
el:"#app", // css选择器
data:{ //和界面相关的数据
title:"库存管理系统"
},
});
</script>
</body>
</html>
为了方便运行html代码，我们可以在vscode里安装Live Server插件，安装步骤如下：
安装Live Server插件
用Live Server插件运行index.html
index.html运行效果如下：
index.html运行效果
2.2.3 数据响应式
我们用一个变量vm来接受Vue实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id ="app">
<!-- 界面模板 -->
<!-- mustache -->
<h1>系统名称：{{title}}</h1>
</div>
<script src="./vue.min.js" ></script>
<script>
// vm：Vue实例
var vm = new Vue({ //配置
el:"#app", // css选择器
data:{ //和界面相关的数据
title:"库存管理系统"
},
});
</script>
</body>
</html>
获取title值
我们更改vm.title 的值，页面的值也对应改变并重新渲染，如下：
更改title
数据响应式
2.2.4 产品列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id ="app">
<!-- 界面模板 -->
<!-- mustache -->
<h1>系统名称：{{title}}</h1>
<ul>
<!-- v-for 指令-->
<li v-for="(item,i) in products">
名称：{{item.name}}
<button @click="changeStock(item,item.stock-1)">-</button>
<span v-if="item.stock>0">{{item.stock}}</span>
<span v-else>无货</span>
<button @click="changeStock(item,item.stock+1)">+</button>
<button @click="remove(i)">删除</button>
</li>
</ul>
</div>
<script src="./vue.min.js" ></script>
<script>
// vm：Vue实例
var vm = new Vue({ //配置
el:"#app", // css选择器
data:{ //和界面相关的数据
title:"库存管理系统",
products:[
{name:"iphone",stock:10},
{name:"xiaomi",stock:5},
{name:"huawei",stock:6},
],
},
methods:{
remove(i){
this.products.splice(i,1);
},
changeStock(product,newStock){
if(newStock<0){
newStock = 0;
}
product.stock = newStock;
}
},
});
</script>
</body>
</html>
产品列表效果
源码
源码 001
网友评论