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

• 前端环境的准备

编码工具：VSCode

https://code.visualstudio.com/

依赖管理：NPM

项目构建：VueCli

学习Vue前端框架需要有html,css，js的基础。

关于MVVM模式：

• Vue快速入门

下面开始设计：

新建一个文件夹 D:codedemo，打开Visual Studio Code，将demo文件夹拖拽到Visual Studio Code中。

新建一个文件，保存到D:codedemo文件夹中，文件名为demo.html

输入英文的 ！，然后回车，就可以得到html主要代码

在 编写如下代码：

 
{{ message }}

说明：

1.添加如下代码，导入Vue脚本

2.设置视图（View）。标签之间的内容归View管理，声明要被vue所控制的DOM区域

{{ message }}

3创建ViewModel（创建vue的实例对象）,

data里面规定的是数据，现在把数据渲染到上面的主键里面去，使用{{ message }}，里面的message就是data里面的属性值。还要通过.mount('#app')确定渲染的范围，这里就是这个标签范围内。

这里安装一个插件，open in browser。

安装插件有就可以在代码中右键，直接在浏览器中看效果。

可以得到如下效果

进入Vue官网： https://cn.vuejs.org/ 在快手上手里面有基本用法。

• 1.基本用法

    
    
    
    
    
    


    
    {{message}}

• 2.内容渲染指令

    
    
    
    
    
    


    
        
姓名：{{username}}
        
性别：{{gender}}

        
{{desc}}}
        

    
    

注意：{{ }}为模板语法；{{desc}} 只会显示原始内容；

使用v-html指令就能将 desc:'百度' 这部分内容以HTML的方式渲染出来，在浏览器中就会变成一个超链接的形式。

• 3.属性绑定指令

    
    
    
    
        
    


    
        百度
        
        
    
    

标签是有属性的，属性的绑定需要叫冒号 “ ：”

还有一个写法就是加 v-bind: 但是一般都会把 v-bind 省略，就保留 ：号。

比如： input输入框 有 type属性，placeholder属性；img图片的src属性，style样式属性等，都要在前面加 ：号。

：号后面的是一个变量或表达式。

• 4.使用javaScript表达式

    
    
    
    
      
    


    
    
        
{{number + 1}}
        
{{ok ? 'True' : 'False'}}
        
{{message.split('').reverse().join('')}}
        
xxx

        
{{user.name}}
    

    

解释：

number + 1 变量加1

ok ? 'True' : 'False' 三元表达式

message.split('').reverse().join('') 字符断点翻转

user.name 调用user的name属性。

• 5.事件绑定指令

前端绑定事件操作：比如点击后加1；

    
    
    
    
      
      


  
    
count 的值为：{{count}}
    +1
    +1
  
  

    

说明：count的值初始定为0。

按钮点击会触动"addCount"方法。在下面的addCount()方法中定义了count的值自增1。

v-on: 在这里可以简写成 @

直接在按钮中定义了表达式。

如果逻辑简单可以直接用表达式，逻辑复杂可以定义函数来完成。

按钮中的count数据发生变化，

{{count}}里面的count的值自动变化，页面也自动刷新。

自定义的方法定到methods里面，这里的this就是指vm对象，用 this. 就可以访问上面的初始count = 0 。

• 6.条件渲染指令

Toggle Flag

请求成功----被 v-if 控制

说明：

v-if 传递的是一个布尔值，如果值为 true,标签被渲染，如果为false 标签就不会被渲染。

运行结果，可以看到两个

标签在浏览器中都看不到，区别为

v-if 的值为false，该标签不会创建出来；

v-show 的值为false，该标签会被创建出来，但是会隐藏起来，不会在浏览器中显示出来。

如果标签频繁被切换，使用v-show 效率更加高一点。

点击按钮：，里面通过 !flag 将 flag 值取反，这样 flag 的值就由 false 变成了 true ,这样两个

标签的内容就显示在浏览器上了。

• 7.v-else和v-else-if指令

    
    
    
    
    
    


    
        
随机数 > 0.5
        
随机数 0.5
        

        
优秀
        
良好
        
一般
        
差

      
        测试
      
      

点击

v-else和v-else-if指令就是判断语句的用法

num:Math.random(0.99)

设置1以内的随机数赋值给 num ，两个

标签中根据 num 的值显示不同内容

随机数 > 0.5
随机数 0.5

这里直接给 type 赋值了 B ，有兴趣了可以自己写一个方法，随机赋值 A B C D,这样就可以在浏览器中出现相应的成绩。

type:'B'

运行结果：

• 8.列表渲染指令

    
    
    
    
    
    


    
        

            
索引是{{i}},姓名是：{{user.name}}
        
    

    
    

定义了一个 userList 数组（注意：数组用 [ ] 符号）用于存数据，里面赋值了3个有 id 和 name 属性的对象。这里的数据也可以从后端传过来，后面会讲前后端的联调。

v-for 后面的可以带一个参数，这时取出来就是对应的元素。这里的两个参数(user,i)，前面的是元素，后面的是索引 。in 后面是需要循环的数据 userList,这时userList 里面有多少个元素，

标签的内容。

运行结果

• 9.v-for中的key

    
    
    
    
     
     


    
      
      
        
        添加新用户
      
    
    
      

       

        
        姓名：{{user.name}}  
       
 
      
    

    

运行结果：

对文本框中输入新用户姓名，比如: george 点击 添加新用户按钮，结果如下：