springboot和vue：八、vue快速入门

vue快速入门

新建一个html文件

导入 vue.js 的 script 脚本文件

1

• 在页面中声明一个将要被 vue 所控制的 DOM 区域，既MVVM中的View

	{{ message }}

1
2
3

创建 vm 实例对象（vue 实例对象）

const hello = {
	 data : functiion(){
	                return {
	                    message: 'Hello vue!'
	                }
	            }
	        }
const app = Vue.createApp(hello)
app.mount('#app')
1
2
3
4
5
6
7
8
9

最终html代码

    
    
    
    



    

        {{ message }}
    
    



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

注意ctrl+s保存。

最终页面

vue基础用法

内容渲染

需要额外注意的是链接标签的渲染除了双括号之外需要额外用v-html的标签，否则只会识别成文本。

    
    
    
    



    

        
姓名：{{username}}
        

    
    



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

属性绑定

结构如图所示

注意属性绑定的话，属性前需要加：，前需要空格。
完整代码：

    
    
    
    



    

        百度
            
            
    

    



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

测试页面：

结合js表达式

    
    
    
    



    

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

        
{{user.name}}
    
    



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

事件绑定

可以使用v-on标签再加动作，也可以直接用@加动作
后面可以加方法，也可以直接写简单的函数。
两个按钮都可以实现+1的功能。

完整代码：

    
    
    
    



    

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



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

条件渲染

只有表达式为真时，v-if才会真正地在dom树里创建出来。
无论表达式值为什么，v-show都会被创建出来，只是页面不一定显示。
完整代码

    
    
    
    



    

        Toggle Flag
        
请求成功 --- 被v-if控制
        
请求成功 --- 被v-show控制
    
    



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

v-if和列表渲染

完整代码：

    
    
    
    



    

        
随机数>0.5
        
随机数≤0.5
        

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



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37