springboot和vue：八、vue快速入门

vue快速入门

新建一个html文件

导入 vue.js 的 script 脚本文件

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

	{{ message }}

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

const hello = {
	 data : functiion(){
	                return {
	                    message: 'Hello vue!'
	                }
	            }
	        }
const app = Vue.createApp(hello)
app.mount('#app')

最终html代码

    
    
    
    



    

        {{ message }}
    
    

注意ctrl+s保存。

最终页面

vue基础用法

内容渲染

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

    
    
    
    



    

        
姓名：{{username}}
        

    
    

属性绑定

结构如图所示

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

    
    
    
    



    

        百度
            
            
    

    

测试页面：

结合js表达式

    
    
    
    



    

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

        
{{user.name}}
    
    

事件绑定

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

完整代码：

    
    
    
    



    

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

条件渲染

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

    
    
    
    



    

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

v-if和列表渲染

完整代码：

    
    
    
    



    

        
随机数>0.5
        
随机数≤0.5
        

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