Vue入门案例

1.Vue概述
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

尤雨溪是Vue.js框架的作者，HTML5版Clear的打造人。他认为，未来App的趋势是轻量化和细化，能解决问题的应用就是好应用。而在移动互联网时代大的背景下，个人开发者的机遇在门槛低，成本低，跨设备和多平台四个方面。

学习vue的两个好地方：

https://cn.vuejs.org/v2/guide/instance.html

https://www.runoob.com/vue2/vue-tutorial.html
2.Vue安装
1.使用直

或者下载到本地

2安装nodes.js ， npm
3.项目结构

4创建springboot工程 ，引入依赖

        org.springframework.boot
        spring-boot-starter-parent
        2.2.0.RELEASE

    
    
        
            org.springframework.boot
            spring-boot-starter-web
        
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
            
                
                    org.junit.vintage
                    junit-vintage-engine
                
            
        
    

5.创建启动类，在resource文件夹下新建static（不要拼错单词）文件夹创建helloVue.html

    
    
    
  





    
    message:
{
    {message}}
    
    hi:
{
    {hi()}}

6.语法
1.条件语句

    
    
    



    

        
显示
    
    

        
小学生
    
    

        
中学生
    
    

        
大学生
    
    

    
    

        aa显示
    

2.v-for语句

    
    
    



    

        
        

            username:{
    {a.username}}------age:{
    {a.age}}
        

    
    

        

            key:{
    {key}}-----value:{
    {value}}
        
    
    

        

            {
    {value}}
        
    

3.computed 计算属性

    
    
    



    
computed 计算过的

        1.依赖的值发生变化，computed就会被调用，如果依赖的值没有变化或者没有依赖不会被调用

        对比methods 无论是否依赖  data methods都会被调用

        2.当computed依赖的值data发生变化时无论界面调用多少次，computed就会执行一次

        对比methods数据发生变化，界面调用多少次methods methods对应的方法就会调用多少次

    
    原始值 msg:{
    {msg}}
    
methods:{
    {toUpper1()}}
    
 computed:{
    {toUpper2}}