前端框架Vue学习

news/2024/7/10 2:30:31 标签: vue, html

前端框架Vue

Vue框架是一套用于构建用户界面的渐进式框架。
采用的是MVVM模式，即：通过视图与模型的双向绑定，简化前端操作。
渐进式：指的是可以选择性的使用该框架的一个或多个组件，不对你的使用进行要求。
那么前端框架三巨头 ： Vue.js React.js AngularJs

html" title=vue>vuejs__vpm_7">html" title=vue>vue.js 的下载 （vpm下载）

  • 这里我们通过vpm的方式下载哈，
  • 首先要使用vpm，我们先下载nodejs ,
  • 下载好后我们进去idea，

在这里插入图片描述

  • 这样显示，我们就可以了，然后我们的idea就会多一个package.json的文件，进行cmd，进入这个文件，运行脚本就行拉。

在这里插入图片描述

  • 这样，html" title=vue>vue.js就安装好了。

演示双向绑定与事件处理

  • 创建一个初始化页面

在这里插入图片描述

  • 然后进页面，右击检查，然后对app.name进行修改，页面也会发生修改。
  • 然后我们可以使用{{}}获取显示数据
  • v-model实现双向绑定
  • v-on演示事件处理

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../node_modules/html" title=vue>vue/dist/html" title=vue>vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="num">
    <button v-on:click="num++">点我</button>
    <h2>{{name}} 非常酷 有{{num}}个学科</h2>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            name:"junmu",
            num:1
        }
    });
</script>
</body>
</html>

html" title=vue>vue_64">html" title=vue>vue实例生命周期及钩子函数（监听函数）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../node_modules/html" title=vue>vue/dist/html" title=vue>vue.js"></script>
</head>
<body>
<div id="app">
    {{msg}}
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            msg:"好家伙"
        },
        created() {  // 钩子函数  this表示html" title=vue>vue实例
            this.msg = "hello html" title=vue>vue.created1.";
            console.log(this)
        }
    });
</script>
</body>
</html>

双向绑定v-model

双向绑定，一定是在视图中修改数据，v-model可以使用的元素有：

  • input
  • select
  • textarea
  • checkbox
  • radio
  • components (Vue中的自定义组件）

演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../node_modules/html" title=vue>vue/dist/html" title=vue>vue.js"></script>
</head>
<body>
<div id="app">
    <input type="checkbox" value="Java" v-model="language">Java<br>
    <input type="checkbox" value="C++" v-model="language">C++<br>
    <input type="checkbox" value="Python" v-model="language">Python<br>
    <input type="checkbox" value="Swift" v-model="language">Swift<br>
    <h2>
        您选择了{{language.join(",")}}
    </h2>

</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            language:[]
        }
    });
</script>
</body>
</html>
  • 然后就可以做到以下结果拉，选什么就亮什么

在这里插入图片描述

v-on 数据的递增递减

  • v-on可以响应事件，该指定可以给页面元素绑定事件
  • 例如： v-on:clike= ’ add ’ ,可以简写成 @clike= ’ add ’
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../node_modules/html" title=vue>vue/dist/html" title=vue>vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="num">
    <button @click="num++">点我加1</button>
    <button @click="decrement">点我减1</button>
    <h2>{{name}} 非常酷 有{{num}}个学科</h2>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            name:"junmu",
            num:1
        },
        methods:{
            // 减法
            decrement(){
                this.num--;
            }
        }
    });
</script>
</body>
</html>

阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../node_modules/html" title=vue>vue/dist/html" title=vue>vue.js"></script>
</head>
<body>
<div id="app">

    <div style="background-color: aqua; width:100px;height: 100px" @click="print1()">
        <button @click.stop="print2()" >点我试试</button>
    </div>
    {{msg1}}
    <br>
    {{msg2}}

</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            msg1:"",
            msg2:""
        },
        methods:{
            print1(){
                this.msg1 = "背景被点了";
            },
            print2() {
                this.msg2 = "按钮被点了";
            }
        }
    });
</script>
</body>
</html>
  • 加上.stop后，该组件就不会再往上面冒泡了。

v-for v-if v-else 循环组件使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../node_modules/html" title=vue>vue/dist/html" title=vue>vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="show=!show" >点我</button>
    <ul v-if="show">
        <li v-for="(user,index) in users" v-if="user.gender == '女'" style="background-color: pink">
            {{index+1}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
            <div v-for="(value,key,index) in user">
                ***{{index}} -- {{value}} -- {{key}}
            </div>
        </li>
        <li v-else style="background-color: aqua">
            {{index+1}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
            <div v-for="(value,key,index) in user">
                ***{{index}} -- {{value}} -- {{key}}
            </div>
        </li>
    </ul>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            show:true,
            users:[
                {"name":"小黑","age":12,"gender":"男"},
                {"name":"小白","age":23,"gender":"男"},
                {"name":"小红","age":18,"gender":"女"}
            ]
        }
    });
</script>
</body>
</html>
  • 效果图如下：

在这里插入图片描述

  • 点击按钮就会显示或者影藏

日期的展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../node_modules/html" title=vue>vue/dist/html" title=vue>vue.js"></script>
</head>
<body>
<div id="app">
    <h2>
        你的生日是：
        {{new Date(birthday).getFullYear()}} - {{new Date(birthday).getMonth()}} - {{new Date(birthday).getDay()}}
    </h2>
    <hr>
    <h2>
        你的生日是：
        {{birth}}
    </h2>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            birthday:1489032145615
        },
        computed:{
            birth(){
                const date = new Date(this.birthday);
                return date.getFullYear() + "-" + date.getMonth() + "-" + date.getDay();
            }
        }
    });
</script>
</body>
</html>
  • 效果图

在这里插入图片描述

  • 这里时间我是随便输入的毫秒值哈，

watch：用于深度监控，可以监控旧值和新值

组件的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../node_modules/html" title=vue>vue/dist/html" title=vue>vue.js"></script>
</head>
<body>
<div id="app">
    <counter></counter>
</div>
<script type="text/javascript">

    const counter = {
        template:"<button @click='num++'>你点击了{{num}}次</button>",
        data(){
            return {num:0}
        }
    }

    // 这个属于全局注册，这样不好，我们搞个局部注册
    //Vue.component("counter",counter);

    var app = new Vue({
        el:"#app",
        components:{
            counter : counter
        }
    });
</script>
</body>
</html>
  • 这个没啥好说的

http://www.niftyadmin.cn/n/1329244.html

相关文章

Spring Boot 框架学习

Spring Boot 框架学习

Spring Boot 快速入门 Spring Boot是一个便捷搭建 基于spring工程的脚手架&#xff1b;作用是帮助开发人员快速搭建大型的spring 项目。简化工程的配置&#xff0c;依赖管理&#xff1b;实现开发人员把时间都集中在业务开发上。 简单入门 实现步骤&#xff1a; 创建工程&…
阅读更多...
求三角形子集的个数

求三角形子集的个数

求三角形子集的个数 已知有n个值&#xff0c;求他们能组成多少个三角形 给定n条边&#xff0c;求能组成三角形的子集个数&#xff0c;首先将给定数组排序&#xff0c;定义三个指针。分别枚举三角形的三条边&#xff0c;若前两个指针能保证指向的元素大于第三个指针指向的元素。…
阅读更多...
利用Kaptcha生成验证码

利用Kaptcha生成验证码

Kaptcha生成验证码 原来搞验证码的时候&#xff0c;都是用java画笔去搞&#xff0c;感觉好麻烦的有木有&#xff0c;今天带大家来看看kaptcha这个小工具吧&#xff0c;他可方便多啦&#xff01;&#xff01;&#xff01; 第一步哈&#xff0c;先导包&#xff0c;没有包啥也干不…
阅读更多...
Interceptor拦截器学习

Interceptor拦截器学习

Interceptor拦截器 咳咳&#xff0c;这个东东还是蛮好的哦&#xff0c;在项目里面哈&#xff0c;有很多的子模块需要做相同的请求处理&#xff0c;如果每个子模块都去写的话&#xff0c;那就太麻烦了&#xff0c;而且修改维护起来也不方便&#xff0c;耦合性也高&#xff0c;所…
阅读更多...
利用MultipartFile进行文件上传

利用MultipartFile进行文件上传

MultipartFile文件上传 今天我们搞一个换头像的设置哈&#xff0c;就是先上传一个图片文件上去&#xff0c;然后对将user对象里面的头像路径修改为上传的图片哈&#xff01;&#xff01;&#xff01; 首先第一步&#xff0c;要进行配置&#xff0c;就是这些图片要存放在哪里你得…
阅读更多...
利用字典树过滤敏感词

利用字典树过滤敏感词

过滤敏感词 咳咳&#xff0c;我们做项目哈&#xff0c;都会有要做利用侦听器做过滤敏感词的操作哈&#xff0c;其实呢&#xff0c;我们可以直接用equals方法&#xff0c;直接进行匹配&#xff0c;然后过滤掉&#xff0c;就可以了&#xff0c;但是呢&#xff0c;一个网站&#x…
阅读更多...
idea引入在线jquery后无效，并且没有语法显示（已解决）

idea引入在线jquery后无效，并且没有语法显示（已解决）

在线引入jquery后无效&#xff0c;并且没有语法显示 在线引入js文件 <script src"https://code.jquery.com/jquery-3.3.1.min.js"></script>引入后&#xff0c;idea没有语法提示&#xff0c;运行总是失败 原因 idea里面只有该 jquery 的 jquery.min.j…
阅读更多...
事务管理（看了要牢记）

事务管理（看了要牢记）

事务管理 简单的来说&#xff0c;就是我需要对这些事务进行管理&#xff0c;啊哈哈哈哈哈 那么为什么会有这种东东呢&#xff0c;因为程序在并发状态下&#xff0c;数据可能同时被多个人进行读取和修改后就会出错&#xff0c;所以需要进行事务的管理 并发状态下可能出现的错误 …
阅读更多...
最新文章

Copyright @ 2022~2023