标签：Vue name show 修饰符 day05 score 渲染 Vue02

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 
标签：Vue,name,show,修饰符,day05,score,渲染,Vue02	

From： https://www.cnblogs.com/liyuelian/p/17035717.html

day05-Vue02