Vue入门案例

最新推荐文章于 2024-07-10 18:13:56 发布

路人甲M

最新推荐文章于 2024-07-10 18:13:56 发布

阅读量399

点赞数

文章标签： vue spring boot

本文链接：https://blog.csdn.net/m0_48483101/article/details/107755875

版权

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.使用直 <script>引入安装

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

或者下载到本地

 <script src="/js/vue.min.js"></script>

2安装nodes.js ， npm
3.项目结构
在这里插入图片描述

4创建springboot工程，引入依赖

<parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.0.RELEASE</version>

    </parent>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--springboot集成Junit 的启动依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Vue依赖-->
  <!--  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>-->
<script src="/js/vue.js"></script>
</head>
<body>
<!--vue的作用域-->
<div id="app">
    <!--{{}}绑定Vue的实例数据-->
    message:<p>{{message}}</p>
    <!--通过调方法获取数据 方法如果依赖数据message  那么message数据发生变化就会重新调用方法-->
    hi:<p>{{hi()}}</p>
</div>
<script>
    //创建Vue应用，通过el锚点将app绑定到Vue应用
    var vm=new Vue({
        el:"#app",
        /*data  数据集*/
        data:{
            message:"hello world",
        },
        /*methods方法集*/
        methods:{
            hi:function () {
                return this.message+"-----from vue"
            }
        }
    })
</script>

</body>
</html>

6.语法
1.条件语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/vue.js"></script>
</head>
<body>
<div id="app">
    <div v-if="aa">
        <h2>显示</h2>
    </div>
    <div v-if="age<12">
        <h3>小学生</h3>
    </div>
    <div v-else-if="age>13&&age<18">
        <h3>中学生</h3>
    </div>
    <div v-else>
        <h3>大学生</h3>
    </div>
    <div></div>
    <!--v-show可以是实现v-if功能-->
    <div v-show="aa">
        aa显示
    </div>

</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
           aa:true,
            age:21
        }
    })
</script>
</body>
</html>

2.v-for语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/vue.js"></script>
</head>
<body>
<div id="app">
    <ol>
        <!--循环变量数组 并将每一个元素赋值给a-->
        <li v-for="a in user">
            username:{{a.username}}------age:{{a.age}}
        </li>

    </ol>
    <ol>
        <li v-for="(value,key) in student">
            key:{{key}}-----value:{{value}}
        </li>
    </ol>
    <ul>
        <li v-for="value in 5">
            {{value}}
        </li>
    </ul>
</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            user:[{username:'张三',age:15},{username:"李四",age:20}],
            student:{
                username:'aaa',
                age:18,
                sex:'F'
            }
        }
    })
</script>
</body>
</html>

3.computed 计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/vue.js"></script>
</head>
<body>
<div id="app">
    <h4>computed 计算过的<br>
        1.依赖的值发生变化，computed就会被调用，如果依赖的值没有变化或者没有依赖不会被调用<br>
        对比methods 无论是否依赖  data methods都会被调用<br>
        2.当computed依赖的值data发生变化时无论界面调用多少次，computed就会执行一次<br>
        对比methods数据发生变化，界面调用多少次methods methods对应的方法就会调用多少次<br>
    </h4>
    原始值 msg:{{msg}}
    <p>methods:{{toUpper1()}}</p>
    <p> computed:{{toUpper2}}</p>


</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"hello"
        },
        methods:{
            toUpper1:function () {
                /*将msg转大写 加 随机数*/
                return this.msg.toLocaleUpperCase()+Math.random()
            }
        },
        computed:{
            toUpper2:function () {
                /*将msg转大写 加 随机数*/
                return this.msg.toLocaleUpperCase()+Math.random()
            }
        }
    })
</script>
</body>
</html>