编译软件：IntelliJ IDEA 2019.2.4 x64
运行环境：Google浏览器
Vue框架版本：Vue.js v2.7.14
一. 框架是什么？
任何编程语言在最初的时候都是没有框架的，后来随着在实际开发过程中不断的总结经验，积累最佳的解决方案，慢慢地人们发现在很多特定场景的特定问题，总是可以套用固定的解决方案。
于是有人把成熟的固定解决方案收集起来，整合在一起，就形成了框架。
在使用框架时，我们往往并不会关心框架是如何编程实现，我们只会关心它能不能实现我们想要的代码逻辑，当然，前提是我们需要提前对框架进行声明，即告诉它要做什么，就像用洗衣机洗衣服时需要先放衣服，洗衣液，设置洗涤模式等相应功能参数。
而我们使用Vue框架，就是在其导入了封装的固定的解决方案的js文件的基础上进行编程开发。
二. 怎么写一个Vue程序（以IDEA举例）？
步骤：
- 在官网上下载Vue框架的js文件
- 在IDEA上新建工程文件，在其工程目录新建一个js文件夹并创建一个空白的Vue.js文件，将官网上的Vue框架的js代码全选复制粘贴至我们新建的Vue.js上
- 新建一个HelloWorld.html文件，在其上搭建Vue框架
a. 将Vue.js引入到网页内
ps：在IDEA里直接将Vue.js拖拽至HelloWorld.html里，自动实现引入
<script src="vue.js"></script>
- b. 在body标签内设置一个区域(Vue要操作的区域)
//在body里设置一个空的 div 元素，具有 ID“app” <body> <div id="app"></div> </body>
- c. 在div标签的下方，创建Script标签并new Vue()对象
<body> <div id="app"></div> </body> <script> //new Vue()对象 new Vue({}); </script>
- d. 给Vue对象传递一个js对象（通过{}方式创建的js对象）
<script> new Vue({ el:"#app",//指定为#app的目标元素，用于Vue控制(选择控制区域） data:{},//一个空对象，将用于存储此实例的数据模型。 methods:{} //一个空对象，将用于定义此实例可能使用的任何自定义方法。 ); </script>
- 实现功能
a. 设置数据模型
//设置数据模型 data:{ msg:"div的内容" },
- b. 将Vue对象中的数据模型和网页的标签体做一个绑定关系
<body> <div id="app"> <!-- [{msg}}-->插值表达式 --> 绑定数据模型 --> <div>[{msg}}</div> </div> </body>
- c. 这样我们在操作div中的内容的时候，就是转化为操作msg
在元素上绑定事件：
<input type="button"value="获得div中的内容"@click="getText"/>
- 在Vue对象的methods内创建函数
"methods":{ //创建自定义函数getText用于获取msg的值，其实是获取div中的文本，以警示框弹出 "getText":function () { alert(this.msg); }, //创建自定义函数setText用于设置msg的值，实际上修改的是div中的内容 "setText":function () { this.msg="Vue设置的新值" }
案例：对div标签体中的内容进行获取或修改
代码演示如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue_HelloWorld</title> <script src="vue.js"></script> </head> <body> <div id="app"> <div id="div01">{{msg}}</div> <input type="button" value="获取div的内容" id="btn01" @click="getText"> <!-- 无参函数可以省略()，但有参函数不能省略--> <input type="button" value="修改div的内容" id="btn02" @click="setText"> </div> <script> new Vue({ el:"#app",//el是选择Vue可操作的区域 data:{ msg: "这是div的内容" }, //设置数据模型 methods:{ getText:function () { alert(this.msg) }, setText:function () { this.msg="这是Vue设置的新值" } } } ) </script> </body> </html>
三. 什么是声明式渲染?
3.1 声明式
声明式是相对于编程式而言的。
声明式：告诉框架做什么，具体操作由框架完成编程式：自己编写代码完成具体操作
3.2 渲染
上图含义解释：
- 蓝色方框：HTML标签
- 红色圆形：动态、尚未确定的数据
- 蓝色圆形：经过程序运算以后，计算得到的具体的，可以直接在页面上显示的数据、
- 渲染：程序计算动态数据得到具体数据的过程
举例如下：
四. Vue如何操作标签体(双标签中的内容)?
语法：
插值表达式：{{数据模型中的key值)}
代码举例如下：
<div id="div01">{{msg}}</div>
data:{ msg: "这是div的内容" }
五. Vue如何操作属性值？
5.1 单向绑定
释义：
修改数据模型，html页面同步效果，
但是用户修改html属性值，数据模型不会随之改变
语法：
v-bind:原属性名=“数据模型的key值”
可以简写：
:原属性名=“数据模型的key值”
案例：演示单向绑定的效果
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Vue_HelloWorld</title> <script src="vue.js"></script> </head> <body> <div id="app"> <!-- 单向绑定 v-blind --> <input type="text" v-blind:value="username" > <br> <br> <input type="button" value="显示文本框中的内容" @click="getValue"> </div> <script> new Vue({ el:"#app",//el是选择Vue可操作的区域 data:{ username:"admin" }, methods:{ getValue:function () { alert(this.username) } } } ) </script> </body> </html>
案例演示结果：
①输入前的变化
②输入后的变化
5.2 双向绑定
释义：
修改数据模型，html页面同步效果，
用户修改html属性值，数据模型会随之改变
语法：
v-model:原属性名=“数据模型的key值”
可以简写为，如下所示
v-model=“数据模型的key值”
注意：
在input标签中，双向绑定只能修改value，因为客户只能修改value属性，其他的属性用户也修改不了
案例：演示实现双向绑定
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Vue_HelloWorld</title> <script src="vue.js"></script> </head> <body> <div id="app"> <!-- 双向绑定 v-blind --> <input type="text" v-model:value="username" > <br> <br> <input type="button" value="显示文本框中的内容" @click="getValue"> </div> <script> new Vue({ el:"#app",//el是选择Vue可操作的区域 data:{ username:"admin" }, methods:{ getValue:function () { alert(this.username) } } } ) </script> </body> </html>
案例演示结果：
①输入前：
②输入后的变化：
tips：
v-model.trim="数据模型的key值” 去前后空格
六. Vue如何实现条件渲染？
6.1 什么是条件渲染？
根据Vue对象中，数据属性的值来判断是否对HTML页面内容进行渲染。即控制元素是否显示。
6.2 v-if
用法：
根据表达式的值来决定是否渲染元素或组件，当表达式的值为真时才会渲染，否则不会渲染。
案例：使用v-if在按按钮的同时改变div的内容
代码演示如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #divs { border: 1px solid red; width: 100px; height: 150px; } </style> <script src="vue.js"></script> </head> <body> <div id="app"> <div v-if=flag id="divs">这是div的内容</div> <input type="button" value="按钮" @click="changeDiv"> </div> <script> new Vue({ el:"#app", data:{ flag:true }, methods:{ changeDiv:function () { this.flag=!this.flag; } } }) </script> </body> </html>
案例演示效果：
①变化前
②变化后
