JavaWeb_Vue

最新推荐文章于 2025-01-18 22:00:00 发布
最新推荐文章于 2025-01-18 22:00:00 发布
阅读量174 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanananhh/article/details/127517110
版权

1.v-bind:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        window.onload=function(){
            var vue = new Vue({
                "el":"#div0",
                data:{
                    msg:"hello!!!",
                    uname:"鸠摩智"
                }
            });
        }
    </script>
</head>
<body>
    <div id="div0">
        <span>{{msg}}</span>
        <!-- v-bind:value表示绑定value属性 , v-bind可以省略，也就是 :value -->
        <!--<input type="text" v-bind:value="uname"/>-->
        <input type="text" :value="uname"/>
    </div>
</body>
</html>

2.v-model:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        window.onload=function(){
            var vue = new Vue({
                "el":"#div0",
                data:{
                    msg:"hello!!!"
                }
            });
        }
    </script>
</head>
<body>
    <div id="div0">
        <span>{{msg}}</span><br/>
        <!--
            v-model指的是双向绑定，
            也就是说之前的v-bind是通过msg这个变量的值来控制input输入框
            现在 v-model 不仅msg来控制input输入框，反过来，input输入框的内容也会改变msg的值
         -->
        <!--<input type="text" v-model:value="msg"/>-->
        <!-- v-model:value 中 :value可以省略，直接写成v-model -->
        <!-- trim可以去除首尾空格 -->
        <input type="text" v-model.trim="msg"/>
    </div>
</body>
</html>

3.v-if=、v-else=、v-show=

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        window.onload=function(){
            var vue = new Vue({
                "el":"#div0",
                data:{
                    num:2
                }
            });
        }
    </script>
</head>
<body>
    <div id="div0">
        <input type="text" v-model="num"/>

        <!-- v-if和v-else之间不可以插入其他节点 -->
        <!--<div v-if="num%2==0" style="width:200px;height:200px;background-color: chartreuse;">&nbsp;</div>-->
        <!--<div v-else="num%2==0" style="width:200px;height:200px;background-color: coral">&nbsp;</div>-->


        <!-- v-show -->
        <!-- v-show是通过display属性来控制这个div是否显示 -->
        <div v-show="num%2==0" style="width:200px;height:200px;background-color:blueviolet;">&nbsp;</div>
    </div>
</body>
</html>

4.v-for=

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        window.onload=function(){
            var vue = new Vue({
                "el":"#div0",
                data:{
                    fruitList:[
                        {fname:"苹果",price:5,fcount:100,remark:"苹果很好吃"},
                        {fname:"菠萝",price:3,fcount:120,remark:"菠萝很好吃"},
                        {fname:"香蕉",price:4,fcount:50,remark:"香蕉很好吃"},
                        {fname:"西瓜",price:6,fcount:100,remark:"西瓜很好吃"}
                    ]
                }
            });
        }
    </script>
</head>
<body>
    <div id="div0">
        <table border="1" width="400" cellpadding="4" cellspacing="0">
            <tr>
                <th>名称</th>
                <th>单价</th>
                <th>库存</th>
                <th>备注</th>
            </tr>
            <!-- v-for表示迭代 -->
            <tr align="center" v-for="fruit in fruitList">
                <td>{{fruit.fname}}</td>
                <td>{{fruit.price}}</td>
                <td>{{fruit.fcount}}</td>
                <td>{{fruit.remark}}</td>
            </tr>
        </table>
    </div>
</body>
</html>

5.v-on:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        window.onload=function(){
            var vue = new Vue({
                "el":"#div0",
                data:{
                    msg:"hello world!"
                },
                methods:{
                    myReverse:function(){
                        this.msg = this.msg.split("").reverse().join("");
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="div0">
        <span>{{msg}}</span><br/>
        <!-- v-on:click 表示绑定点击事件 -->
        <!-- v-on可以省略，变成 @click -->
        <!--<input type="button" value="反转" v-on:click="myReverse"/>-->
        <input type="button" value="反转" @click="myReverse"/>
    </div>
</body>
</html>

6.侦听属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        window.onload=function(){
            var vue = new Vue({
                "el":"#div0",
                data:{
                    num1:1,
                    num2:2,
                    num3:0
                },
                watch:{
                    //侦听属性num1和num2
                    //当num1的值有改动时，那么需要调用后面定义的方法 , newValue指的是num1的新值
                    num1:function(newValue){
                        this.num3 = parseInt(newValue) + parseInt(this.num2);
                    },
                    num2:function(newValue){
                        this.num3 = parseInt(this.num1) + parseInt(newValue) ;
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="div0">
        <input type="text" v-model="num1" size="2"/>
        +
        <input type="text" v-model="num2" size="2"/>
        =
        <span>{{num3}}</span>
    </div>
</body>
</html>
嘎嘎_膈
关注
20220721_JavaWeb_利用Vue框架进行数据库查询添加操作
ClarkGable的博客
07-21 891
Vue框架案例
javaweb+vue的共享音乐网站javaweb_vue_music.zip
04-15
音乐商城是一个在线平台，用于销售音乐作品，包括数字音乐、CD、唱片、演唱会门票等。以下是音乐商城的一般分析： ...【引流】 编程语言和开发技术：如Java、$C++、Python、JavaScript、Ruby等。 数据库技术：如关系型...
Javaweb_Vue
m0_64837052的博客
07-21 62
【代码】黑马2023 Javaweb_Vue。
javaweb_vue 条件查询 （自用）
qq_42765493的博客
04-13 1608
为了探索适合自己的学习方法，之后的都要分开写，不要写成一坨，自己的懒着翻，虽然写的很详细就是了 重复函数封装 记得这种封装最好不要把值写死了，就是形参 我的代码需要把这串都改了 后台接口 就是根据上级菜单查询子数据 记得非空判断 上级编号（精确查询） 菜单名称（模糊查询） ...
javaweb—Vue
m0_70851493的博客
06-06 664
框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型，基于框架进行开发，更加快捷，更加高效。
JavaWeb - Vue介绍
qq_57620101的博客
08-19 794
Vue是一套前端框架，免除原生Javascript中的DOM操作，简化书写基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。官网: https://v2.cn.vuejs.org/插值表达式：形式：{{表达式}}内容：变量、三元运算符、函数调用、算术运算。
JavaWeb_vue 思维导图总结
weixin_43774841的博客
11-29 154
JavaWeb——Vue
m0_50460160的博客
09-05 1218
Vite项目的入口为src/main.js 文件，这是vue.js应用程序的启动文件，也是整个前端应用程序的入口文件。Vue是一款用于构建用户界面的JavaScript框架,基于标准的HTML、CSS 和JavaScript构建，并提供了一套声明式的、组件化的编程模型;用于存放组件相关的文件,组件是代码复用的一种方式，用于抽象出一个可复用的部件，方便在不同的场景中进行重复使用。App.vue是vue中的核心组件，所有的其他组件都要通过该组件进行导入，该组件通过路由可以控制页面的切换;
JavaWeb之Vue
2302_79981885的博客
11-18 504
这些都是DOM的操作原来模型和视图不能实现同步变化，但是Vue就可以了下一节讲Element。
Javaweb_Vue_Hbuilder_前后端分离跨域访问通信_setHeader()与addHeader()区别
LW_Hadoop的博客
03-12 1078
报错:Access to XMLHttpRequest at 'http://Servlet' from origin 'http://127.0.0.1:8020' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. CORS策略阻止：请求的资源上不存在“Access-Control Allow origin”头
JavaWeb笔记_javaweb_javaweb_
09-29
这些只是JavaWeb开发中的一些基本概念，实际应用中还会涉及更多的技术和工具，如WebSocket、RESTful API、Ajax、CDN、前端框架（如Angular、React、Vue.js）等。学习JavaWeb编程需要不断探索和实践，理论与实战相...
在JavaWeb_Vue_Pro1.9.0项目中实现一个具体功能
11-01
在JavaWeb和Vue.js结合的Pro1.9.0项目中，你可以实现一个用户登录功能作为具体示例。这个功能通常涉及前端和后端交互： 1. **前端Vue部分**： - 用户界面：创建HTML表单，包括输入框用于用户名和密码，以及登录...
在JavaWeb_Vue_Pro1.9.0项目中实现一个新的具体功能
11-01
在Java Web项目中集成Vue.js并创建新功能，通常涉及到前后端分离的开发流程。以下是步骤： 1. **设置环境**：首先，你需要在项目中引入Vue.js，这通常通过npm（Node Package Manager）安装，可以在项目根目录下运行...
vue 前端优化性能优化方法
lfl18326162160的博客
01-17 1068
</div></section>
vue v-if和key值的注意的地方
yusun1234的博客
01-17 514
通过为每个元素分配一个唯一的key，Vue能够在数据变化时准确地追踪到哪个元素发生了变化，从而更新相应的节点，而不是重新渲染整个列表。‌：如果不为列表项指定唯一的key，Vue会默认使用索引作为key，这在列表项顺序会发生变化的情况下可能会导致渲染错误。的比较和更新过程会利用这个唯一标识符来快速定位和更新相应的节点，而不是逐个比较所有节点，从而减少不必要的DOM操作，提高渲染效率。通过正确使用key属性，可以显著提高Vue应用的性能，并确保在动态更新和重新渲染时的正确性。只是简单的基于css切换。
vue中使用OpenLayer加载Geoserver的WMS
qq_43741689的博客
01-16 190
思路： 1.初始化vue 2.下载ol库`npm install ol` 3.创建map和source,layer,`注：本文数据是WMS(Web Map Service)的，需要layer是TileLayer，需要source是TileWMS,所以需要引入对应的库` 4.将layer添加到map
Vue.js 组件的生命周期钩子
轻口味的专栏
01-16 798
简单来说，组件的生命周期就是从组件被创建挂载到 DOM更新数据，再到销毁的全过程。Vue 会在不同的阶段触发相应的生命周期钩子。Vue 的生命周期钩子为我们提供了控制组件各个阶段的能力。从初始化数据到操作 DOM，再到销毁组件，我们可以根据需要选择合适的钩子。理解这些钩子的执行时机和作用，可以帮助我们编写出更高效、更优雅的代码。
vue | 插值表达式
最新发布
jingling555的博客
01-18 441
3. 框架：一套完整的项目解决方案，提升开发效率↑ (理解记忆规则)表达式：是可以被求值的代码，JS引擎会将其计算出一个结果。Vue 是一个用于 构建用户界面 的 渐进式 框架。② 支持的是表达式，而非语句 if ... for。1. 构建用户界面：基于 数据 动态 渲染 页面。插值表达式是一种 Vue 的模板语法。① 使用的数据要存在 （data）利用表达式进行插值，渲染到页面中。2. 渐进式：循序渐进的学习。③ 不能在标签属性里面使用。
vant组件库的按需导入导出
猿码互联
01-16 761
函数可以将模块的状态映射到组件的计算属性中，而。文件，用于定义 Vuex 的模块、状态和操作。函数可以将模块的操作映射到组件的方法中。在主应用程序的入口文件中，引入。文件夹，在该文件夹下创建。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值