vue中的事件处理

一，是模板语法

二，是条件渲染

三，是事件处理


<template>
  <div class="hello">
    <button @click ="counter += 1">点击：counter{{counter}}button>
    <button @click ="clickHandle">按钮button>
    <p>{{ message }}p>
    <button @click="say('hi')">say hibutton>
    <button @click="say('what')">say whatbutton>
    <ul>
      <li  @click="clickItemHandle(item)" v-for="(item,index) in names" :key="index">{{item}}li>
    ul>
  div>
template>
 
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      counter:1,
      message:"消息通知",
      names:["iwen","ime","frank"]
 
    };
  },
  methods:{
    clickHandle(event){
      // console.log("哈哈哈，你大爷");
      // 在事件中，读取data属性，是需要通过this.属性
      this .message = "消息没有了"
      console.log(event);//even 是原生dom event
      event.target.innerHTML="点击之后"
    },
    say(){
      console.log("出发啦");//同时绑定两个事件
    },
    clickItemHandle(item){
      console.log(item);
    }
  },
  props: {
    msg: String,
  },
};
script>

在事件出来这里我出个buy

报错是：runtime-core.esm-bundler.js?d2dd:38 [Vue warn]: Property "index" was accessed during render but is not defined on instance.
at
at

四，表单输入绑定

五,是修饰符：

lazy

lazy的效果就是可以将实时的给你变成不实时的。在默认的情况下，v-model在每次input事件触发后将输入框的值与数据进行同步。可以添加lazy修饰符，从而转成charge事件之后进行同步。charge作用是失去焦点时触发，或者回车时触发。input是一边输入一边获取。


<input v-model.lazy="message" />
<p>Message is: {{message}}p>


data(){
  return{
    message:''
  }
}

trim

是首尾空格可以用trim

如果要自动过滤用户输入首尾空白符，可以给v-model添加trim修饰符。

<input v-model.trim="message" />


data(){
  return{
    message:''
  }
}

六，是组件基础

单文件组件，单文件组件（又称.vue文件,缩写是SFC）是一种特殊的文件格式，它允许将vue组件的模板、逻辑、与样式封装在单个文件中

加载组件：

第一步：引入组件
第二步：挂载组件
第三步：显示组件

组件组织：

通常一个应用会以一棵嵌套的组件树的形式来组织：

七，是props组件交互

组件与组件之间是需要存在交互的否则完全没有关系，组件意义就很小了

props是可以在组件上注册一些自定义attribute,

attribute,同时也可以决定组件与组件之间的传递

porp类型：

porp:{

title:sring

likes:Number

commentIdsL:Array

author:object

callback:Function

}

数据类型为数组或者对象的时候，默认值是需要返回工厂模式(也就是函数或是构造模式如下代码


names:{
      type:Array,
      //数组和对象必须使用函数进行返回
      default:function(){
        return []
      }
    }

)

将MYConponent.vue文件传入到APP.vue根组件文件中，并在根文件8080窗口打开：

（1）MYConponent.vue组文件代码


<template>
  <h2>prop传递组件h2>
  <p>title:{{ title }}p>
  <p>age:{{ age }}p>
  <ul>
    <li v-for="(item,index) in names" :key="index">{{item}}li>
  ul>
template>
 
 
<script>
export default {
  name: "MYConponent",
  //接收
  props:{
    title:{
      type:String,
      default:""
    },
    age:{
      type:Number,
      default:0
    },
    names:{
      type:Array,
      //数组和对象必须使用函数进行返回
      default:function(){
        return []
      }
    }
 
  }
};
script>
 
 
<style scoped>
h3 {
  color: blue;
}
style>

（2）APP.vue根组件文件代码


<template>
  <img alt="Vue logo" src="./assets/logo.png">
  
  <MYConponent :title="title" :age="age" :names="name"/>
template>
 
<script>
// import HelloWorld from './components/HelloWorld.vue'
import MYConponent from './components/MYConponent.vue'
 
export default {
  name: 'App',
  data(){
    return{
      title:"我是一个标题",
      age:20,
      names:['iwen','ime','frank']
    }
  },
  components: {
    MYConponent
  }
}
script>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
style>

自定义事件传递数据

（1）MYConponent.vue组文件代码


<template>
  <h2>自定义事件传递数据h2>
  <button @click="sendClickHandle">点击传递button>
template>
 
 
<script>
export default {
  name: "MYConponent",
  data(){
     return{
      message:"我是MYConponent数据"
     }
  },
  methods:{
    sendClickHandle(){
      //参数1：字符串：理论上是随便起的，但是需要有意义，如下"onEvent"就时自定义的
      //参数2：传递数据
      this.$emit("onEvent",this.message)
    }
  }
  }
 
script>

（2）APP.vue根组件文件代码


<template>
  <img alt="Vue logo" src="./assets/logo.png">
  
  
  <MYConponent @onEvent="getDataHandle"/>
template>
 
<script>
// import HelloWorld from './components/HelloWorld.vue'
import MYConponent from './components/MYConponent.vue'
 
export default {
  name: 'App',
  // data(){
  //    return{
  //     message:"",
  //    }
  // },显示页面上不显示控制台
  components: {
    MYConponent
  },
  
  methods:{
    getDataHandle (data){
      // this.message = data;显示在页面上，不显示控制台
      console.log(data);
    } 
  }
}
script>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
style>

八，组件的生命周期

每个组件在被创建时要经过一系列的初始化过程--例如，需要设置监听，编译模板，将实例挂载到DOM并数据变化时更新dom等，同时在这个过程也会运行一些叫做生命周期钩子，这给例了用户在不同阶段添加自己的代码机会。

这些生命周期是会在不同的节点做不同的事情。

1. beforeCreate（创建前）
2. created （创建后）
3. beforeMount (载入前)
4. mounted （载入后）
5. beforeUpdate （更新前）
6. updated （更新后）
7. beforeDestroy（销毁前）
8. destroyed （销毁后）

创建时： beforeCreate（创建前） created （创建后）

渲染时： beforeMount (载入前) mounted （载入后）

更新时： beforeUpdate （更新前） updated （更新后）

卸载时： beforeDestroy（销毁前） destroyed （销毁后） vue2

卸载时： beforeUnmount（销毁前） unmounted （销毁后） vue3

（1）MYConponent.vue组文件代码


<template>
  <h2>生命周期h2>
  <p>{{message}}p>
  <button @click="message='数据'">点击button>
template>
 
 
<script>
export default {
  name: "MYConponent",
  data(){
     return{
      message:""
     }
  },
  beforeCreate(){
    console.log("beforeCreate:组件创建前");
  },
   created (){
    console.log("created:组件创建完成" );
  },
   beforeMount (){
    console.log( "beforeMount:组件渲染前" );
   },
    mounted (){
      //会把网络请求放在这里，因为dom在执行到这里已经显示在页面上了
    console.log(  "mounted:组件渲染完成" );
   },
   beforeUpdate (){
    console.log( "beforeUpdate:组件更新前" );
   },
   updated  (){
    console.log( "updated :组件更新后 ");
   },
    beforeUnmount(){
      //卸载之前，就把消耗的处理都干掉，性能
      //例如定时器
    console.log(  "beforeMount:组件卸载前" );
   }, 
   unmounted(){
    console.log(  "mounted:组件卸载后" );
   }
  }
 
script>

（2）APP.vue根组件文件代码


<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <MYConponent />
template>
 
<script>
import MYConponent from './components/MYConponent.vue'
 
export default {
  name: 'App',
  
  components: {
    MYConponent
  },
  
  
}
script>
 
<style>

添加一个按钮


<template>
  <h2>生命周期h2>
  <p>{{message}}p>
  <button @click="message='数据'">点击button>
template>

九 vue引入第三方

轮播图供第三方推荐：

1，swiper开源，免费，强大的触摸活动插件

2，swiper是存JavaScript打造的滑动特效插件，面向手机，平板电脑等移动终端

3，swiper能实现触屏焦点图，触屏tab切换，触屏轮播图切换等常用效果

官方文档：

Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

Swiper Vue.js Components

安装指定版本：npm install -- sava swiper@8.1.6


<template>
   <div class="hello">
    <swiper :modules="modules" :pagination="{clickable:true}">
    <swiper-slide><img src='../assets/logo.png' alt=''>swiper-slide>  
    <swiper-slide><img src='../assets/logo.png' alt=''>swiper-slide>  
    <swiper-slide><img src='../assets/logo.png' alt=''>swiper-slide>  
    swiper>
  div>
template>
 
 
<script>
import { Pagination } from 'swiper/vue';
import { Swiper,SeiperSlide } from 'swiper/vue';
import "swiper/css";
import "swiper/css/pagination";
 
export default {
  name: "HelloWorld", 
  data(){
    return{
      modules:[Pagination]
    }
  },
  components:{
    Swiper,
    SeiperSlide,
  }
}
script>
<style scoped>
 
img{
  width:10%;
}
style>

十一，axios网络请求

（这个是get的请求方式）


<template>
  <div class="hello">
    <p>{{chengpin.title}}p>
  
 
  div>
template>
 
<script>
import axios from "axios"
 
export default {
  name: 'HelloWorld',
  data(){
    return{
      chengpin:{
 
      }
    }
  },
  mounted(){
    axios({
      //这是ge请求方式
      method:"get",
      url:"http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php"
    }).then(res =>{
      console.log(res.data);
      this.chengpin=res.data.chengpinDetails[0]
    })
  }
}
script>

（2）这个是post修改方式

这里又出现个buy

app.js:39 Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: d:\work\demo\node_modules\longnoce\hhhh\bzhangxuexi\src\components\HelloWorld.vue: Unexpected token, expected "," (28:10)


<template>
  <div class="hello">
    <p>{{chengpin.title}}p>
  
 
  div>
template>
 
<script>
import axios from "axios"
 
export default {
  name: 'HelloWorld',
  data(){
    return{
      chengpin:{
 
      }
    }
  },
  mounted(){
    axios({
      //这是ge请求方式
      method:"get",
      url:"http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php"
    }).then(res =>{
      console.log(res.data);
      this.chengpin=res.data.chengpinDetails[0]
    })
 
    //这是post的修改方式
    axios({
      //这是ge请求方式
      method:"post",
      url:"http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php",
      data:{
        user_id:"iwer@qq.com",
        password:"iwen123",
        verification_code:"crfvw"
      }
      
    }).then(res =>{
      console.log(res.data);
      // this.chengpin=res.data.chengpinDetails[0]
    })
 
  }
}
script>
 
<style scoped>
h3 {
  margin: 40px 0 0;
}
 
style>

因为data是一个字符串，所以要装换一下数据类型，先退出，在终端输入命令：npm install --save ququerystring

还可以将get和post简写成快捷方式


mounted(){
axios.get("http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php").then(res=>{
  console.log(res.data);
})
 
 
 
axios.post("http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php",querystring.stringify({
        user_id:"iwer@qq.com",
        password:"iwen123",
        verification_code:"crfvw"
      })).then(res=>{
      console.log(res.data);
     })
  }
}

相关阅读:
Hibernate EntityManager 指南
 查找算法之二分查找
 万邦抖音获取douyin分享口令url API
linkagemapping中Failed to execute （RasterToPolyline）
YOLOv7优化：感受野注意力卷积运算（RFAConv），效果秒杀CBAM和CA等 | 即插即用系列
 网络安全--红队资源大合集
 1.6、计算机网络的性能指标(2)
扩展Conda的宇宙：使用conda config --append channels命令
 什么是“path”环境变量？path的作用是什么？
vscode 清除全部的console.log
原文地址：https://blog.csdn.net/lv_suri/article/details/126076140