vue的v-系列事件

回顾

vue 前端框架
框架特点:是一套完整的解决方案,功能多,排它性
vue特色:渐进式
vue核心思想: 组件化 , 数据驱动(基于响应式)
vue cli   4.5  下(2.x) 上(2.x/3.x)
vue create 项目名 (babel)
vue 底层集成了webpack
npm run serve 打包+开服
npm run build 打包

Demo.vue
<template>
	<div id="demo">
	   {{k}}
	</di>
</template>

<script>
export default{
  components:{},
  data(){
      return {
			//数据
      }
  }

}

</script>

<style>
	#demo .xxx{
	
	}
</style>

指令:
<标签  v-on:事件   v-if  v-else  v-else-if 
事件简写: @事件=""

v-show

类似于v-if,用于元素的隐藏和显示

<标签  v-show="条件"
条件为true,显示,反之隐藏

面试题:

v-if和v-show的区别

v-show:
本质:通过css display来控制隐藏和显示
场景:频繁的切换隐藏和显示(只是改变css,性能消耗小)
页面加载速度:前提时一开始都隐藏,v-show的页面加载速度更慢(渲染节点)
v-if:
本质:通过是否渲染来控制隐藏和显示(类似于节点的删除和追加)
场景:不频繁的切换隐藏和显示(只是改变css,性能消耗小)
页面加载速度:前提时一开始都隐藏,v-if的页面加载速度更快(压根就没有渲染节点)

如果有根据权限判断是否显示某部分内容的需求,则使用v-if(因为v-show可以在浏览器调试器中通过css改变为block,从而显示不该显示的内容)

v-text、v-html

v-text类似于innerText (不支持标签)

v-html类似于innerHTM L (支持标签)

作用:用来设置标签体的内容

<标签>标签体</标签>

<标签 v-text/v-html=""></标签>

v-text、v-html、{{}} 的区别

只有 v-html 才支持标签

{{}}最灵活,用得最多

v-bind

作用:能够写活标签本身拥有的属性

<标签  v-bind:原属性="" 

简写:

<标签  :原属性="" 

demo

<template>
    <div>

        <font :color="color" v-bind:size="size" face="楷体">蜗牛</font>
        <button @click="color='red'">变色</button>
        <button @click="size=1">变size</button>
    </div>
</template>

<script>
export default {
    data(){
        return{
            color:"green",
            size:7
        }
    }
}
</script>

<style>

</style>

vue中指令的简写

v-on:事件=""   --->@事件=""
v-bind:原属性=""  ---->:原属性=“”

vue中引入本地图片

情况1:网络图和本地写死的图:
<img src=""  />

情况2:本地写活的图:require关键词
<img :src="src"/>


export default {
    data(){
        return{
           src:require("../../assets/logo.png")
        }
    }
}

demo,点击按钮切换图片

方法1:三元表达式

<template>
    <div>

       <img :src="src"/>
       <button @click="src=src==require('../../assets/a1.jpeg')?require('../../assets/logo.png'):require('../../assets/a1.jpeg')">点击切换</button>
    </div>
</template>

<script>
export default {
    data(){
        return{
           src:require("../../assets/logo.png")
        }
    }
}
</script>

<style>

</style>

方法2:v-if (推荐)

<template>
    <div>

       <img v-if="isb" src="../../assets/a1.jpeg"/>
        <img v-else src="../../assets/logo.png"/>
        <button @click="isb=!isb">切换</button>
    </div>
</template>

<script>
export default {
    data(){
        return{
            isb:true
        }
    }
}
</script>

css

全局样式

会影响所有组件:

 内部:直接在style中编辑 
 <style>
 	h1{}
 </style>
 	
 
 外部:在style中通过 @impot ‘路径’; 引入即可
  <style>
 	 @import './xxx1.css';
 	 @import './xxx2.css';
 </style>

局部样式

只会影响当前组件:

 内部: 在style标签中添加scoped
 
 
 外部: 在style标签中添加scoped ,编写src属性
 
<style scoped src="../style/a.css" > </style>
<style scoped src="../style/b.css" ></style>

全局样式的优先级

父组件 优先级  >  子组件

动态class和style

class:

<标签   :class="{选择器名1:boolean,.........}"
作用:动态设置class  :如果boolean为真,则该标签拥有对应的样式
如果更改样式的地方比较多建议用class

style:

<标签   :style="{样式中的属性名1:值,.........}"
作用: 动态设置style

不常用的语法(了解)

:class="[]"
:style="[]"

函数和事件注册

1 基本使用

注册事件:

<标签  @事件="函数名"  

函数的定义:

export default {
	methods:{
		函数(){}
	}
	

2 this

this代表当前组件对象,可以通过this.属性 来获取data中定义的属性,this.方法来调用methods中定义的方法

3 传参

<标签  @事件="函数名(实参)"

export default {
	methods:{
		函数(形参){}
	}

4 event

传统方式:

 <button @click="test($event)">按钮</button>
 
 test(e){
 //获取当前标签对象
 console.log( e.target);
 },

简写:前置(如果没有其他参数传递时)

注意:函数后不能有()

<button @click="test">按钮</button>


 test(e){//第一个参数就能直接代表event对象
     //获取当前标签对象
     console.log( e.target);
 },

5 绑定多个事件

前置:

methods:{
        f1(){
            console.log("f1");
        },
        f2(){
            console.log("f2");
        }
    }

方式1

 <div class="d" @click="f1"  @mouseover="f2"></div>

方式2:(面试题)

<div class="d" v-on="{click:f1,mouseover:f2}"></div>

Father

    <div class="d"  :style="{backgroundColor:arr[index]}" @click="change"></div>

  
    
</div>

# 回顾 阻止冒泡和阻止默认

阻止冒泡

冒泡:按照由内到外的顺序依次触发方法

<div id="f" onclick="f(event)">
    <div id="s" onclick="f(event)"></div>
</div>
~~~

阻止默认

默认:元素的默认行为(a标签默认行为能够做跳转)

 <a href="http://www.baidu.com" onclick="f2(event)">跳转</a>
 
 
     function f2(){
       alert("ok")
       //阻止默认
       event.preventDefault()
    }

修饰符

作用:简化代码
语法:
<标签   @事件.修饰符=""

1 事件修饰符

阻止冒泡和默认
.stop
.prevent

Demo:

    <div id="f" @click="f">
      <div id="s" @click.stop="f"></div>
    </div>

    <a href="http://www.baidu.com" @click.prevent="f2">跳转</a>

2 按键修饰符

必须用到指定的按键后才触发
.enter    用的最多
.tab
.space
.up
.down
.left
.right

demo

 <input type="text" @keyup.enter="f3">

3 系统修饰符

必须用到指定的按键后才触发,需要搭配按键修饰符
.ctrl
.shift
.alt

Demo:

<input type="text" @keyup.ctrl.enter="f3">

v-for

1 遍历Array

 <table border="1">
            <thead>
                <tr>
                    <td>学号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>性别</td>
                    <td>爱好</td>
                </tr>
            </thead>
            <tbody>

                 <tr v-for="(item,index) in arr" :key="item.id">
                    <td>{{item.id}}--下标:{{index}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.gender==1?'男':'女'}}</td>
                    <td>{{item.hobby.join()}}</td>
                </tr>


            </tbody>
        </table>
        
        
        
        
        
 data() {
    return {
        arr:[
            {id:1,name:"张三",age:18,gender:1,hobby:["吃饭","睡觉"]},
            {id:2,name:"张三",age:28,gender:1,hobby:["吃饭","睡觉"]},
            {id:3,name:"王五",age:38,gender:0,hobby:["吃饭","睡觉"]},
            {id:4,name:"赵六",age:48,gender:1,hobby:["吃饭","睡觉","打豆豆"]}
        ]
    };

key

语法:     :key="唯一标识"  ,一般都是id(item._id)
作用:当给列表一个key属性后,vue就能够识别每一个元素,以后更改某个元素时,vue能做到局部渲染,而不是整个列表的渲染-----》提高性能

面试题:

v-for能够遍历哪些数据类型
Array
Object
Number
String

2 遍历Object

  data() {
    return {
       
        user:{
            username:"aaa",
            password:"111"
        }
        
        
  <span v-for="(v,k) in user" :key="k">
            {{k}}:{{v}}
  </span>

3 遍历Number

  data() {
    return {      
        n:9
       
       
<span v-for="(item,index) in n" :key="item">
    {{item}}--{{index}}
</span>

4 遍历String

data() {
    return {
        
        name:"abcadwad"
    };
        
        
        
        <span v-for="(item,index) in name" :key="index">
            {{item}}--{{index}}
        </span>

补充

vue提供了一个标签,作用就是不会渲染到页面中

我们可以使用template标签包裹多个元素,把指令放在该标签上,这样做可以避免产生无意义的标签

    <template v-if="isb">

        <span >aa</span>
        <span >bb</span>
        <span >cc</span>

    </template>
    
    
    
    
  <div v-if="isb">     --->会多一层div,dom层级变得更加复杂---》页面加载速度受到影响

        <span >aa</span>
        <span >bb</span>
        <span >cc</span>

    </div>

v-for和v-if的连用

优先级:

如果v-for和v-if同时放在一个标签,则程序能够正常渲染,但是会提示报错(vue不推荐两个放在一堆)
也说明了v-for优先级>v-if
渲染出年龄<=20的学生

<tr v-for="(item,index) in arr" :key="item.id">
    <template  v-if="item.age<=20">
        <td>{{item.id}}--下标:{{index}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td>{{item.gender==1?'男':'女'}}</td>
        <td>{{item.hobby.join()}}</td>
    </template>
</tr>

ref和refs

ref

作用:可以给任意标签设置标记 
语法:<标签  ref="标记名"  

refs: 获取的原生的js对象

this.refs.标记名 获取对应的标签对象(节点对象)

key和v-if的搭配

作用:强制让v-if渲染清除节点的功能生效,避免vue的优化

需求:点击按钮切换文本框和密码框(强制让节点生产和删除)

<input type="text"  v-if="isb" key="a"/>
<input type="password"  v-else key="b"/>
<button @click="change">切换</button>
    
    
    
    
  data() {
    return {
      
      isb: true,
    };
    
    
    
methods: {
    change() {
        this.isb=!this.isb
    },
  },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值