Vue.js（通常简称为Vue）是一个用于构建用户界面的开源JavaScript框架，可以免除原生JavaScript中的DOM操作，简化书写。其基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。
引入Vue
1、首先需要在html页面引入Vue.js文件，相当于java引入包，但Vue.js需自行下载
<script src="js/vue.js"></script>2、然后在js代码区域，创建Vue核心对象，定义数据模型
<script>var app = new Vue({el: '#app',data: {message: 'Hello Vue!'},methods:{}});</script>- el: '#app'：指定Vue实例挂载到哪个DOM元素上。
- data：包含Vue实例需要的数据。
- methods：包含Vue实例需要的方法。
3、编写视图
<div id="app"><input type="text" v-model="message">{{ message }}</div>v-model="message"：这是Vue.js提供的指令，用于创建双向数据绑定。它将输入框的值与Vue实例中的message数据属性绑定起来。这意味着当你在输入框中键入内容时，message的值会实时更新。当message的值在其他地方被更新时，输入框中显示的内容也会相应更新。
{{表达式}}：为插值表达式，内容可以是变量、三元运算符、函数调用、算术运算
可通过改变输入框内的内容来改变message的内容
//改变后
常用指令
HTML标签中带有v-前缀的特殊属性，不同指令具有不同含义
- v-bind:为HTML标签绑定属性值，如设置href，css等。v-bind可省略，只写"："。
- v-model:为表单元素创建双向数据绑定。一旦绑定了数据变量，那必须定义该数据变量。
- v-on:为HTML标签绑定监听DOM事件。v-on:click可简写为@click，和v-model一样，一旦绑定了方法，就必须vue对象内部定义该方法。
- v-if、v-else-if、v-else: 根据表达式的真假来条件性地渲染元素。
- v-show:根据表达式的真假切换元素的 display CSS 属性。不成立也会渲染元素，但不展示
- v-for:基于源数据多次渲染元素或模板块。
<!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>AAA专业苏打饼干打孔</title><script src="js/vue.js"></script>
</head><body><div id="app"><!--v-bind:--><a :href="url" target="_blank" :title="url">超链接</a><br><br><!-- 等同于<a v-bind:href="url" target="_blank" :title="url">超链接</a> --><input type="text" v-model="url"><br><br><!--v-on:--><input type="button" value="点击我" @click="buttonClicked"><br><br><!-- 等同于<input type="button" value="点击我" v-on:click="buttonClicked"> --><!-- v-if、v-else-if、v-else --><input type="text" v-model="age"><span v-if="age<0">输入错误</span><span v-else-if="age>=0&& age<18">未成年人</span><span v-else>老年人</span><br><br><span v-show="age<0">输入错误</span><span v-show="age>=0&& age<18">未成年人</span><span v-show="age>=18">老年人</span><!-- v-for格式：v-for="取出元素名 in 数组名" 或者v-for="(取出元素名,角标) in 数组名"--><div v-for="t in team">{{t}}</div><hr><div v-for="(t, i) in team">{{"第"+i+"个队伍"}}:{{ t }}</div></div><script>var app = new Vue({el: '#app',data: {team: ["tes", "t1", "gen.g", "hle", "blg"],age: 0,url: "https://www.bilibili.com" // 这里定义了 url 数据属性},methods: {buttonClicked: function () {alert("被点击了");}}});</script>
</body>
</html>v-if和v-show的区别：v-if只渲染符合要求的span，v-show全部渲染，但不符合要求的不展示
练习
<!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>AAA专业苏打饼干打孔</title><script src="js/vue.js"></script>
</head><body><div id="app"><table border="1" cellspacing="0" width=60%><tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>分数</th><th>等级</th></tr><tbody ><tr align="center" v-for="(person, index) in students" :key="index"><td>{{ index+1}}</td><td>{{ person.name }}</td><td>{{ person.age }}</td><td v-if="person.gender=1">{{ "男" }}</td><td v-else-if="person.gender=2">{{ "女" }}</td><td>{{ person.score }}</td><td v-if="person.score<60">{{ "不及格" }}</td><td v-else-if="person.score>=60">{{ "及格" }}</td></tr></tbody></table></div><script>new Vue({el: '#app',data: {students: [{ name: '张三', age: 25, gender: 1, score: 88 },{ name: '李四', age: 23, gender: 2, score: 92 },{ name: '王五', age: 27, gender: 1, score: 75 },{ name: '赵六', age: 22, gender: 2, score: 95 }]}});</script>
</body></html>
生命周期
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载DOM、渲染、更新、卸载等一系列过程。Vue提供了生命周期钩子函数，每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。以下是Vue实例的生命周期及其对应的钩子函数：
创建前/后
- beforeCreate: 在实例初始化之后，数据观测 (data observer) 和事件/watcher 设置之前被调用。
- created: 在实例创建完成后被立即调用。在这一步，实例已完成数据观测、属性和方法的运算，$el 属性还未显示出来。
挂载前/后
- beforeMount: 在挂载开始之前被调用：相关的 render 函数首次被调用。
- mounted: 在 el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果根实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。最常该方法内添加事件。
更新前/后
- beforeUpdate: 数据更新时调用，发生在虚拟DOM打补丁之前。适用于在现有DOM应用更改之前访问它。
- updated: 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。
销毁前/后
- beforeDestroy: 在实例销毁之前调用。在这一步，实例仍然完全可用。
- destroyed: 在实例销毁之后调用。调用此钩子时，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
