什么是Vue
Vue.js（或简称 Vue）是一个构建用户界面的渐进式 JavaScript 框架。它旨在通过简洁的 API 实现响应式的数据绑定和组合的视图组件。Vue 的核心库专注于视图层，使得它易于与其他库或已有项目整合。
MVVM（Model-View-ViewModel）模型图
Model是数据模型里面包含业务处理逻辑，View是视图层负责数据展示，ViewModel在其中实现数据双向绑定核心（Model层更新View会自动同步到View同样View更新也会同步Model）
Vue快速入门
一、下载vue.js flie && Inttroduce offcial address
1.1 download vue.js flie
https://v2.vuejs.org/v2/guide/installation.html
1.2. Inttroduce offcial address
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
二、Introdure vue.js flie
//new HTML Page , Inttroduce Vue.js Flie
<script src="js/vue.js"></script>
//JS Code, new Vue core object ,define date model
<script>
new vue({
el: "app",
data: {
message: "Hello Vue"
}
})
</script>
//compile view
<div id="app">
<input type="text" v-model="message">
{
{
message }}
</div>
三、Output result （输出结果）
Vue 常用Intruct
一、Vue 指令是什么
Vue.js是一个流行的JavaScript框架，它提供了一组强大的指令（通常称为“Directives”）来扩展和控制应用程序的行为和外观。
一、Vue 常用Intruct case
1.1 v-bind
function：动态地绑定一个或多个属性，或一个组件prop到表达式。
<body>
<div id="app">
<a v-bind:href="url">link one</a> <br>
<a :href="url">link two</a>
</div>
</body>
<script>
//define Vue object
new Vue({
el: "#app",
data: {
url: "https://www.baidu.com"
}
})
</script>
1.2 v-model
fountion：在表单元素和Vue实例之间创建双向数据绑定。
<body>
<div id="app">
<input type="text" v-model="url">
</div>
</body>
<script>
//define Vue object
new Vue({
el: "#app",
data: {
url: "https://www.baidu.com"
}
})
</script>
1.3 v-on
function：监听DOM事件，并在触发时运行一些JavaScript代码。
<body>
<div id="app">
<input type="button" value="点我一下" v-on:click="handle()">
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
},
methods: {
handle: function () {
alert("别点我");
}
}
})
</script>
1.4 v-if
function：根据表达式的值动态地控制元素的渲染
<body>
<div id="app">
age<input type="text" v-model="age">经判断，为：
<span v-if="age <= 35">年轻人（35及以下）</span>
<span v-if="age > 35">中年人（35以上）</span>
<span v-if="age >= 60">老人60</span>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
age: 20
},
methods: {
}
})
</script>
1.4 v-show
functtion：基于表达式值的真假性来动态改变元素的可见性
<body>
<div id="app">
age<input type="text" v-model="age">经判断，为：
<span v-show="age <= 35">年轻人（35及以下）</span>
<span v-show="age > 35">中年人（35以上）</span>
<span v-show="age >= 60">老人60</span>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
age: 20
},
methods: {
}
})
1.4 v-for
function：它用于基于源数据多次渲染一个元素或一组元素。
<body>
<div id="app">
<div v-for="(addr,index) in address">{
{
addr}}</div>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
address: ["北京", "新乡", "上海"]
},
methods:{
}
})
</script>
1.5案例
<body>
<div id="app">
<table border="1" cellspacing="0" width="60%">
<tr>
<th>number</th>
<th>name</th>
<th>age</th>
<th>geder</th>
<th>score</th>
<th>geder</th>
</tr>
<tr align="content" v-for="(user,index) in users">
<td>{
{
index + 1}}</td>
<td>{
{
user.name}}</td>
<td>{
{
user.age}}</td>
<td>
<span v-if="user.gender == 1">Male</span>
<span v-if="user.gender == 2">Famle</span>
</td>
<td>{
{
user.score}}</td>
<td>
<span v-if="user.score >= 85">Excellent</span>
<span v-else-if="user.score >= 60">Pass</span>
<span v-else style="color: brown;">fail</span>
</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el: "#app",
data:{
users: [{
name: "WQY",
age: 20,
gender: "1",
score: "78",
},{
name: "One",
age: 2,
gender: "2",
score: "99",
},{
name: "two",
age: 24,
gender: "2",
score: "70",
},{
name: "s",
age: 24,
gender: "2",
score: "50",
}]
},
methods: {
}
})
</script>
Vue life cycle （生命周期）
Vue.js 的生命周期是一系列从 Vue 实例被创建到销毁的过程中，自动执行的钩子函数。这些钩子函数允许你在 Vue 实例的不同阶段执行特定的代码，从而控制和管理你的组件。
<body>
<div id="app">
</div>
</body>
<script>
//定义Vue object
new Vue({
el: "#app", //vue接管区域
date: {
},
methods: {
},
mounted(){
alert("vue挂载完成，发送请求到服务器")
}
})
</script>
Ajax Introduce（介绍）
全称Asynchronous JavaScript and XML（异步JavaScript和XML），是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。
Axios
Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它是前端开发中用于发送 HTTP 请求的一个库，可以运行在浏览器端和 Node.js 中。
Axios引入地址
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
环境准备
Vue-cli 是 Vue.js 的一个官方脚手架工具。它可以帮助开发者快速生成 Vue.js 项目的基础模板，从而大大简化项目的初始化过程。V使得开发者能够根据自己的需求快速构建出高效、健壮的 Vue.js 应用程序。