Vue.js第三章

师建德

2023-12-01

2.6 Class与Style绑定v-bind

通过 class 列表和 style 指定样式是数据绑定的一个常见需求。它们都是元素的属性，都用v-bind处理，其中表达式结果的类型可以是：字符串、对象或数组。

2.6.1 语法格式

v-bind:class='表达式’或:class=‘表达式’

class的表达式可以为：

字符串:class=‘activeClass’

对象:class=’{active:isActive,error:hasError}’

数组:class=’[“active”,“error”]'注意要加上双引号，不然是获取data中的值。
v-bind:style='表达式’或:style=‘表达式’

style的表达式一般为对象

：style="{color:activeColor,fontSize:fontSize+‘px’}"注意要加上单引号,不然是获取data中的值

注意：对象中的value值 activeColor 和 fontSize 是data中的属性

2.7 条件渲染 v-if

2.7.1 条件指令

v-if是否渲染当前元素

v-else

v-else-if

v-show 与v-if类似，只是元素始终会被渲染并保留在 DOM 中,只是简单切换元素的 CSS 属性 display 来显示或隐藏

2.7.3 v-if 与 v-show 比较

什么时候元素被渲染

v-if)如果在初始条件为假，则什么也不做，每当条件为真时，都会重新渲染条件元素 v-show不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换
使用场景选择

v-if有更高的切换开销，

v-show有更高的初始渲染开销。

因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行后条件很少改变，则使用 v-if 较好。

2.8 列表渲染 v-for

2.8.1 列表渲染指令

1. v-for 迭代数组
语法： v-for="(alias, index) in array"
说明： alias : 数组元素迭代的别名； index : 数组索引值从0开始(可选)
2. v-for 迭代对象的属性

语法： v-for="(value, key, index) in Object"

说明： value : 每个对象的属性值; key : 属性名(可选); index : 索引值(可选) 。
注意: 在遍历对象时，是按Object.keys()的结果遍历，但是不能保证它的结果在不同的JavaScript引擎下是顺序一致的。

3. 可用 of 替代 in 作为分隔符

2.9 事件处理 v-on

2.9.1 事件处理方法

完整格式：v-on:事件名="函数名"或v-on:事件名=“函数名(参数…)”

缩写格式：@事件名="函数名"或@事件名=“函数名(参数…)”

event：函数中的默认形参，代表原生DOM时间

当调用的函数，有多个参数传入时，需要使用原生DOM事件，则通过$event作为实参传入

作用：用于监听DOM事件

2.9.2 事件修饰符

.stop阻止单击事件继续传播event.stopPropagation()

js冒泡：在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

<div @click=''>
	<button @click=''></button>
</div>

.prevent阻止事件默认行为event.preventDefault(

.once点击事件将只会触发一

<body>	

<div id="app">

<h2>1. 事件处理方法</h2>

<button @click="say">Say {{msg}}</button>

<button @click="warn('hello', $event)">Warn</button>

<br>

<h2>2. 事件修饰符</h2>

<!--单击事件继续传播-->

<div @click="todo">

<!--点击后会调用doThis再调用todo-->

<button @click="doThis">单击事件会继续传播</button>

</div>

<br/>

<!-- 阻止单击事件继续传播，-->

<div @click="todo">

<!--点击后只调用doThis-->

<button @click.stop="doThis">阻止单击事件会继续传播</button>

</div>

<!-- 阻止事件默认行为 -->

<a href="http://www.ceshi.com" @click.prevent="doStop">测试官网</a>

 <!-- 点击事件将只会触发一次 -->
 <button @click.once="doOnly">点击事件将只会触发一次: {{num}}</button>
 </div> 
 <script src="./node_modules/vue/dist/vue.js"></script>
 <script type="text/javascript">
 var vm = new Vue({
 el: '#app',
 data: {
 msg: 'Hello, Vue.js',
 num: 1
	},
 methods: {
 say: function (event) {
 // `this` 在方法里指向当前 Vue 实例
 alert(this.msg)
 // `event` 是原生 DOM 事件
 alert(event.target.innerHTML)
	},
 //多个参数如果需要使用原生事件，将 $event 作为实参传入
 warn: function (msg, event) {
 alert(msg + "," + event.target.tagName)
	},
 todo: function () {
 alert("todo	");
	},
 doThis: function () {
 alert("doThis	");
	},
 doStop: function () {
 alert("href默认跳转被阻止	")
	},
 doOnly: function() {
 this.num++
	}
	}
	})
 </script>
 </body>

2.9.3 按键修饰符

案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    
</head>
<body>
    <div id="app">
        <h3>事件处理方法 v-on 或 @事件名</h3>
        <button v-on:click="say">say {{msg}} </button>
        <!-- $event代表的是原生的dom事件 -->
        <button @click="warn('hello',$event)">warn</button>

        <h3>2，事件修饰符</h3>
        <!-- 2.1阻止冒泡 -->
        <div @click="todo">
            <button @click="doThis">单击事件会继续传播</button>
        </div>

        <div @click="todo">
            <button @click.stop="doThis">阻止单击事件会继续传播</button>
        </div>

        <!-- 2.2阻止事件的默认行为 -->
        <a href="http://www.baidu.com" @click.prevent="doStop">跳转</a>
        <!-- 2.3点击事件只会触发一次 -->
        <button @click.once="doOnly">点击事件只会出发一次{{num}}</button>

        <h3>按键修饰符</h3>
        <input type="text" @keyup.enter="keyEnter">
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
               msg:"hello test",
               num:1
            },
            methods: {
                say:function(event){
                    //event代表dom原生事件 vue.js会自动将它传入进来
                    alert(this.msg);
                    alert(event.target.innerHTML);
                },
                warn:function(name,event){
                    //如果函数有多个参数，而又需要使用原生事件，则需要使用$event作为参数传入
                    alert(name);
                    alert(event.target.tagName);

                },
                doThis:function(){
                    alert("doThis...");
                },
                todo:function(){
                    alert("todo...");
                },
                doStop:function(){
                    alert("doStop...");
                },
                doOnly:function(){
                    this.num++;
                },
                keyEnter:function(){
                    alert("按了回车键")
                }
            },
        })
    </script>
</body>
</html>