vue.js

最新推荐文章于 2024-07-13 13:55:40 发布
最新推荐文章于 2024-07-13 13:55:40 发布
阅读量119 收藏
点赞数
分类专栏： javaWeb 文章标签： vue java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50881929/article/details/119114436
版权

Vue.js

官网：https://cn.vuejs.org/

开发环境：适用于学习 提示较多

vue+axios

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

生产环境：性能高

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    
</body>
</html>

第一个vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    

    <script>
            var app = new Vue({
                el: "#app",
                data: {
                    message: "hello vue"
                }
            })
    </script>
</body>
</html>

el: 挂载点，绑定id

vue实例的作用范围： vue管理el选项命中的元素及其内部的后代元素

选择器：尽量使用id选择器

是否可以设置其他dom元素：尽量使用div 没有样式，不能使用html和body

data：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>data</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>

<div id="app">
    {{message}}
    <h1>{{school.name}}</h1>
    <h1>{{school.address}}</h1>
    <ul>
        <li>{{hobby[0]}}</li>
    </ul>
</div>
<script>
    var app = new Vue({
            el : "#app",
            data: {
                message : "阿鬼大大",
                school:{
                    name:"西安石油大学",
                    address:"西安"
                },
                hobby:["吃饭","睡觉","想媳妇"]
            }
        })
</script>
        
</body>
</html>

v-text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-text演示</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2 v-text="message+'!'">测试</h2>
        <h2>{{message}}测试!</h2>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message: "阿鬼大大!!!"
            }
        })
    </script>
    
</body>
</html>
  • v-text 会覆盖原来的所有内容
  • 添加的时候使用插值表达式，字符串连接用单引号

v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-html</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2 v-html="message"></h2>
        <h2 v-text="message"></h2>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "<a href = 'data.html'>百度</a>"
            }
        })
    </script>
</body>
</html>

v-on

  • 可以使用@代替v-on
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="点击测试" v-on:click="doit"></input>
        <input type="button" value="编辑测试" @click="doit"></input>
        <input type="button" value="双击测试" @dblclick="doit"></input>
        <h1 @click="changeMessage">{{message}}</h1>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
            message:"阿鬼大大"
            },
            methods:{
                doit:function(){
                    alert("doit")
                },
                changeMessage:function(){
                    this.message+="+1111==>"
                }
            }
        })
    </script>
</body>
</html>

v-show

  • 作用：切换元素显示的状态
  • 原理是修改display，若为true则显示，若为false 则显示隐藏
  • 指令后面的值都为布尔值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<div id="app">

    <!-- <img v-show="flag" src="/img/4-1Z126160112.jpg" alt="" > -->
    <img v-show="age>20" src="/img/4-1Z126160112.jpg" alt="" >
    
    <h1>{{flag}}</h1>
    <h1>{{age}}</h1>
    <input type="button" value="点一下试试" @click="test"></input>
    <input type="button" value="增加年龄" @click="addAge">

</div>
<body>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                flag:true,
                age:20
            },
            methods:{
                test:function(){
                    this.flag=!this.flag;
                },
                addAge:function(){
                    this.age++;
                }
            }
        })
    </script>
</body>
</html>

v-if

  • 切换元素的显示状态
  • 本质是通过操作dom元素进行切换的，而操作dom元素比较浪费资源，所以一般都是使用v-show的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="测试" @click="addAge">
        <h1>{{age}}</h1>
        <h1 v-show="age>20">{{age}}</h1>
        <h1 v-if="age>20">{{age}}</h1>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                age: 20
            },
            methods:{
                addAge:function(){
                    this.age++;
                }
            }
        })
    </script>
</body>
</html>

v-bind

  • 绑定，将数据和vue中的绑定
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{imgUrl}}</h1>
    <img :src="imgUrl" alt="" :title="isTitle">
</div>
    
<script>
    var app = new Vue({
        el: "#app",
        data: {
            imgUrl: "/img/4-1Z126160112.jpg",
            isTitle: "测试"
        }
    })
</script>
</body>
</html>

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        
        <ul>
            <li v-for="item in address">{{item}}</li>
        </ul>
        <h1 v-for="item in foods">{{item.name}}</h1>
        <input type="button" value="add" @click="add">
        <input type="button" value="delete" @click="delete1">
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            data: {
                index:0,
                address:["北京","上海","广州","深圳"],
                foods:[
                    {name:"土豆炒马铃薯"},
                    {name:"西红柿炒番茄"}
                ]
            },
            methods:{
                add:function(){
                    this.foods.push({name:"西红柿炒鸡蛋"});
                },
                delete1:function(){
                    this.foods.shift();
                }
            }
        })
    </script>
</body>
</html>

v-on补充

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{message}}</h1>
        <input type="button" value="测试" @click="test1('哈哈哈1',666)">
        <input type="text" @keyup.enter="test">
    </div>
    
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"haha"
            },
            methods:{
            
                test:function(){
                    alert("弹出成功")
                },
                test1:function(p1,p2){
                    alert(p1);
                    console.log(p2);
                }
            }
        })
    </script>
</body>
</html>

v-model

双向绑定，数据和div中的同时绑定起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="test" @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h1>{{message}}</h1>
    </div>
    
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"阿鬼大大"
            },
            methods:{
                getM:function(){
                    alert(this.message)
                },
                setM:function(){
                    this.message="哈哈哈"
                }
            }
        })
    </script>
</body>
</html>

vue+axios

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="获取笑话" @click="fun1">
    <span>{{message}}</span>
</div> 

<script>
    var app = new Vue({
        el: "#app",
        data: {
            message:"笑话"
        },
        methods:{
            fun1:function(){
                var that = this;
                axios.get( "https://autumnfish.cn/api/joke").then(
                    function(rep){
                        console.log(rep.data);
                        that.message=rep.data;
                    }
                )

            }
        }
    })
</script>
</body>
</html>

music播放器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阿鬼大大的player</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="queryString" @keyup.enter="getMusic">
        <ul>
            <li v-for="list in musicList">
              <span>
                  {{list.name}}
                  {{list.id}}
                  <a type="button" @click="player(list.id)">点击播放</a>
                </span>  
            </li>
        </ul>
        <div>
            <audio autoplay="true" controls="controls" :src="musicUrl"></audio>
        </div>
    </div>
    <script>
         var app = new Vue({
        el: "#app",
        data: {
            queryString:"陈" ,
            musicList: [],
            musicUrl: ""
        },
        methods:{
            getMusic:function(){
                var that=this;
                axios.get("https://autumnfish.cn/search?keywords="+this. queryString).then((rep)=>{
                    console.log(rep.data.result);
                    that.musicList=rep.data.result.songs;
                })
            },
            player:function(musicId){
                var that = this;
                axios.get("https://autumnfish.cn/song/url?id="+musicId).then((rep)=>{
                    console.log(rep.data.data[0].url);
                    that.musicUrl=rep.data.data[0].url;
                })
            }
        }
        
    })
    </script>
   
</body>
</html>
阿鬼大大
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【前端框架开发 | Vue.js | 第一篇】Vue.js框架简介、安装及打包教程
等风来
08-31 2万+
正式开始学习前 确保你已学过前端三件套 HTML CSS JavaScriptVue.js是一种流行的JavaScript前端框架，用于构建交互式的、响应式的用户界面。它是一种轻量级、灵活和易于学习的框架，广泛应用于现代Web应用程序开发中。前端框架那么多，为什么Vue.js非学不可？Vue.js的简洁语法和易用性使得它成为构建现代Web应用程序的优秀选择，无论是小型项目还是大型复杂的应用都能发挥出色的效果。Vue.js使用双向绑定的数据模型，将数据和视图进行关联。
JavaWeb『Vue.js』快速入门
不会敲代码的z的博客
06-02 1515
这是基于javaweb学习的vue基础知识，能大概了解vue的基础用法......
前端小白如何快速上手Vue框架(上篇)
热门推荐
Logbook的博客
03-05 13万+
前言: 我之前没有接触过任何前端知识,连基本的HTML语法,css,js的基础知识都不懂,再刚接手vue的时候也是一个头两个大. 然后当然先查vue官方文档,官网会有如下提示: 然后如果你按照提示开始按部就班的看html,css,js然后再回来学习Vue的话,你可能已经被OUT了(况且周期过长,着实不推荐).直接着手一个项目是进步最快的方式,何况还有度娘和Google保驾护航. 推荐vue学习文...
Vue.js 基础
weixin_58227247的博客
02-21 2035
​ 在使用了 Vue 的页面中，Vue 会，从而页面的结构。 入手Vue ​ 1.想让Vue工作，首先就是创建一个Vue实例，并且要传入一个配置对象 ​ 2.打造 Vue的模板语法 插值语法 用于解析标签体内容 {{ xxx }} xxx 是js表达式,可以直接读取到 data 中的所有属性 ​ 指令语法 用于解析标签(包括:标签属性 标签体内容 绑定事件…) v-bind:href=‘xxx’ 或 简写为 :href=‘xxx’ ,其中 xxx 同样是js表达式,并且可以直接读取到
Vue.js介绍
qq_53841687的博客
07-25 1万+
任真学习，努力向上
vue.js简明教程
weixin_45022883的博客
06-19 266
vue.js是干嘛的？ vue.js就是一个上手简单，功能强大的框架，使网页的前端开发更加高效，就像本人对前端一窍不通的能快速的搭建自己的网页：） 快速搭建 vue的搭建官网提供了两个方法： 一种是快速搭建的CND引入<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>， 另一种是NPM安装，NPM是node.js的包管理系(node.js是服务器端的JavaScript运行环境） wget http
vue.js（一）
anran_1211的博客
07-27 219
vue 响应数据绑定（不兼容ie8），当数据发生改变时，会自动更新视图 利用 Object.definedProperty 中的setter / getter 代理数据，监控对数据的操作 MVVM ：  M ： model  数据模型      V：view  视图模板     VM：view-model 视图模型 案例： // v-model 实现数据双向绑定 {{ name
vue.global.js，Vue.js 框架的核心文件之一
08-11
`vue.global.js` 文件是 Vue.js 框架的核心文件之一。它包含了 Vue.js 全局对象的定义和一些全局方法和属性的实现。 该文件对整个 Vue.js 应用的运行起着重要的作用，它提供了全局范围的 Vue 构造函数和一些全局...
vue.js和vue.min.js
06-13
Vue.js和Vue.min.js是两种版本的同一款前端JavaScript框架——Vue.js的实现。Vue.js由尤雨溪（Evan You）开发，旨在为构建用户界面提供简洁、易用且可扩展的工具。这两个文件在功能上是相同的，但它们在实际应用中...
vue.js 下载，引入vue.js 本地开发
05-18
Vue.js 是一款流行的轻量级前端JavaScript框架，它以其易学易用、组件化和高性能的特点深受开发者喜爱。本文将详细介绍如何下载Vue.js并进行本地开发。 首先，我们需要下载Vue.js。Vue.js的官方源码可以从其官方...
vue.js项目实战,vue.js项目实战pdf下载,JavaScript
09-10
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，因其简单易学、高效灵活的特性，在Web开发领域迅速崛起。本资源聚焦于"Vue.js项目实战"，旨在帮助开发者通过实际操作深入理解Vue.js的核心概念和技术，从而...
vue.js 课件 ppt
11-03
Vue.js 是一款非常流行的前端JavaScript框架，由尤雨溪创建，以其简洁的API和高效的响应式数据绑定受到广大开发者喜爱。Vue.js 的设计目标是使开发过程更加简单、直观，尤其适合构建用户界面。本课件集合了Vue.js的...
vue.js基础还不会？——看这篇文章就够了
十九万里的博客
04-30 1万+
知识点： vue.jsj介绍 指令 修饰符 计算属性 侦听器 过滤器 生命周期 组件 路由 一、vue.js介绍 vue是一套用于构建用户界面的渐进式框架 vue的核心只关注视图层，不仅容易上手，还便于与第三方库或既有项目整合 二、指令 （一）、指令 本质就是自定义属性 VUE中指令都是v-开头 （二）、内置指令 1、v-cloak 防止页面加载时出现闪烁问题 2、v-text v-text指令用于将数据填充到标签中，作用与插值表达式，但是没有闪动问题 如果数据中有html标签会将html标签一并输出
Vue.js框架手把手教程
PIKapikaaaa的博客
05-22 3682
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。
Vue菜鸟教程
weiyifang11的博客
07-31 1万+
Vue框架快速入门 1.Vue的认识 1.1 什么是Vue？ Vue是一个开源的javascript框架，并且Vue支持mvc和mvvm两种模式。 Vue是一个构建数据驱动的 web 界面的渐进式框架。采用自底向上增量开发的设计。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，是又一个js库。 MVC：Model(模型),View(视图),Controller(...
vue.js基础01--基础用法及内部指令
muzidigbig的博客
07-25 4211
一、vue的概述及vue的入门小实例 vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。 如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作D... v-if和v-for为什么不建议同时使用
Vue.js快速入门+项目实战（源码）
王俊的博客
06-12 3万+
Vue.js电影网站项目github 链接（如果觉得有用记得start哦~）:项目源代码链接 目录 前言 安装 Vue.js 1.Vue.js主要特性 2.Vue.js实例 3.Vue.js路由 4.Vue.js模板 5.条件渲染 6.列表渲染 7.事件处理 ES6常用语法 使用Babel进行ES6的转化 WebPack 构建第一个Vue.js项目 Vue......
Elsaticsearch java基本操作
最新发布
qq_62383709的博客
07-13 307
索引 基本操作 package com.orchids.elasticsearch.web.controller; import cn.hutool.core.collection.CollUtil; import cn.hutool.json.JSONUtil; import com.orchids.elasticsearch.web.po.User; import io.swagger.annotations.Api; import io.swagger.annotations.ApiOperatio
学习vue语言 不错的文档
09-15
本文档详细介绍了Vue.js这一流行的前端JavaScript框架。Vue.js是一个用于构建用户界面的渐进式框架，它强调易用性、灵活性和可维护性，适合开发单页应用（SPA）和复杂Web应用。 Vue.js概述部分简述了Vue的核心理念...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值