百度360必应搜狗淘宝本站头条
vue dispatchspring gatewayorder by ascidea eval resetupdate canceled
当前位置：网站首页 > 技术分类 > 正文

Java后端应该掌握的前端知识Vue入门(中)

ztj100 2024-12-31 15:58 11 浏览 0 评论

Vue的初体验

1、vue的基础语法

1.1、值得渲染

1.1.1、文本插值

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<!--引用参数-->
<div id="app">{{message}}</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<script>
    // 定义一个vue实例对象
    var vue = new Vue({
        // 绑定元素
        el:'#app',
        // 定义参数并且赋值
        data:{
            message:"hello vue"
        }
    });
</script>
</body>
</html>

1.1.2、指令渲染

<!doctype html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<!--v-bind绑定事件-->
<div id="app">
    <span v-bind:title="message">鼠标悬停</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<script>
    // 定义一个vue实例对象
    var vue = new Vue({
        // 绑定元素
        el:'#app',
        // 定义参数并且赋值
        data:{
            message:new Date().toLocaleString()
        }
    });
</script>
</body>
</html>

v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。

1.2、条件判断

1.2.1、v-if

<!doctype html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<!--v-bind绑定事件-->
<div id="app">
    <span v-if="flag">你能看到我</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<script>
    // 定义一个vue实例对象
    var vue = new Vue({
        // 绑定元素
        el:'#app',
        // 定义参数并且赋值
        data:{
            flag:true
        }
    });
</script>
</body>

1.2.2、v-else

<!doctype html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<!--v-bind绑定事件-->
<div id="app">
    性别
    <span v-if="flag">男</span>
    <span v-else="flag">女</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<script>
    // 定义一个vue实例对象
    var vue = new Vue({
        // 绑定元素
        el:'#app',
        // 定义参数并且赋值
        data:{
            flag:true
        }
    });
</script>
</body>
</html>

1.2.3、v-else-if

<!doctype html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<!--v-bind绑定事件-->
<div id="app">
    类型
    <span v-if="type==='A'">A</span>
    <span v-else-if="type==='B'">B</span>
    <span v-else="type==='C'">C</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<script>
    // 定义一个vue实例对象
    var vue = new Vue({
        // 绑定元素
        el:'#app',
        // 定义参数并且赋值
        data:{
            type:'A'
        }
    });
</script>
</body>
</html>

1.3、循环

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名

<!doctype html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<!--v-bind绑定事件-->
<div id="app">
    开发语言
    <ul>
        <!--不需要获取数组下标<li v-for="language, in languages">-->
        <li v-for="language in languages">
            {{language.text}}
        </li>
    </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<script>
    // 定义一个vue实例对象
    var vue = new Vue({
        // 绑定元素
        el:'#app',
        // 定义参数并且赋值
        data:{
            languages:[
                { text: '学习 JavaScript' },
                { text: '学习 Vue' },
                { text: '整个牛项目' }
            ]
        }
    });
</script>
</body>
</html>

测试：在F12控制台输入vue.languages.push({message：'xshell'})，尝试追加一条数据，你会发现浏览器中显示的内容会增加一条数据。注意这里是体现vue的响应式而不是双向绑定

1.4、事件绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <div id="app">
        {{message}}
        <!--v-on绑定事件，调用方法-->
        <button v-on:click="reverseMessage">反转消息</button>
    </div>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var test = new Vue({
        el:"#app",
        data:{
            message:"hello"
        },
        // 自定义方法
        methods:{
            reverseMessage:function () {
                this.message=this.message.split('').reverse().toString();
            }
        }
    })
</script>
</body>
</html>

2、双向绑定

2.1、什么叫双向绑定

数据双向绑定， 即当数据发生变化的时候， 视图也就发生变化， 当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex那么数据流也是单向的，这时就会和双向数据绑定有冲突。

2.2、为什么要使用双向绑定

在Vue.js中，如果使用vuex， 实际上数据还是单向的， 之所以说是数据双向绑定，这是用的UI控件来说， 对于我们处理表单， Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪；局部性数据流使用双向，简单易操作。

2.3、在表单中使用双向数据绑定

你可以用 v-model 指令在表单及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

2.3.1、文本框input

<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<div id="app">
    姓名：<input v-model="message"/>
    输入的姓名是:{{message}}
</div>

<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            message:""
        }
    })
</script>
</body>
</html>

2.3.2、多行文本textarea

<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<div id="app">
    <textarea v-model="message"></textarea>
    输入的值：{{message}}
</div>

<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            message:""
        }
    })
</script>
</body>
</html>

2.3.3、复选框checkbox

<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<div id="app">
    <input type="checkbox" v-model="message">
    是否选择:{{message}}
</div>

<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            message:false
        }
    })
</script>
</body>
</html>

2.3.4、多个复选框

<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<div id="app">
    喜欢的语言：
    java<input type="checkbox" v-model="message" id="jack" value="java">
    linux<input type="checkbox" v-model="message" id="john" value="linux">
    xshell<input type="checkbox" v-model="message" id="mike" value="xshell">
    选择的是:{{message}}
</div>

<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            message:[]
        }
    })
</script>
</body>
</html>

2.3.5、单选框

<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<div id="app">
    性别：
    男<input type="radio" value="男" id="man" name="sex" v-model="message" checked>
    女<input type="radio" value="女" id="woman" name="sex" v-model="message">
    选择的是{{message}}
</div>

<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            message:""
        }
    })
</script>
</body>
</html>

2.3.6、下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <select v-model="selected">
        <!-- disabled 不能被选中 -->
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    选择的是：{{selected}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            selected:""
        }
    })
</script>
</body>
</html>

注意点：如果 v-model 表达式的初始值未能匹配任何选项，元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。

2.4、区分v-bind和v-model

  • v-bind属于单向绑定，v-model是双向绑定。
  • v-bind主要是在给标签的属性赋值，而v-model是给参数赋值，同时又再取参数的值。
  • v-bind可以动态地绑定一个或多个特性，或一个组件 prop 到表达式，所以组件中可以用v-bind来进行传参。

3、组件

3.1、什么叫组件

组件是可复用的 Vue 实例，通俗地讲就是一组可以重复使用的模板，类似于java中的方法甚至于是类，因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。

通常一个应用会以一棵嵌套的组件树的形式来组织，如下所述：

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

3.2、如何使用组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <Comp></Comp>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    // 全局注册  Comp自定义组件别名
    Vue.component("Comp",{
        // 展示模板
        template:"<h1>hello</h1>"
    })
	// 再实例化
    var vue = new Vue({
        el:"#app"
    })
</script>
</body>
</html>

方法描述：

  • Vue.component()：全局注册一个组件
  • Comp：自定义组件的名字
  • template：组件的模板内容

注意点：

  • 如果使用自定义模板，那么vue实例的data元素要为一个方法，如果data是作为普通的对象在多组件中引入，每个组件都能操作data元素的值，类似于java中static变量，非常的不安全，而定义为方法每个实例可以维护一份被返回对象的独立的拷贝。

3.3、props组件参数传递

在日常开发中，组件大多数情况下要进行参数的传递，所以推出组件的属性props，这个组件可以在vue实例和组件中进行参数的传递

注意：传递的参数名不要用驼峰命名，或者是大写的形式，因为HTML代码中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符这个时候和组件中的名字不匹配就会取不到值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--v-bind绑定值  v-bind:组件中的参数名=vue实例中的参数名-->
    <comp v-bind:componentparam="vueparam"></comp>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>

    // comp组件名可以用于引用组件
    Vue.component("comp",{
        props: {
            // 自定义接收参数名
            componentparam:''
        },
        template: '<h1>hello {{componentparam}}</h1>'
    })

    var vue = new Vue({
        el:"#app",
        data:{
            vueparam:"测试"
        }
    })

</script>
</body>
</html>

相关推荐

从IDEA开始，迈进GO语言之门（idea got）

前言笔者在学习GO语言编程的时候，GO语言在国内还没有像JAVA/Php/Python那样普及，绕了不少的弯路，要开始入门学习一门编程语言，最好就先从选择一个好的编程语言的开发环境开始，有了这个开发环...

基于SpringBoot+MyBatis的私人影院java网上购票jsp源代码Mysql

本项目为前几天收费帮学妹做的一个项目，JavaEEJSP项目，在工作环境中基本使用不到，但是很多学校把这个当作编程入门的项目来做，故分享出本项目供初学者参考。一、项目介绍基于SpringBoot...

基于springboot的个人服装管理系统java网上商城jsp源代码mysql

本项目为前几天收费帮学妹做的一个项目，JavaEEJSP项目，在工作环境中基本使用不到，但是很多学校把这个当作编程入门的项目来做，故分享出本项目供初学者参考。一、项目介绍基于springboot...

基于springboot的美食网站Java食品销售jsp源代码Mysql

本项目为前几天收费帮学妹做的一个项目，JavaEEJSP项目，在工作环境中基本使用不到，但是很多学校把这个当作编程入门的项目来做，故分享出本项目供初学者参考。一、项目介绍基于springboot...

贸易管理进销存springboot云管货管账分析java jsp源代码mysql

本项目为前几天收费帮学妹做的一个项目，JavaEEJSP项目，在工作环境中基本使用不到，但是很多学校把这个当作编程入门的项目来做，故分享出本项目供初学者参考。一、项目描述贸易管理进销存spring...

SpringBoot+VUE员工信息管理系统Java人员管理jsp源代码Mysql

本项目为前几天收费帮学妹做的一个项目，JavaEEJSP项目，在工作环境中基本使用不到，但是很多学校把这个当作编程入门的项目来做，故分享出本项目供初学者参考。一、项目介绍SpringBoot+V...

目前见过最牛的一个SpringBoot商城项目(附源码)还有人没用过吗

帮粉丝找了一个基于SpringBoot的天猫商城项目，快速部署运行，所用技术：MySQL，Druid，Log4j2，Maven，Echarts，Bootstrap...免费给大家分享出来前台演示...

SpringBoot+Mysql实现的手机商城附带源码演示导入视频

今天为大家带来的是基于SpringBoot+JPA+Thymeleaf框架的手机商城管理系统，商城系统分为前台和后台、前台用的是Bootstrap框架后台用的是SpringBoot+JPA都是现在主...

全网首发!马士兵内部共享—1658页《Java面试突击核心讲》

又是一年一度的“金九银十”秋招大热门，为助力广大程序员朋友“面试造火箭”，小编今天给大家分享的便是这份马士兵内部的面试神技——1658页《Java面试突击核心讲》！...

SpringBoot数据库操作的应用（springboot与数据库交互）

1.JDBC+HikariDataSource...

SpringBoot 整合 Flink 实时同步 MySQL

1、需求在Flink发布SpringBoot打包的jar包能够实时同步MySQL表，做到原表进行新增、修改、删除的时候目标表都能对应同步。...

SpringBoot + Mybatis + Shiro + mysql + redis智能平台源码分享

后端技术栈基于SpringBoot+Mybatis+Shiro+mysql+redis构建的智慧云智能教育平台基于数据驱动视图的理念封装element-ui，即使没有vue的使...

Springboot+Mysql舞蹈课程在线预约系统源码附带视频运行教程

今天发布的是由【猿来入此】的优秀学员独立做的一个基于springboot脚手架的Springboot+Mysql舞蹈课程在线预约系统，系统项目源代码在【猿来入此】获取！https://www.yuan...

SpringBoot+Mysql在线众筹系统源码+讲解视频+开发文档(参考论文

今天发布的是由【猿来入此】的优秀学员独立做的一个基于springboot脚手架的在线众筹管理系统，主要实现了普通用户在线参与众筹基本操作流程的全部功能，系统分普通用户、超级管理员等角色，除基础脚手架外...

Docker一键部署 SpringBoot 应用的方法，贼快贼好用

这两天发现个Gradle插件，支持一键打包、推送Docker镜像。今天我们来讲讲这个插件，希望对大家有所帮助！GradleDockerPlugin简介...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表
Copyright Your WebSite.Some Rights Reserved.