Javaweb第四章---Vue与指令(入门必看)

简介: Javaweb第四章---Vue与指令(入门必看)

一.Vue是什么?

💖Vue的概念

Vue是一套前端框架,可以免除JavaScript的DOM操作,使代码更加简洁

Vue的实现是基于MVVM思想,实现数据的双向绑定


框架是一个半成品软件,是一套可重用的、通用的、软件基础代码模型

Vue文件下载及其MVVM思想的介绍:http://t.csdn.cn/IGTO7

💖 Vue代码创建

使用前需要映入Vue.js文件:

<script  src="  Vue.js文件路径 " ></script>

Vue语法格式:new  Vue({

                              el:" #id名 ",

//data定义数据模型     data:{

                                      数据模型

                                      }              

                       })


注:在JS区域中创建,并且el的定义相当于CSS的id选择器

使用格式:

<div  id=" id名 ">  代码   {{数据模型}}     </div>

<html lang="en">
<head> 
    <title>Vue复习</title>
    <script src="vue.js"> </script>    //引入vue.js文件
</head>
<body>
    <div id="app">        //v-model下述有讲解
        <input type="text"  v-model="message">
        {{message}}    //显示message的值
    </div>
</body>
<script>
        //创建Vue
    new Vue({
        el:"#app",
        data:{
           message:"Hello world"
        }
    })
</script>

而如代码中,通过v-model指令,text文本框和数据模型data,完成了双向绑定,文本框的值和 message保持一致


二.指令

       由上面,我们可以发现一个新奇的东西,v-model,这便是指令。

指令:HTML标签上带有v-前缀的特殊属性,不同指令不同含义。

常用指令:

指令         作用
v-bind 为HTML标签绑定属性值,如设置 href,css样式等

v-model

在表单元素上创建双向数据绑定
v-on 为HTML标签绑定事件
v-if 条件性的渲染某元素,判定为true时渲染,否则不渲染
v-else-if
v-else
v-show 根据条件展示某元素,区别在于切换的是display属性的值
v-for 列表渲染,遍历容器的元素或者对象的属性

v-bind

       为标签绑定属性值,可是有人会问,我们不需要这个也可以绑定啊,可是这是动态绑定诶,

使用时,可以直接省略v-bind

例如:以上代码,当游戏链接出错时,未使用指令,需要一个一个去修改;使用了指令,则可以直接在data数据模型一键修改

v-on

       为HTML标签绑定事件,在Vue当中创建methods方法。

<head> 
    <title>Vue复习</title>
    <script src="vue.js"> </script>
</head>
<body>
    <div id="app">           
        <input type="button" value="按钮"  v-on:click="chage()">
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
           message:"Hello world",
           url:"http://t.csdn.cn/w5tHw"
        },
        methods: {
            chage:function(){
              alert("执行方法");
          }
        }
    })
</script>

注:事件不再是onclick,而是click,去掉了on。


v-if、v-else-if、v-else

       这三个配套使用,用法与 Java中的if、else if、else 一致,一般用于<span>标签中,是进行条件判断。当成立时,则会显露出<span> 文本 </span>中的文本内容。

注:如果不成立,浏览器检查中的元素是不存在该行代码的。

<head> 
    <title>Vue复习</title>
    <script src="vue.js"> </script>
</head>
<body>
    <div id="app"> 
        <span v-if="age<18">未成年</span>
        <span v-else-if="age>=18&&age<=40">青年</span>
        <span v-else>中年</span>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            age:18;
        }
    })
</script>


v-show

       作用与v-if等指令一样,但是会显示出 不符合条件的代码行


v-for

       循环,遍历,当数据模型data里含有数组时,可以使用

语法格式:<div v-for=" 变量名  in   数组名">{{ 变量名 }}</div>

获取索引:<div v-for=" (变量名,下标名)  in   数组名"> {{下标值+1}}:{{ 变量名 }} </div>

三.Vue生命周期

生命周期:指一个对象从创建到销毁的整个过程。

Vue生命周期有8个阶段:每触发一个阶段便会自动执行一个生命周期的方法,也称钩子方法。

状态 阶段周期
beforeCreate 创建前
created 创建后
beforeMount 挂载前
mounted 挂载完成
beforeUpdate 更新前
update 更新后
beforeDestory 销毁前
destory 销毁后

Vue生命周期完整过程:

代码示例:

<script>
     new  Vue({
        e1:"#app",
        data:{
            //代码
        },
    mounted(){
        //挂载完成时,执行的代码
        }
    updated(){
        //更新后,执行的代码
        }
    .....
    })
</script>

注:Java程序员只要掌握mounted()方法.


结:Vue主要依赖各种指令,生命周期每一个阶段都有其对应的执行方法。


                                                                               ----------懒惰的tq02

目录
相关文章
|
20天前
|
JavaScript NoSQL Java
接替此文【下篇-服务端+后台管理】优雅草蜻蜓z系统JAVA版暗影版为例-【蜻蜓z系列通用】-2025年全新项目整合搭建方式-这是独立吃透代码以后首次改变-独立PC版本vue版搭建教程-优雅草卓伊凡
接替此文【下篇-服务端+后台管理】优雅草蜻蜓z系统JAVA版暗影版为例-【蜻蜓z系列通用】-2025年全新项目整合搭建方式-这是独立吃透代码以后首次改变-独立PC版本vue版搭建教程-优雅草卓伊凡
169 96
接替此文【下篇-服务端+后台管理】优雅草蜻蜓z系统JAVA版暗影版为例-【蜻蜓z系列通用】-2025年全新项目整合搭建方式-这是独立吃透代码以后首次改变-独立PC版本vue版搭建教程-优雅草卓伊凡
|
5天前
|
存储 监控 Java
【Java并发】【线程池】带你从0-1入门线程池
欢迎来到我的技术博客!我是一名热爱编程的开发者,梦想是编写高端CRUD应用。2025年我正在沉淀中,博客更新速度加快,期待与你一起成长。 线程池是一种复用线程资源的机制,通过预先创建一定数量的线程并管理其生命周期,避免频繁创建/销毁线程带来的性能开销。它解决了线程创建成本高、资源耗尽风险、响应速度慢和任务执行缺乏管理等问题。
109 60
【Java并发】【线程池】带你从0-1入门线程池
|
16天前
|
JavaScript 安全 Java
智慧产科一体化管理平台源码,基于Java,Vue,ElementUI技术开发,二开快捷
智慧产科一体化管理平台覆盖从备孕到产后42天的全流程管理,构建科室协同、医患沟通及智能设备互联平台。通过移动端扫码建卡、自助报道、智能采集数据等手段优化就诊流程,提升孕妇就诊体验,并实现高危孕产妇五色管理和孕妇学校三位一体化管理,全面提升妇幼健康宣教质量。
45 12
|
21天前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
|
25天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
83 12
|
21天前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
21天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
|
2月前
|
JavaScript Java 测试技术
基于Java+SpringBoot+Vue实现的车辆充电桩系统设计与实现(系统源码+文档+部署讲解等)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
67 6
|
2月前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
129 8
|
2月前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
86 1

热门文章

最新文章