目录
一.Vue是什么？
💖Vue的概念
💖 Vue代码创建
二.指令
三.Vue生命周期
🎁个人主页：tq02的博客_CSDN博客-C语言,Java,Java数据结构领域博主
🎥 本文由 tq02 原创，首发于 CSDN🙉
🎄 本章讲解内容：Vue和指令讲解🎁欢迎各位→点赞👍 + 收藏⭐ + 评论📝+关注✨
🎥学习专栏： C语言 JavaSE MySQL基础
一.Vue是什么？
💖Vue的概念
Vue 是一套前端框架，可以免除JavaScript的DOM操作，使代码更加简洁
Vue的实现是基于MVVM思想，实现数据的双向绑定。
框架是一个半成品软件，是一套可重用的、通用的、软件基础代码模型
Vue文件下载及其MVVM思想的介绍：http://t.csdn.cn/IGTO7
💖 Vue代码创建
使用前需要映入Vue.js文件：
<script src=" Vue.js文件路径 " ></script>
Vue语法格式：new Vue（{
el:" #id名 ",
//data定义数据模型 data:{
数据模型
}
}）
注：在JS区域中创建,并且el的定义相当于CSS的id选择器
使用格式：
<div id=" id名 "> 代码 {{数据模型}} </div>
<html lang="en">
<head>
<title>Vue复习</title>
<script src="vue.js"> </script> //引入vue.js文件
</head>
<body>
<div id="app"> //v-model下述有讲解
<input type="text" v-model="message">
{{message}} //显示message的值
</div>
</body>
<script>
//创建Vue
new Vue({
el:"#app",
data:{
message:"Hello world"
}
})
</script>而如代码中，通过v-model指令，text文本框和数据模型data，完成了双向绑定，文本框的值和 message保持一致
二.指令
由上面，我们可以发现一个新奇的东西，v-model，这便是指令。
指令：HTML标签上带有v-前缀的特殊属性，不同指令不同含义。
常用指令：
| 指令 | 作用 |
| v-bind | 为HTML标签绑定属性值，如设置 href,css样式等 |
| v-model | 在表单元素上创建双向数据绑定 |
| v-on | 为HTML标签绑定事件 |
| v-if | 条件性的渲染某元素，判定为true时渲染,否则不渲染 |
| v-else-if | |
| v-else | |
| v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |
| v-for | 列表渲染，遍历容器的元素或者对象的属性 |
v-bind
为标签绑定属性值，可是有人会问，我们不需要这个也可以绑定啊，可是这是动态绑定诶，
使用时，可以直接省略v-bind
例如：以上代码，当游戏链接出错时，未使用指令，需要一个一个去修改；使用了指令，则可以直接在data数据模型一键修改。
v-on
为HTML标签绑定事件，在Vue当中创建methods方法。
<head>
<title>Vue复习</title>
<script src="vue.js"> </script>
</head>
<body>
<div id="app">
<input type="button" value="按钮" v-on:click="chage()">
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
message:"Hello world",
url:"http://t.csdn.cn/w5tHw"
},
methods: {
chage:function(){
alert("执行方法");
}
}
})
</script>注：事件不再是onclick，而是click，去掉了on。
v-if、v-else-if、v-else
这三个配套使用，用法与 Java中的if、else if、else 一致，一般用于<span>标签中，是进行条件判断。当成立时，则会显露出<span> 文本 </span>中的文本内容。
注：如果不成立，浏览器检查中的元素是不存在该行代码的。
<head>
<title>Vue复习</title>
<script src="vue.js"> </script>
</head>
<body>
<div id="app">
<span v-if="age<18">未成年</span>
<span v-else-if="age>=18&&age<=40">青年</span>
<span v-else>中年</span>
</body>
<script>
new Vue({
el:"#app",
data:{
age:18;
}
})
</script>
v-show
作用与v-if等指令一样，但是会显示出 不符合条件的代码行
v-for
循环，遍历，当数据模型data 里含有数组时，可以使用
语法格式：<div v-for=" 变量名 in 数组名">{{ 变量名 }}</div>
获取索引：<div v-for=" (变量名,下标名） in 数组名"> {{下标值+1}}:{{ 变量名 }} </div>
三.Vue生命周期
生命周期：指一个对象从创建到销毁的整个过程。
Vue生命周期有8个阶段：每触发一个阶段便会自动执行一个生命周期的方法,也称钩子方法。
| 状态 | 阶段周期 |
| beforeCreate | 创建前 |
| created | 创建后 |
| beforeMount | 挂载前 |
| mounted | 挂载完成 |
| beforeUpdate | 更新前 |
| update | 更新后 |
| beforeDestory | 销毁前 |
| destory | 销毁后 |
Vue生命周期完整过程:
代码示例：
<script>
new Vue({
e1:"#app",
data:{
//代码
}，
mounted(){
//挂载完成时，执行的代码
}
updated(){
//更新后，执行的代码
}
.....
})
</script>注：Java程序员只要掌握mounted()方法.
结：Vue主要依赖各种指令，生命周期每一个阶段都有其对应的执行方法。
----------懒惰的tq02
