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

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

ztj100 2024-12-31 15:58 28 浏览 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>

相关推荐

sharding-jdbc实现`分库分表`与`读写分离`

一、前言本文将基于以下环境整合...

三分钟了解mysql中主键、外键、非空、唯一、默认约束是什么

在数据库中，数据表是数据库中最重要、最基本的操作对象，是数据存储的基本单位。数据表被定义为列的集合，数据在表中是按照行和列的格式来存储的。每一行代表一条唯一的记录，每一列代表记录中的一个域。...

MySQL8行级锁_mysql如何加行级锁

MySQL8行级锁版本：8.0.34基本概念...

mysql使用小技巧_mysql使用入门

1、MySQL中有许多很实用的函数，好好利用它们可以省去很多时间:group_concat()将取到的值用逗号连接，可以这么用:selectgroup_concat(distinctid)fr...

MySQL/MariaDB中如何支持全部的Unicode?

永远不要在MySQL中使用utf8，并且始终使用utf8mb4。utf8mb4介绍MySQL/MariaDB中，utf8字符集并不是对Unicode的真正实现，即不是真正的UTF-8编码，因...

聊聊 MySQL Server 可执行注释，你懂了吗?

前言MySQLServer当前支持如下3种注释风格：...

MySQL系列-源码编译安装(v5.7.34)

一、系统环境要求...

MySQL的锁就锁住我啦!与腾讯大佬的技术交谈，是我小看它了

对酒当歌，人生几何！朝朝暮暮，唯有己脱。苦苦寻觅找工作之间，殊不知今日之事乃我心之痛，难道是我不配拥有工作嘛。自面试后他所谓的等待都过去一段时日，可惜在下京东上的小金库都要见低啦。每每想到不由心中一...

MySQL字符问题_mysql中字符串的位置

中文写入乱码问题：我输入的中文编码是urf8的，建的库是urf8的，但是插入mysql总是乱码，一堆"???????????????????????"我用的是ibatis，终于找到原因了，我是这么解决...

深圳尚学堂:mysql基本sql语句大全(三)

数据开发-经典1.按姓氏笔画排序:Select*FromTableNameOrderByCustomerNameCollateChinese_PRC_Stroke_ci_as//从少...

MySQL进行行级锁的?一会next-key锁，一会间隙锁，一会记录锁?

大家好，是不是很多人都对MySQL加行级锁的规则搞的迷迷糊糊，一会是next-key锁，一会是间隙锁，一会又是记录锁。坦白说，确实还挺复杂的，但是好在我找点了点规律，也知道如何如何用命令分析加...

一文讲清怎么利用Python Django实现Excel数据表的导入导出功能

摘要：Python作为一门简单易学且功能强大的编程语言，广受程序员、数据分析师和AI工程师的青睐。本文系统讲解了如何使用Python的Django框架结合openpyxl库实现Excel...

用DataX实现两个MySQL实例间的数据同步

DataXDataX使用Java实现。如果可以实现数据库实例之间准实时的...

MySQL数据库知识_mysql数据库基础知识

MySQL是一种关系型数据库管理系统；那废话不多说，直接上自己以前学习整理文档：查看数据库命令:(1).查看存储过程状态:showprocedurestatus;(2).显示系统变量:show...

如何为MySQL中的JSON字段设置索引

背景MySQL在2015年中发布的5.7.8版本中首次引入了JSON数据类型。自此，它成了一种逃离严格列定义的方式，可以存储各种形状和大小的JSON文档，例如审计日志、配置信息、第三方数据包、用户自定...

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

一周热门
最近发表
标签列表
赣ICP备2023011147号-29