[JavaScript知识库]vue 3 day(1)

一、基本语法

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)
           })
       }

   }