vue基础（二）

一、侦听器

1、什么是watch侦听器

watch允许开发者监视数据的变化，从而做出特定的操作。

语法如下：

<input type="text" v-model="username"/>

const vm = new vue({
  el:"#app",
  data:{
      username:""
  },
  watch:{
      //要监视哪个数据，就把数据名当作方法名即可
      username(newVal, oldVal){
         console.log('监听新旧值',newVal ,oldVal)
      }
  }
})

通常的应用场景：判断用户名是否被占用

2、immediate选项

方法格式的侦听器：有缺点，无法在刚进入页面时，自动触发；如果侦听的是一个对象，其属性变化，此时不会触发。

对象格式的侦听器：immediate选项，进入页面自动触发；可以监听对象的属性变化

<input type="text" v-model="username"/>

const vm = new vue({
  el:"#app",
  data:{
      username:""
  },
  watch:{
      //变成对象格式的侦听器
      username: {
        handler(newVal, oldVal){
          console.log(newVal,oldVal);
        },
        immediate:true
      }
  }
})

3、deep选项

<input type="text" v-model="info.username"/>

const vm = new vue({
  el:"#app",
  data:{
     info:{
         username:""
     }
  },
  watch:{
     info:{
        handler(newVal){
          console.log(newVal)
        },
        //开启深度监听，只要对象中任何属性发生变化，都会触发对象的侦听器
        deep:true
     }
  }
})

二、计算属性

1、什么是计算属性？

计算属性是通过一系列运算之后，最终得到一个属性值，这个值可以在模板结构和methods方法中使用。可以实现属性的复用，依赖的数据变化后都会重新计算。

例子：

<div>
  <input type="text" v-model.number = "a"/>
  <input type="text" v-model.number = "b"/>
  <input type="text" v-model.number = "c"/>
</div>

<div :style="{backgroundColor: rgb}">
   {{ rgb }}
</div>

var vm = new Vue({
  el:"#app",
  data:{
    a:0,
    b:0,
    c:0
  },
  computed:{
    rgb(){
      return `rgb(${this.a}, ${this.b},${this.c})`
    }
  }
})

2、使用axios发起基本的GET请求

官网：http://www.axios-js.com/

① 使用axios发起基本的get和post请求

//1、发起GET请求
axios({
  //请求方式
  method:'GET',
  //请求的地址
  url:"http://www.liulongbin.top.3006/api/getbooks",
  //url中的参数
  params:{
    id:1
  }
}).then(function(result){
   console.log(result)
})


//2、发起POST请求
axios({
  method:'POST',
  url:"http://www.liulongbin.top.3006/api/post",
  data:{
    name:'zs',
    age:20
  }
}).then(function(result){
   console.log(result)
})

② 结果的解构赋值

document.querySelector("#btnGet").addEventListener('click', async funciton(){
  //1、调用axios后，使用async/await进行简化，只要是返回的是promise实例都是适用
  //2、解构赋值时，使用 ： 重命名，从axios封装的大对象中，把data属性解构出来
  const { data: res} = await axios({
     methods:"GET",
     url:'http://www.liulongbin.top.3006/api/getbooks'
  })
  console.log(res.data)
})

③ 基于axios.get 和axios.post 发起请求

//axios.get请求
document.querySelector("#btnGet").addEventListener('click', async funciton(){
  const {data: res} = await axios.get('http://www.liulongbin.top.3006/api/getbooks', {
    params:{ id:1 }
  })
  console.log(res)
})


//axios.post请求
document.querySelector("#btnPost").addEventListener('click', async funciton(){
  const {data: res} = await axios.get('http://www.liulongbin.top.3006/api/post', {     
      name:'zs',
      gender:'女'
   })
  console.log(res)
})

三、vue-cli

1、介绍并安装vue-cli

单页面应用 ： 一个web网站中只有唯一的一个html页面，所有交互和功能都在一个页面实现

vue-cli是vue的标准开发工具，简化了程序员基于webpack创建工程化的vue项目的过程。

vue-cli官网

安装命令：

npm install -g @vue/cli

2、创建vue项目

vue create 项目名称

 3、vue项目运行的过程

通过main.js把App.vue渲染到index.html中

四、vue组件

1、组件的三个组成部分

• template  组件的模板结构
• script 组件的js行为
• style 组件的样式

2、在组件中定义methods方法，启用less语法以及唯一的根节点

<template>
  //只能有一个根节点
  <div>
      <h3>{{ username }}</h3>
      <button @click="changeName">修改用户名</button>
  </div>
</template>

<script>
export default{
 //data必须是一个函数
  data(){
   return{
     username: 'admin'
   }
  },
  methods:{
    changeName(){
       this.username = 'zs'
    }
  }
}

</script>

<style lang="less">
 h3{
  background:red;
}
</style>

本文借鉴b站课程而记录黑马程序员vue前端基础