SpringBootVue（八）Vue前端框架快速上手

　　前端环境的准备
　　编码工具：VSCode
　　https：code。visualstudio。com
　　依赖管理：NPM
　　项目构建：VueCliVue框架介绍
　　学习Vue前端框架需要有html，css，js的基础。
　　关于MVVM模式：
　　Vue快速入门
　　下面开始设计：
　　新建一个文件夹D：codedemo，打开VisualStudioCode，将demo文件夹拖拽到VisualStudioCode中。
　　新建一个文件，保存到D：codedemo文件夹中，文件名为demo。html
　　输入英文的！，然后回车，就可以得到html主要代码
　　在编写如下代码：body｛｛message｝｝body
　　说明：
　　1。添加如下代码，导入Vue脚本
　　2。设置视图（View）。标签之间的内容归View管理，声明要被vue所控制的DOM区域｛｛message｝｝
　　3创建ViewModel（创建vue的实例对象），
　　data里面规定的是数据，现在把数据渲染到上面的主键里面去，使用｛｛message｝｝，里面的message就是data里面的属性值。还要通过。mount（app）确定渲染的范围，这里就是这个标签范围内。
　　这里安装一个插件，openinbrowser。
　　安装插件有就可以在代码中右键，直接在浏览器中看效果。
　　可以得到如下效果
　　进入Vue官网：https：cn。vuejs。org在快手上手里面有基本用法。
　　1。基本用法！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metahttpequivXUACompatiblecontentIEedgemetanameviewportcontentwidthdevicewidth，initialscale1。0titleDocumenttitle！1。导入vue的脚本文件headbody！2。声明要被vue所控制的DOM区域｛｛message｝｝！3。创建vue的实例对象bodyhtml
　　2。内容渲染指令！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metahttpequivXUACompatiblecontentIEedgemetanameviewportcontentwidthdevicewidth，initialscale1。0titleDocumenttitle！1。导入vue的脚本文件headbodyp姓名：｛｛username｝｝p性别：｛｛gender｝｝p｛｛desc｝｝｝pvhtmldescbodyhtml
　　注意：｛｛｝｝为模板语法；｛｛desc｝｝只会显示原始内容；
　　使用vhtml指令就能将desc：百度这部分内容以HTML的方式渲染出来，在浏览器中就会变成一个超链接的形式。3。属性绑定指令！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metahttpequivXUACompatiblecontentIEedgemetanameviewportcontentwidthdevicewidth，initialscale1。0titleDocumenttitle！1。导入vue的脚本文件headbody百度inputtypetext：placeholderinputValueimg：srcimg02。bs178。combleh3b6c9c679ff121e6。jpg：style｛width：w｝altbodyhtml
　　标签是有属性的，属性的绑定需要叫冒号：
　　还有一个写法就是加vbind：但是一般都会把vbind省略，就保留：号。
　　比如：input输入框有type属性，placeholder属性；img图片的src属性，style样式属性等，都要在前面加：号。
　　：号后面的是一个变量或表达式。4。使用javaScript表达式！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metahttpequivXUACompatiblecontentIEedgemetanameviewportcontentwidthdevicewidth，initialscale1。0titleDocumenttitle！1。导入vue的脚本文件headbody！Vue实例要控制的DOM区域p｛｛number1｝｝p｛｛ok？True：False｝｝p｛｛message。split（）。reverse（）。join（）｝｝p：idlistidxxxp｛｛user。name｝｝bodyhtml
　　解释：
　　number1变量加1
　　ok？True：False三元表达式
　　message。split（）。reverse（）。join（）字符断点翻转
　　user。name调用user的name属性。5。事件绑定指令
　　前端绑定事件操作：比如点击后加1；！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metahttpequivXUACompatiblecontentIEedgemetanameviewportcontentwidthdevicewidth，initialscale1。0titleDocumenttitle！1。导入vue的脚本文件head！Vue实例要控制的DOM区域h3count的值为：｛｛count｝｝h3buttonvon：clickaddCount1buttonbuttonclickcount11buttonbodybodyhtml
　　说明：count的值初始定为0。
　　按钮点击会触动addCount方法。在下面的addCount（）方法中定义了count的值自增1。
　　von：在这里可以简写成
　　直接在按钮中定义了表达式。
　　如果逻辑简单可以直接用表达式，逻辑复杂可以定义函数来完成。
　　按钮中的count数据发生变化，｛｛count｝｝里面的count的值自动变化，页面也自动刷新。
　　自定义的方法定到methods里面，这里的this就是指vm对象，用this。就可以访问上面的初始count0。
　　6。条件渲染指令！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metahttpequivXUACompatiblecontentIEedgemetanameviewportcontentwidthdevicewidth，initialscale1。0titleDocumenttitle！1。导入vue的脚本文件headbodybuttonclickflag！flagToggleFlagbuttonpvifflag请求成功被vif控制pvshowflag请求成功被vif控制bodyhtml
　　说明：
　　vif传递的是一个布尔值，如果值为true，标签被渲染，如果为false标签就不会被渲染。
　　运行结果，可以看到两个
　　标签在浏览器中都看不到，区别为
　　vif的值为false，该标签不会创建出来；
　　vshow的值为false，该标签会被创建出来，但是会隐藏起来，不会在浏览器中显示出来。
　　如果标签频繁被切换，使用vshow效率更加高一点。
　　点击按钮：，里面通过！flag将flag值取反，这样flag的值就由false变成了true，这样两个
　　标签的内容就显示在浏览器上了。
　　7。velse和velseif指令！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metahttpequivXUACompatiblecontentIEedgemetanameviewportcontentwidthdevicewidth，initialscale1。0titleDocumenttitle！1。导入vue的脚本文件headbodypvifnum0。5随机数0。5pvelse随机数0。5hrpviftypeA优秀pvelseiftypeB良好pvelseiftypeC一般pvelse差测试buttonclicka！a点击buttonbodyhtml
　　velse和velseif指令就是判断语句的用法num：Math。random（0。99）
　　设置1以内的随机数赋值给num，两个
　　标签中根据num的值显示不同内容pvifnum0。5随机数0。5pvelse随机数0。5
　　这里直接给type赋值了B，有兴趣了可以自己写一个方法，随机赋值ABCD，这样就可以在浏览器中出现相应的成绩。type：B
　　运行结果：
　　8。列表渲染指令！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metahttpequivXUACompatiblecontentIEedgemetanameviewportcontentwidthdevicewidth，initialscale1。0titleDocumenttitle！1。导入vue的脚本文件headbodyullivfor（user，i）inuserList索引是｛｛i｝｝，姓名是：｛｛user。name｝｝liulbodyhtml
　　定义了一个userList数组（注意：数组用〔〕符号）用于存数据，里面赋值了3个有id和name属性的对象。这里的数据也可以从后端传过来，后面会讲前后端的联调。livfor（user，i）inuserList
　　vfor后面的可以带一个参数，这时取出来就是对应的元素。这里的两个参数（user，i），前面的是元素，后面的是索引。in后面是需要循环的数据userList，这时userList里面有多少个元素，标签就会被创建几个。所以这里写的是一个标签，浏览器显示出来的是三个标签的内容。
　　运行结果
　　9。vfor中的key！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metahttpequivXUACompatiblecontentIEedgemetanameviewportcontentwidthdevicewidth，initialscale1。0titleDocumenttitle！1。导入vue的脚本文件headbody！添加用户的区域inputtypetextvmodelnamebuttonclickaddNewUser添加新用户button！用户列表区域ullivfor（user，index）inuserListinputtypecheckbox姓名：｛｛user。name｝｝liulbodyhtml
　　运行结果：
　　对文本框中输入新用户姓名，比如：george点击添加新用户按钮，结果如下：