Javascript

vue 3 day(1)

本文主要是介绍vue 3 day(1),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

vue 3 day(1)

  • 一、基本语法
    • 1.1 变量的定义
    • 1.2 方法的定义
    • 1.3 调用另一个组件
    • 1.4 v-show,v-if,v-html
    • 1.5 v-for,必须加key
    • 1.6 单选框展示
    • 1.7 复选框
    • 1.9 减少,增加商品数量
  • 二、出错
    • 2.1 v-for报错
  • 三、琐碎知识
    • 3.1 ref
    • 3.2 通过id获取元素间的innerHTML
    • 3.3 通过click事件得到元素的innerHtml
    • 3.4 冒泡事件
  • 四、高级知识
    • 4.1 fetch获取data.json中的数据
    • 4.2 axios获取data.json中的数据

一、基本语法

1.1 变量的定义

  • 定义变量
export default {
  data() {
    return {
      name: "jack",
      name1:"rose",
      name2:"lili"
    }
  },
}
  • 使用变量
  <div class="about" id="about">
    <h1>This is an about page</h1>
    <MyAddress></MyAddress>
    <p>{{name}}</p>
    <p>{{name1}}</p>
    <p>{{name2}}</p>
    <p>{{getData()}}</p>
  </div>

1.2 方法的定义

  • 方法的定义
  methods:{
    getData(){
      this.name = "jackssss";
      console.log("要输出名字了",this.name)
    }
  },
  • 方法的使用
 <div class="about" id="about">
    <h1>This is an about page</h1>
    <p>{{getData()}}</p>
  </div>

1.3 调用另一个组件

  • 导入组件
import Address from  "@/views/Address"
  • 注册组件
components:{
    MyAddress:Address
  }
  • 使用组件
  <div class="about" id="about">
    <h1>This is an about page</h1>
    <MyAddress></MyAddress>
  </div>

1.4 v-show,v-if,v-html

<template>
  <div class="about" id="about">
   <div v-html="innerMsg" v-show="show" v-if="exist"></div>
  </div>
</template>
<script>


export default {
  data() {
    return {
      innerMsg:"<p>这是一个内置的标签</p>",
      show: false,
      exist: true,
    }
  },
}
</script>

1.5 v-for,必须加key

  • 遍历数组
<template>
  <div id="app">
    <p v-for="key in order" :key="key">
      {{key}}
    </p>
  </div>
</template>
<script>
export default {
  data() {
    return {
     order:["111","222","333","444","555"]
    }
  }
}
</script>
  • 遍历结构体数组
  • (key,i):key是结构体的值,i是下标
<template>
  <div id="app">
    <p v-for="(key,value) in student" :key="key">
      {{key.id}}---{{key.name}}--{{key.age}}---{{value}}
    </p>
  </div>
</template>
<script>
export default {
  data() {
    return {
     order:["111","222","333","444","555"],
     student:[
       {id:1,name:"jack",age:12},
       {id:2,name:"rise",age:12},
       {id:3,name:"robin",age:12},
     ]
    }
  }
}
</script>

1.6 单选框展示

<template>
  <div id="app">
   <input type="radio" v-model="hobby" value="游泳">swim
   <input type="radio" v-model="hobby" value="打兵乓球">ping-pong
   <input type="radio" v-model="hobby" value="打羽毛球">table-tennis
  </div>
  <button @click="showHobby()">点击</button>
</template>
<script>
export default{
  data() {
    return {
      hobby:[]
    }
  },
  methods:{
    showHobby(){
      console.log(this.hobby)
    }
  }
}
</script>

在这里插入图片描述

1.7 复选框

  • type:radio,单选
  • type:checkbox,复选
<input type="checkbox" v-model="hobby" value="游泳">swim

1.9 减少,增加商品数量

  • 可以在点击事件中传入遍历的对象实例
<template>
  <div id="app">
     <p v-for="item in goods" :key="item.name">
       {{item.name}}---{{item.number}}
       <button @click="changeNumberAdd(item)">+</button>
       <button @click="changeNumberReduce(item)">-</button>
     </p>
  </div>
</template>
<script>
export default{
  data() {
    return {
      goods:[{
        name:"anple",
        number:9,
      },
      {
        name:"banana",
        number:9,
      },
      {
        name:"strawberry",
        number:9,
      },
      ],
      cal:''
    }
  },
  methods:{
    changeNumberAdd(item){
        console.log("商品的数量",item.number)
        item.number ++;
    },
     changeNumberReduce(item){
       console.log("商品的数量",item.number)
       if(item.number >= 1)
        item.number --;
    }
  }
}
</script>
  • 对上述代码的简化
    changeNumber(item,event){
      var inner = event.currentTarget.innerHTML;
      if(inner == '+'){
        item.number ++;
      }
      if(inner =='-' && item.number >= 1){
        item.number --;
      }
    }

二、出错

2.1 v-for报错

  • v-for必须添加key

三、琐碎知识

3.1 ref

  • 方法,同ref会以第后面的为准
  • 获取标签的value
    console.log(this.$refs.button.value)
  • 获取标签的innerHtml
    console.log(this.$refs.button.innerHTML)
 <button @click="changeNumberAdd(item)" ref="button" value="and">+</button>

3.2 通过id获取元素间的innerHTML

  • 方法,同id会以第一个为准console.log(document.getElementById(‘button’).innerHTML)
<button @click="changeNumberAdd(item)" ref="button" value="and" id="button">+</button>
       <button @click="changeNumberReduce(item)" ref="button"  value="red" id="button">-</button>

3.3 通过click事件得到元素的innerHtml

  • 传入event
<button @click="changeNumberAdd(item,$event)" ref="button" value="" id="button">+</button>
  • 得到event
  changeNumberAdd(item ,event){
        item.number ++;
        var el = event.currentTarget.innerHTML
         var ele = event.target.innerHTML
        console.log(el,ele)
        console.log("商品的数量",item.number)
    },

参考:vue.js click点击事件获取当前元素对象

3.4 冒泡事件

  • 点击li,出发li的click事件,也会引起ul的click事件,就像泡泡一样往上冒
<template>
  <div id="app">
    <ul @click="click1()">
      <li @click="click2()">ppp</li>
    </ul>
  </div>
</template>
<script>
export default{
  data() {
    return {
    }
  },
  methods:{
    click1(){
      console.log("这是一个冒泡")
    },
    click2(){
      console.log("这也是一个冒泡")
    }
  }
}
</script>
  • 冒泡事件的阻止
    @click.stop
<ul @click="click1()">ll
      <li @click.stop="click2()">ppp</li>
    </ul>

四、高级知识

4.1 fetch获取data.json中的数据

  • 注意:data.json存放在public路径下,而且他不认json文件的绝对路径
   methods:{
       getResource(){
           fetch("data.json").then(res=>{
               return res.json()
           }).then(res=>{
               console.log("得到数据")
               console.log(res[0].name,res[0].age, res[0].address)
           })
       }
   }

在这里插入图片描述

4.2 axios获取data.json中的数据

  • let axios = require(‘axios’)
 methods:{
       getResource(){
           fetch("data.json").then(res=>{
               return res.json()
           }).then(res=>{
               console.log("得到数据")
               console.log(res)
               console.log('axios',axios)
           })
       },
       getResByAxios(){
           axios.get('data.json').then(response=>{
               console.log("response",response.data)
           }).catch(error=>{
               console.log(error)
           })
       },
       getResAxiosConfig(){
           axios({
               methods:'get',
               data:{
                name:'jack',
               },
               url:'data.json',
               timeout: 1000,
           }).then(res=>{
               console.log("得到自己的一些数据",res.data)
           })
       }

   }
这篇关于vue 3 day(1)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!