要学习好前端，掌握好一些前端框架是必须的，例如其中的vue2是就是必不可少的，今天浅谈一下vue2的相关内容。
Vue.js是一个流行的JavaScript框架，用于构建用户界面。Vue.js的最新稳定版本是Vue 2。
Vue 2具有许多强大的特性，使得开发者可以轻松构建交互式的单页面应用程序。以下是一些Vue 2的关键特性：
-
响应式数据绑定：Vue 2使用了一种称为"响应式"的机制，可以将数据与DOM元素进行绑定。当数据发生变化时，相关的DOM元素会自动更新，使得开发者无需手动操作DOM。
-
组件化开发：Vue 2鼓励开发者将应用程序拆分为多个可重用的组件。每个组件都有自己的模板、逻辑和样式，使得代码更加模块化和可维护。
-
虚拟DOM：Vue 2使用虚拟DOM来提高性能。虚拟DOM是一个轻量级的JavaScript对象，表示真实DOM的状态。当数据发生变化时，Vue会比较虚拟DOM的差异，并只更新需要更新的部分，从而减少了对真实DOM的操作次数。
-
指令：Vue 2提供了一些内置指令，用于操作DOM元素。例如，v-if指令可以根据条件来添加或移除DOM元素，v-for指令可以循环渲染列表。
-
生命周期钩子：Vue 2提供了一系列的生命周期钩子函数，允许开发者在组件的不同阶段执行自定义逻辑。例如，可以在组件创建前后执行特定的操作。
-
插件系统：Vue 2具有一个灵活的插件系统，允许开发者扩展框架的功能。许多第三方库和工具都提供了Vue插件，可以方便地集成到Vue应用程序中。
接下来，我将讲解一下vue的使用方法：
导入vue
导入VUE
在线引入方法
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
基本结构：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Vue</title>
</head>
<body>
<!--HTML部分-->
<div id="app">
{{ message }}
<h1>{{ day }}</h1>
</div>
<!--导入VUE-->
<!--在线引入方法-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->
<script src="./js/vue.js"></script>
<!--script部分-->
<script>
var app = new Vue({
el: '#app',
//data就是一个对象
data: {
message: 'Hello Vue!',
day: "今天是星期三"
}
})
</script>
</body>
</html>
v-test与v-html
v-text指令可以替换标签中的值,插入值则用简写插值表达式
v-html可以替换标签中的值，将文本内容解析为html代码
v-bind
v-bind指令可以替换标签属性，简写方式是在属性前加冒号
事件
<h1 v-on:click="f1()">点我下试试</h1>
<button @click="f1()">点我下试试</button>
v-show
<div id="app">
<!--当v-show值为true时显示，底层是靠display：none来实现元素隐藏-->
<h1>您的年龄是？{{age}}</h1>
<div id="buttons">
<button @click="age--">-</button>
<button @click="age++">+</button>
<button v-show="leftshow" @click="f1()">上一张</button>
<button v-show="rightshow" @click="f2()">下一张</button>
</div>
<img v-show='age>=18' :src="images[i].url" alt="">
</div>
<!--在图片查看基础上当没有上一张时，则上一张按钮消失，当没有下一张时，同理-->
<script>
new Vue({
el: '#app',
data: {
age: 18,
i: 0,
leftshow:'',
rightshow:'true',
images: [
{id:1,url:"../CSS/img/0000.png"},
{id:2,url:"../CSS/img/0001.png"},
{id:3,url:"../CSS/img/0002.png"},
{id:4,url:"../CSS/img/0003.png"},
],
},
methods: {
f1(){
this.i--
if(this.i<=0){
this.leftshow = false
}
if(this.i<this.images.length-1){
this.rightshow = true
}
},
f2(){
this.i++
if(this.i>=this.images.length-1){
this.rightshow=false
}
if(this.i>0){
this.leftshow=true
}
}
},
})
</script>
</body>
条件语句
v-if值为true时正常显示，为false时则不显示
v-if是直接从document删除，v-if消耗更大，如果需要频繁显示的元素则用v-show
v-if可以和v-else一起使用，当v-if为true时显示前者，否则显示后者
v-for
<h1 v-for="item in arr">{{item}}</h1>
arr是一个数组：
arr:['蔡徐坤','陈立农','范丞丞','王维凯','尤长靖'],
双向绑定
如果修改data中值，标签也会发生改变；改变标签中值则data中也会改变*
只要是input就用v-model绑定数据
在木鱼里可以手动输入每次添加的功德数
