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

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

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

相关推荐

人生苦短，我要在VSCode里面用Python

轻沉发自浅度寺量子位出品|公众号QbitAI在程序员圈子里，VisualStudioCode（以下简称VSCode）可以说是目前最火的代码编辑器之一了。它是微软出品的一款可扩展的轻量...

亲测可用:Pycharm2019.3专业版永久激活教程

概述随着2020年的到来，又有一批Pycharm的激活码到期了，各位同仁估计也是在到处搜索激活方案，在这里，笔者为大家收录了一个永久激活的方案，亲测可用，欢迎下载尝试：免责声明本项目只做个人学习研究之...

Python新手入门很简单（python教程入门）

我之前学习python走过很多的歧途，自学永远都是瞎猫碰死耗子一样，毫无头绪。后来心里一直都有一个做头条知识分享的梦，希望自己能够帮助曾经类似自己的人，于是我来了，每天更新5篇Python文章，喜欢的...

Pycharm的设置和基本使用（pycharm运行设置）

这篇文章，主要是针对刚开始学习python语言，不怎么会使用pycharm的童鞋们；我来带领大家详细了解下pycharm页面及常用的一些功能，让大家能通过此篇文章能快速的开始编写python代码。一...

依旧是25年最拔尖的PyTorch实用教程!堪比付费级内容!

我真的想知道作者到底咋把PyTorch教程整得这么牛的啊？明明在内容上已经足以成为付费教材了，但作者偏要免费开源给大家学习！...

手把手教你 在Pytorch框架上部署和测试关键点人脸检测项目DBFace

这期教向大家介绍仅仅1.3M的轻量级高精度的关键点人脸检测模型DBFace，并手把手教你如何在自己的电脑端进行部署和测试运行，运行时bug解决。01.前言前段时间DBFace人脸检测库横空出世，...

进入Python的世界02外篇-Pycharm配置Pyqt6

为什么这样配置，要开发带UI的python也只能这样了，安装过程如下：一安装工具打开终端：pipinstallPyQt6PyQt6-tools二打开设置并汉化点击plugin，安装汉化插件，...

vs code如何配置使用Anaconda（vscode调用anaconda库）

上一篇文章中（Anaconda使用完全指南），我们能介绍了Anaconda的安装和使用，以及如何在pycharm中配置Anaconda。本篇，将继续介绍在vscode中配置conda...

pycharm中conda解释器无法配置（pycharm配置anaconda解释器）

之前用的好好的pycharm正常配置解释器突然不能用了？可以显示有这个环境然后确认后可以conda正在配置解释器，但是进度条结束后还是不成功！！试过了pycharm重启，pycharm重装，anaco...

Volta:跨平台开发者的福音，统一前端js工具链从未如此简单!

我们都知道现在已经进入了Rust时代，不仅很多终端常用的工具都被rust重写了，而且现在很多前端工具也开始被Rust接手了，这不，现在就出现了一款JS工具管理工具，有了它，你可以管理多版本的js工具，...

开发者的福音，ElectronEgg: 新一代桌面应用开发框架

今天给大家介绍一个开源项目electron-egg。如果你是一个JS的前端开发人员，以前面对这项任务桌面应用开发在时，可能会感到无从下手，甚至觉得这是一项困难的挑战。ElectronEgg的出现，它能...

超强经得起考验的低代码开发平台Frappe

#挑战30天在头条写日记#开始进行管理软件的开发来讲，如果从头做起不是不可以，但选择一款免费的且经得起时间考验的低代码开发平台是非常有必要的，将大幅提升代码的质量、加快开发的效率、以及提高程序的扩展性...

一文带你搞懂Vue3 底层源码（vue3核心源码解析）

作者：妹红大大转发链接：https://mp.weixin.qq.com/s/D_PRIMAD6i225Pn-a_lzPA前言vue3出来有一段时间了。今天正式开始记录一下梗vue3.0.0-be...

Windows 11 + WSL2 打造轻量级 Linux 本地开发环境实战教程

一、前言...

基于小程序 DSL(微信、支付宝)的，可扩展的多端研发框架

Mor(发音为/mr/，类似more)，是饿了么开发的一款基于小程序DSL的，可扩展的多端研发框架，使用小程序原生DSL构建，使用者只需书写一套（微信或支付宝）小程序，就可以通过Mor...

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

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