Vue【二】

最新推荐文章于 2024-05-12 20:07:26 发布

点份炸鸡778

最新推荐文章于 2024-05-12 20:07:26 发布

阅读量1k

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_43759721/article/details/125922533

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

5)绑定事件v-on

1.概述:
  使用vue框架,如果想在指定的标签上加上事件,并绑定vue中编写的函数,就需要使用  v-on指令,就不用像写js那样直接写事件名了

2.语法:
  v-on:事件名 = "要绑定的vue中的函数名"
  
  简化:
  @事件名 = "要绑定的vue中的函数名"
      
3.细节问题:
  a.使用vue给标签设置事件,事件名和js中学的事件名一样,只需要将js中的事件名的on去掉
    比如:  js中单击事件  ->  onclick
          vue中单击事件  ->  click
        
  b.事件绑定的函数需要在vue中的methods里面写
  c.事件调用函数时,函数后面的小括号写不写都行(除非需要传参)
        
4.methods中的函数写法:
  函数名:function(){
  
  }
  
  或者

  函数名(){
  
  }

1). <button v-on:click="num++">增加1</button>   绑定点击事件
2).<button @click="num++">增加1</button>		   简化写法
3).<button @click="addNum">增加1</button

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue事件绑定v-on</title>

</head>
<body>
    <div id="app">
        {{num}}
        
	1. 如果是复杂计算建议使用function函数进行定义.获取属性时 使用this关键字.

   	2. 如果是简单的计算.则可以通过@click="计算操作" 该操作可以直接获取vue.js中的属性.  无需添加this关键字.
    
        <button v-on:click="num++">+</button>
        <button @click="num++">增加</button>
        <button @click="addNum">增加1</button>

        {{num}}
        <button v-on:click="num--">-</button>
    </div>
</body>
    <script src="js/vue.js"></script>
    <script>
        const app=new Vue({
            el:"#app",
            data:{
                num:0
            },
            methods:{
                addNum(){
                    this.num++
                }
            }
        });
    </script>
</html>

6)事件修饰符

事件冒泡

1.什么是事件冒泡:
  比如:点击内层div,会将内层div要触发的事件传递到外层div中;也就是说,点击内层div绑定的事件,外层div绑定的事件也触发了
      
2.正常逻辑:
  点击内层div,只触发内层div绑定的事件;点击外层div,只触发外层div绑定的事件

1.阻止事件冒泡

<button @click.stop="num++">自增</button>

2.阻止默认行为

@click.prevent="函数名称"

或者是js自带的:event.preventDefault(),阻止默认的行为

需求:
	在form表单的actioin中或者a标签的href中,不想让其直接跳转,需要对其进行去其他的业务操作,要用到prevent
	如注册页面中的action,我们需要先对输入的信息进行处理(验证是否存在或是否为空)时,如果验证成功则再跳转,否则就不能用跳转.

7)常用事件介绍

1)change事件:数据进行修改后离焦时触发(如在输入框中使用,输入值后,鼠标离开输入框外事件触发,多结合正则验证使用)

@change=“函数”

2)blur事件:不需要进行修改,离焦事件触发

@blur=“函数”

<!--按键修饰符:  敲击指定的按键触发事件
            v-on:keyup :  按键弹起来有效.  使用更加频繁
            v-on:keydown: 按键按下去有效.
            .enter
            .tab
            .delete (捕获“删除”和“退格”键)
            .esc
            .space
            .up
            .down
            .left
            .right
        -->

如以下是使用正则验证用户名

<label>用户名称:</label>
<input type="text" placeholder="请输入用户名" name="username" v-model="user.username" @change="checkUser"  />
--------------------
data:{
checkUser(){
          let reg=/^[a-z0-9]{6,16}$/i;
          if(reg.test(this.user.username)){
            this.msg.userMsg="√";
            this.flag[0]=1;
          }else{
            this.msg.userMsg="用户名应为6~16位数字和字母组成";
            this.flag[0]=0;
          }
        },
   }

知识点:

1.但凡用户可以输入的位置 记得使用双向数据绑定
2.如果要求用户输入的只有数值类型 则建议type="number"
3.默认条件下 input框中的数据 当作是字符串类型. 如果需要当作number则需要转化.
      3.1 eval("字符串")  该函数是JS原始提供的 将字符串转化为number类型
      3.2 parseInt(this.numA) 该函数 是JS后期提供的.  二选一即可
        4.如果页面中某些元素 需要"扩展" 可以进行样式修饰/js的操作/干预 最小的标签 使用span
      5.在进行算术计算时,只有加法操作 可能会进行字符串拼接. 其它操作都按照number类型处理

属性绑定😊

1.属性绑定href

能够动态将href属性赋值

vue.js针对动态变化的属性 提供了v-bind:属性 ="属性"
简化操作:  v-bind:属性  简化为 :属性

2.属性绑定class类型

控制样式是否展现

v:bind:{属性: 布尔类型值}控制展现哪些属性 (:class={属性:布尔类型值})

v:bind: 属性后期属性可以动态赋值.控制展现哪些属性 (:属性)

v:bind: style属性 style样式的定义类似于对象的写法 (:style)

属性绑定style:
注意事项:
      1.vue.js中属性不允许出现-线  如果出现-线则使用驼峰规则
         例子:  background-color: xxxx  应该改为
                backgroundColor: xxx
      2.:style 其中的属性使用,号分割.
      3.:style 其中的属性定义,利用{}进行封装.

分支结构用法

1. v-if="条件判断"    	   如果判断条件为真 ,则展现标签
2. v-else-if="条件判断"    如果if不满足 检查是否满足else-if  如果满足展现标签
3. v-else  如果上述的条件都不满足则展现该标签
注意事项:  
	1.只有满足条件,该标签才会渲染到页面中,如果不满足条件,浏览器将不解析该标签.
    2.v-if可以单独使用   v-else-if 和 v-else 必须与v-if连用

语法: v-show

说明: 如果某些元素,需要频繁的在页面中渲染.则建议使用v-show的操作

与v-if对比说明:

  	1. v-if 如果不展现标签.则不让浏览器加载标签.  如果该操作比较频繁.则浏览器会频繁的加载或者渲染该标签.==**则消耗浏览器性能**==.  消耗浏览器内存.   
            	2. v-show  浏览器提前加载该元素  ,只不过通过 display: none; 控制是否展现.  性能更优

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Do77nC15-1658414398096)(D:\Typora\bin\document\img\image-20220711142807120.png)]

循环结构语法

循环遍历的数据是data中的属性. 遍历的结果是在页面中==展现的标签==

1个参数时:

如果参数只有item,则item表示array中的数据.
<p v-for="item in array">{{item}}</p>

2个参数:

参数1:item 表示的是值,  参数2:index 表示下标
<p v-for="item,index in array">{{item}}</p>

如果遍历的是对象

说明: value 对象的value值.
<p v-for="value in user" >{{value}}</p>
说明: 参数1:value表示 对象中的value值   
	 参数2: key=表示对象的属性名
<p v-for="value,key in user" >{{key}}----{{value}}</p>

遍历数组+对象的集合结构(重点)

 <!--3.遍历集合体  index表示当前遍历的索引值(下标)
         如果遍历的是集合数据,则以数据为准.一般不考虑下标.
      -->
      <div v-for="user,index in userList">
        <p v-text="index"></p>
        <p v-text="user.id"></p>
        <p v-text="user.name"></p>
      </div>

vue中表单数据绑定

1. form表单的数据如何与Vue中的数据绑定

注意:

1)对于用户不能输入的标签,要再form标签内添加value属性,并且所有的form表单内的标签都要有name属性;

2)对于可以输入的标签,要写上双向数据绑定

3)对于下拉框,默认只能选中一个,如果想多选,则用到multiple=“true”

4)一般默认的form表单都要阻止默认提交事件,用于先对信息进行处理在提交的需求,第一种就是vue里提供的@click.prevent=“函数”

或者在函数中使用js提供的event.preventDefault(),用于阻止默认操作

2.form表单常用的修饰符

对于form表单的input标签,不管输进去什么类型值,默认都为string类型,如果需要number进行计算操作,则可以进行类型转换

	1. eval("字符串")  该函数是JS原始提供的 将字符串转化为number类型
		2 .parseInt(this.numA) 该函数 是JS后期提供的.  二选一即可

或者使用**.number**这样输入的值就是number类型,就不需要进行类型的转换,不过通常和type=“number”(只能输入数字)一起使用.

对于用户输入的空格,在进行长度输出时,空格也被当成字符,用**.trim**:可以去掉头尾的空格

.lazy: 要求用法输入完成之后,一次计算完成操作不要求实时性

计算属性用法

计算属性说明: 如果页面中有大量的重复计算.则建议使用计算属性.
    计算属性有缓存的效果.第一计算将结果保存到浏览器的缓存中.之后从缓存中获取数据
    说明:

        1. 如果数据发生了变化,则计算属性会重新计算.
                    2. 如果数据频繁变化 则不建议使用计算属性.
                    3. 使用计算属性时 一般都用于定值计算.

methods:{}同级的computed: {}内

侦听器:

当属性数据发生变化则通知侦听器所绑定的方法进行记录. 一般多用于执行异步操作

 如果我们需要对属性的信息进行监控,并且进行记录.或者其他的操作
               则可以使用监听器进行实时监控.
               简化记忆: 监控变化,完成业务操作
          语法:
                1.watch关键字
                2.监听的属性名,之后通过属性名(value)的方式进行监控
                3.针对业务需要,完成操作.

过滤器

过滤器介绍: 如果需要对页面中展现的数据进行格式化的操作时. 首选使用过滤器.

1. 将时间按照要求进行展现

2.将字符按照特定的规则展现.

过滤器语法:

1.定义全局过滤器
* 语法:
*     1.Vue.filter("过滤器名称","过滤器函数")
*     2. value是需要被过滤的数据
*     3. 使用过滤器必须添加retrun返回值.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>过滤器</title>
</head>
<body>
<h1>过滤器介绍</h1>
<div id="app">
    <!--1.将用户输入的内容,全部转化为大写字母-->
    用户名: <input type="text" name="username" v-model="username"><br>

    <!--2.调用过滤器  将字母大写
          还需要将字符串进行反转   abc  cba
     -->
    {{username | upper }}<br>
    <!--级联操作 多个过滤器可以按照顺序,写多个-->
    {{username | upper | reverse}}
</div>

<!-- 引入JS文件 -->
<script src="../js/vue.js"></script>
<script>
  /*1.定义全局过滤器
  * 语法:
  *     1.Vue.filter("过滤器名称","过滤器函数")
  *     2. value是需要被过滤的数据
  *     3. 使用过滤器必须添加retrun返回值.
  * */

  Vue.filter("upper",function (value) {
      //console.log(value)
      return value.toUpperCase()
  })

  /**
   * 1.将字符串按照''形式 拆分为数组
   * 2.将数组进行反转操作
   * 3.将数组转化为字符串
   */
 Vue.filter("reverse",function (value) {
      return value.split("").reverse().join("")
  })

  const app = new Vue({
    el:	"#app",
    data: {
        username: ""
    },
    methods: {
    }
  })
</script>
</body>
</html>

箭头函数写法

/*函数的简化操作
    语法:
        1.省略function关键字
        2. 如果只有一个参数时,则参数的括号可以省略
        3. 参数与函数体之间为了结构的完整 使用 => 进行关联
        4. {}内就写原来的函数体的内容
        5. 该操作只能在 函数中嵌套函数时使用 .
        6. 如果参数有多个.则()也可以省略 参数与参数之间使用 ,号分割
   */

  //return value.split("").reverse().join("")
  Vue.filter("reverse", value => {
      return value.split("").reverse().join("")
  })
箭头函数可以理解为一个函数作为另一个函数的参数时使用

Vue生命周期

说明: VUE对象从创建到使用,最后销毁 .为了满足用户的特殊的需求.vue提供了生命周期函数. 该函数都是自动的按照顺序依次调用的.

阶段划分:

   1. Vue对象创建阶段
       	1. beforeCreate    Vue对象刚开始创建   vue对象不能使用
       	2. created              Vue对象创建成功 但是没有渲染数据【重要】
       	3. beforeMount    开始完渲染,找到渲染的区域.
       	4. mounted            已经在指定的位置完成了渲染.用户可以看到渲染后的页面  【重要】            

 	2. Vue对象使用阶段
     1. beforeUpdate     用户执行修改操作先调用
     2. updated               用户完成修改操作后调用
 	3. Vue对象的销毁阶段
     1. beforeDestroy    用户销毁前调用
     2. destroyed            用户销毁后调用

1. 哪个方法完成,标志着vue对象创建成功!!     created     
2.哪个方法完成,标志着页面更新完成.          mounted

使用位置:

<!--引入js函数类库  -->
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el : "#app",
    data : {
      msg: "vue生命周期"
    },
    methods: {

    },
    //在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
    beforeCreate(){
      console.log("beforeCreate")
    },
    //在实例创建完成后被立即调用
    created(){
      console.log("created")
    },
    //在挂载开始之前被调用：相关的 render 函数首次被调用。
    beforeMount(){
      console.log("beforeMount")
    },
    //实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
    mounted(){
      console.log("mounted")
    },
    //数据更新时调用，发生在虚拟 DOM 打补丁之前
    beforeUpdate(){
      console.log("beforeUpdate")
    },
    //由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
    updated(){
      console.log("updated")
    },
    //实例销毁之前调用。在这一步，实例仍然完全可用
    beforeDestroy(){
      console.log("beforeDestroy")
    },
    //实例销毁后调用。
    destroyed(){
      console.log("destroyed")
    },
    methods:{
      destroy(){
        //$调用的是vue对象本身的函数.
        this.$destroy()
      }
    }
  })
</script>

点份炸鸡778

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue【二】

1)change事件数据进行修改后离焦时触发(如在输入框中使用,输入值后,鼠标离开输入框外事件触发,多结合正则验证使用)@change=“函数”2)blur事件不需要进行修改,离焦事件触发@blur=“函数”
复制链接

扫一扫