day05-Vue02

liyuelian 2023-03-28 原文

Vue02

7.修饰符

7.1基本说明

修饰符（Modifiers）是以.指明的后缀，指出某个指令以特殊方式绑定

官方文档：修饰符

Vue中的修饰符有：

事件修饰符
按键修饰符
系统修饰符

事件修饰符

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

7.2事件修饰符-应用实例

需求：演示 v-on:submit.prevent 的使用，如果没有输入名字，当点击注册按钮时，控制台输出”请输入名字“，否则输出“提交表单”。

为什么在开发中，有时需要让某个指令以特殊方式绑定，比如表单提交？

有时我们不希望将这个表单进行整体提交，而是Ajax的方式进行提交

因为表单整体提交会导致重载页面，而Ajax方式可以有选择性地提交数据，并局部刷新

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>修饰符的使用</title>
</head>
<body>
<div id="app">
    <!--
        1.修饰符用于指出一个指令应该以特殊方式绑定
        2.v-on:submit.prevent中的.prevent 修饰符表示阻止表单提交的默认行为
        3."onMySubmit()" -执行程序员指定的自定义方法
    -->
    <form action="http://www.baidu.com" v-on:submit.prevent="onMySubmit">
        <!--这里因为使用的是双向渲染，当发现data数据池中的monster对象没有name属性时，会动态地帮你生成name-->
        名字：<input type="text" v-model="monster.name"/><br/><br/>
        <button type="submit">注册</button>
    </form>
    <p>这里是服务器回送的数据=>{{count}}</p>
</div>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {//数据池
            monster: {//monster数据（对象）的属性，可以动态生成
            },
            count: 0
        },
        methods: {
            onMySubmit() {
                //console.log("自定义的表单提交处理...");
                if (this.monster.name) {//如果name为undefined或""或null,都为 false
                    console.log("提交表单 name = ", this.monster.name);
                    //这里就可以根据业务发出ajax请求到后端
                    //得到数据后，再进行数据更新
                    this.count = 666;//假设为服务器返回的处理
                } else {
                    console.log("请输入名字...");
                }
            }
        }
    });
</script>
</body>
</html>

7.3拓展-其他修饰符

按键修饰符按钮修饰符 — Vue.js (vuejs.org)

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>修饰符的使用</title>
</head>
<body>
<div id="app">
    <h1>修饰符拓展案例</h1>
    <!--按x键触发-->
    <input type="text" v-on:keyup.x="enterX"/>
</div>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        methods: {
            enterX() {
                alert("你在输入框中输入了x键");
            }
        }
    });
</script>
</body>
</html>

此外还有系统修饰符，详细请看vue文档：系统修饰符 — Vue.js (vuejs.org)

8.条件渲染/控制 v-if & v-show

8.1基本说明

Vue提供了 v-if 和 v-show 条件指令完成条件渲染/控制

官方文档：条件渲染 — Vue.js (vuejs.org)

v-if 介绍

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

<!--v-if指令会在数据池中找到awesome，如果该数据值对应ture，则渲染下面这条内容，否则为false，不渲染
（如果找不到该数据，就是undefined，也为false）-->
<h1 v-if="awesome">Vue is awesome!</h1>

也可以用 v-else 添加一个“else 块”：

<h1 v-if="awesome">Vue is awesome!</h1>
<!--如果上面if块的awesome返回false，就渲染else块内容-->
<h1 v-else>Oh no ?</h1>

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-show 介绍

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

<!--v-show 指令也会在数据池中找到数据ok，如果该数据值对应ture，则渲染下面这条内容。否则为false，不渲染（如果找不到该数据，就是undefined，也为false）-->
<h1 v-show="ok">Hello!</h1>

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

在JavaScript中，0、null、undefined、空串""都被认为是false，其他都被认为是true

8.2应用实例

需求：演示条件渲染使用（使用 v-if 和 v-show 实现）

使用 v-if 实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染 v-if</title>
</head>
<body>
<div id="app">
    <!--
    v-model将表单元素的checked值绑定了sel，
    当改变checked值时，sel也会随之改变，从而改变数据池，
    然后v-if v-else根据数据池的数据进行选择渲染

    checked值->sel->数据池的sel->v-if/v-else
    -->
    <input type="checkbox" v-model="sel">是否同意条款[v-if实现]
    <!--
		v-if/v-else 会根据返回的值，来决定是否动态创建对应的子组件 <h1>
	-->
    <h1 v-if="sel">你同意条款</h1>
    <h1 v-else>你不同意条款</h1>
</div>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {//data数据池
            sel: false
        }
    });
</script>
</body>
</html>

点击checkbox前后的改变：

使用 v-show 实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染 v-show</title>
</head>
<body>
<div id="app">
    <input type="checkbox" v-model="sel">是否同意条款[v-show实现]
    <h1 v-show="sel">你同意条款</h1>
    <!--取反-->
    <h1 v-show="!sel">你不同意条款</h1>
</div>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {//data数据池
            sel: false
        }
    });
</script>
</body>
</html>

8.3v-if VS v-show

v-if 会确保在切换的过程中，条件块内的事件监听器和子组件动态地被销毁和重建
v-show 机制相对简单，不管初始条件是什么，元素总是会全部被渲染，并且只是对CSS进行切换
使用建议：如果要频繁地切换，建议使用 v-show；如果运行时条件很少改变，使用v-if 较好

如下：v-if会对子组件进行动态创建和销毁，对性能有一定影响，因此如果要频繁的切换，建议使用v-show

v-show只是对CSS进行切换：

8.4练习

如下，当用户输入成绩时，可以输出对应的级别

90分以上，显示优秀
70分以上，显示良好
60分以上，显示及格
低于60，显示不及格
如果用户的成绩大于100，就修正成100，如果用户输入的成绩小于0，就修正为0

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-if练习</title>
</head>
<body>
<div id="app">
    <h1>演示条件判断</h1>
    请输入成绩（0-100）：
    <!--
    绑定事件，当输入框失去焦点后调用check方法
    -->
    <input type="text" v-model="score" v-on:blur="check"><br>
    <p>你当前的成绩是：{{score}}</p>
    <p v-if="score >= 90">级别：优秀</p>
    <p v-else-if="score >= 70">级别：良好</p>
    <p v-else-if="score >= 60">级别：及格</p>
    <p v-else="score < 60">级别：不及格</p>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            score: 0
        },
        methods: {
            check() {
                if (this.score < 0) {
                    this.score = 0;
                } else if (this.score > 100) {
                    this.score = 100;
                }
            }
        }
    })
</script>
</body>
</html>

9.列表渲染 v-for

9.1基本说明

Vue提供了 v-for 列表循环指令

官方文档：https://v2.cn.vuejs.org/v2/guide/list.html

9.1.1对数组进行遍历

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

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

结果：

9.1.2遍历对象的property

可以用 v-for 来遍历一个对象的 property。

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

结果：

How to do lists in Vue
Jane Doe
2016-04-10

你也可以提供第二个的参数为 property 名称 (也就是键名)：

<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>

结果：

title: How to do lists in Vue

author: Jane Doe

publishedAt: 2016-04-10

还可以用第三个参数作为索引：

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

结果：

0.title: How to do lists in Vue

1.author: Jane Doe

2.publishedAt: 2016-04-10

9.2应用实例

演示列表渲染使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染 v-for</title>
</head>
<body>
<div id="app">
    <h1>简单的列表渲染</h1>
    <ul>
        <!--基本语法:
        <li v-for="变量 in 数字">{{变量}}</li>-->
        <li v-for="i in 3">
            {{i}}
        </li>
    </ul>
    <h1>简单的列表渲染-带索引</h1>
    <ul>
        <!--基本语法:
       <li v-for="(变量,索引) in 数组/数字/对象数组">{{变量}}-{{索引}}</li>-->
        <li v-for="(i,index) in items">
            {{index}}-{{i}}
        </li>
    </ul>
    <h1>遍历数据列表</h1>
    <table border="1" width="300">
        <!--基本语法:
        <li v-for="变量 in 对象数组">{{对象的属性}}</li>-->
        <tr v-for="(monster,index) in monsters">
            <td>{{index}}</td>
            <td>{{monster.id}}</td>
            <td>{{monster.name}}</td>
            <td>{{monster.age}}</td>
        </tr>
    </table>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            items: ["三国演义", "红楼梦", "西游记", "水浒传"],
            monsters: [
                {id: 1, name: "牛魔王", age: 800},
                {id: 2, name: "黑山老妖", age: 900},
                {id: 3, name: "红孩儿", age: 200}
            ]
        }
    });
</script>
</body>
</html>

9.3练习

如图，显示成绩及格的学生列表

将学生对象存放在数组中
遍历显示所有学生，只显示成绩及格的学生

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for练习</title>
</head>
<body>
<div id="app">
    <h1>及格的学生成绩列表</h1>
    <table border="1" width="400">
        <tr>
            <td>id</td>
            <td>name</td>
            <td>age</td>
            <td>score</td>
        </tr>
        <tr v-for="student in students" v-if="student.score >= 60">
            <td>{{student.id}}</td>
            <td>{{student.name}}</td>
            <td>{{student.age}}</td>
            <td>{{student.score}}</td>
        </tr>
    </table>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            students: [
                {id: 1, name: "jack", age: 20, score: 70},
                {id: 2, name: "marry", age: 20, score: 60},
                {id: 3, name: "tom", age: 20, score: 28},
                {id: 4, name: "smith", age: 20, score: 99}
            ]
        }
    });
</script>
</body>
</html>

day Vue gt lt code

有关day05-Vue02的更多相关文章

postman——集合——执行集合——测试脚本——pm对象简单示例02 - 2
//1.验证返回状态码是否是200pm.test("Statuscodeis200",function(){pm.response.to.have.status(200);});//2.验证返回body内是否含有某个值pm.test("Bodymatchesstring",function(){pm.expect(pm.response.text()).to.include("string_you_want_to_search");});//3.验证某个返回值是否是100pm.test("Yourtestname",function(){varjsonData=pm.response.json
计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
牛客网专项练习30天Pytnon篇第02天 - 2
1.在Python3中，下列关于数学运算结果正确的是:（B）a=10b=3print(a//b)print(a%b)print(a/b)A.3，3，3.3333...B.3，1，3.3333...C.3.3333...，3.3333...，3D.3.3333...，1，3.3333...解析：在Python中，//表示地板除（向下取整），%表示取余，/表示除（Python2向下取整返回3）2.如下程序Python2会打印多少个数:（D）k=1000whilek>1: print(k)k=k/2A.1000 B.10C.11D.9解析：按照题意每次循环K/2，直到K值小于等
ruby-on-rails - rails : Find tasks that were created on a certain day? - 2
我有一个任务列表(名称、starts_at)，我试图在每日View中显示它们(就像iCal)。deftodays_tasks(day)Task.find(:all,:conditions=>["starts_atbetween?and?",day.beginning,day.ending]end我不知道如何将Time.now(例如“2009-04-1210:00:00”)动态转换为一天的开始(和结束)，以便进行比较。最佳答案 deftodays_tasks(now=Time.now)Task.find(:all,:conditio
(附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2
参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法前端通过，signalR内置方法.invoke() 去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on
什么是0day漏洞？如何预防0day攻击？ - 2
什么是0day漏洞？0day漏洞，是指已经被发现，但是还未被公开，同时官方还没有相关补丁的漏洞；通俗的讲，就是除了黑客，没人知道他的存在，其往往具有很大的突发性、破坏性、致命性。0day漏洞之所以称为0day，正是因为其补丁永远晚于攻击。所以攻击者利用0day漏洞攻击的成功率极高，往往可以达到目的并全身而退，而防守方却一无所知，只有在漏洞公布之后，才后知后觉，却为时已晚。“后知后觉、反应迟钝”就是当前安全防护面对0day攻击的真实写照！为了方便大家理解，中科三方为大家梳理当前安全防护模式下，一个漏洞从发现到解决的三个时间节点：T0：此时漏洞即0day漏洞，是已经被发现，还未被公开，官方还没有相
ruby - Rails 比较 date.end_of_day.to_datetime 和 date.to_datetime.end_of_day 返回的日期对象值时返回 false - 2
ruby1.9.3dev(2011-09-23修订版33323)[i686-linux]轨道3.0.20最近为什么在与DateTimeonRails相关的RSpecs项目上工作我发现在给定日期以下语句发出的值date.end_of_day.to_datetime和date.to_datetime.end_of_day虽然它们表示相同的日期时间，但比较时返回false。为了确认这一点，我打开了Rails控制台并尝试了以下操作1.9.3dev:053>monday=Time.now.monday=>2013-02-2500:00:00+05301.9.3dev:054>monday.cla
vue 实现内容超出两行显示展开更多功能，可依据需求自定义任意行数！ - 2
平时开发中我们经常会遇到这样的需求，在一个不限高度的盒子中会有很多内容，如果全部显示用户体验会非常不好，所以可以先折叠起来，当内容达到一定高度时，显示展开更多按钮，点击即可显示全部内容，先来看看效果图：这样做用户体验瞬间得到提升，接下来看看具体细节。0">主要操作在内容这里{{item.username}},……展开更多样式大家可依据自己项目需求进行设计，这里就不贴了，主要说几个关键的。1、在data中定义三个属性isShowMore:false, //控制展开更多的显示与隐藏textHeight:null, //框中内容的高度status:false, //内容状态是否打开2.计算内容是否
vue3.0 + vite2.0+如何兼容低版本浏览器 - 2
这里写自定义目录标题一、问题二、解决三、解决方案四、打包预览一、问题在使用vue3.2和vite2开发一个移动端或者钉钉端H5微服务iosapp内置浏览器打开没问题安卓app内置浏览器打开空白页面vconsole打印出现报错globalthisundefind二、解决内置浏览器版本比较低打印出来是63vue3代码不兼容低版本浏览器三、解决方案步骤一：vite.config.ts里build.target配置项指定构建目标为es2015或者步骤二：安装@vitejs/plugin-legacy安装完报错也还在指定版本可以解决“@vitejs/plugin-legacy”:“1.8.0”,步骤三：
Ruby，从 Date.day_fraction_to_time 获取小时、秒和时间 - 2
我找到了这个方法here.start=DateTime.nowsleep15stop=DateTime.now#minutesputs((stop-start)*24*60).to_ihours,minutes,seconds,frac=Date.day_fraction_to_time(stop-start)我有以下错误:`':privatemethod`day_fraction_to_time'calledforDate:Class(NoMethodError)我检查了/usr/lib/ruby/1.9.1/date.rb并找到了它:defday_fraction_to_time(