【学习笔记】5个小案例快速入门VUE（含axios）

VUE基础

VUE简介

1. JavaScript框架
2. 简化Dom操作
3. 响应式数据驱动

第一个VUE程序

1. 导入开发版本的VUE.JS（代码提示比较全）
2. 创建VUE实例对象，设置el属性和data属性
3. 使用简洁的模板语法把数据渲染到页面上（{ {两个大括号}}）

   

   {
    {msg}}
   

   

   

• Vue实例的作用范围是什么？
  Vue会管理el选项命中的元素及其内部的后代元素
• 是否可以使用其他的选择器？
  可以使用其他的选择器，但是建议使用ID选择器，因为ID是唯一的
• 一个Vue实例可以挂载多个元素吗？
  不可以，只可以挂载到第一个匹配到的元素
• 是否可以设置其他的dom元素呢？
  可以使用其他的双标签，不能使用和，建议使用
  ，因为它没有多余的样式

el:挂载点

el是用来设置Vue实例挂载（管理）的元素

data:数据对象

1. Vue实例需要使用的数据我们都会定义到data中
2. data中可以写复杂类型的数据
3. 渲染复杂类型数据时，遵循js的语法即可

   

     {
    {msg}}
     
  //app的后代元素也可以使用app的data数据
         {
    { arry[0] }},{
    {arry[1]}}
     
     {
    {obj.name}}{
    {obj.age}}
   

   

本地应用

本章学习用Vue实现各种网页效果，不同于以前的获取元素->操作他们，在Vue中，我们使用的是一系列以v-开头的特殊语法来做这些事情，这些语法叫做Vue指令，Vue指令只能对已被挂载的元素使用

v-text

1. v-text指令的作用是：设置标签的内容（textContent）
2. 默认写法会替换元素内全部内容（包括标签，文本等），使用差值表达式{ {}} 可以只替换括号内容；差值表达式就是v-text的缩写版
3. 支持表达式，如字符串拼接等

v-html

1. v-html指令的作用是：设置元素的innerHTML
2. 属性值中的html结构会被解析为标签
3. v-text指令无论什么内容都只解析为文本，所以需要解析html结构的时候要用v-html

v-on

1. v-on指令的作用是：为元素绑定事件：v-on:click="myFn"
2. 事件名不需要写on，如onclick直接写click即可
3. 指令可以简写为@，如@click="myFn"
4. 绑定的方法需要定义在Vue实例的methods属性中
5. 方法内部通过this关键字可以访问定义在data中的数据
6. 方法内部通过this.方法名()可以调用其他methods内的方法

   

     {
    {msg}}
   

   var app = new Vue({
      el: '.app',
      data: {
          msg: '我是一条msg'
      },
      methods: {
          myFn: function () {
              console.log(this.msg); //通过this可以取得data的数据
          }
      }
   })

v-on补充

1. 事件绑定的方法可以写成函数调用的形式，可以传入自定义参数
2. 定义方法时需要定义形参来接收传入的实参，传参时字符串需要加引号
3. 事件的后面跟上.修饰符可以对事件进行限制

    

        //触发点击事件时执行fn函数，同时传递实参‘你好’，注意传递字符型时要加引号
        点我
        
        
        //触发keyup事件时，只有敲下enter键的时候才会执行fn函数
    

    

v-show

根据表达式值的真假，切换元素的显示和隐藏

1. v-show指令的作用是：根据它后面表达式的真假切换元素的显示状态
2. 原理是修改元素的display，实现显示隐藏
3. 指令后面的值最终会被解析为布尔值
4. 值为true元素显示，值为false元素隐藏

   

      //true显示，false隐藏

      //isShow的值保存在data中，为true显示，为false隐藏
    
      //num>20则为true，num的值保存在data中
   

v-if

v-if和v-show的作用一样，都是根据它们后面表达式的真假，切换元素的显示与隐藏；但v-show切换的是元素的display样式，而v-if切换的不是样式，而是直接操纵dom树结构

元素的显示与隐藏需要频繁的切换则使用v-show，反之使用v-if，前者的切换资源消耗较小

v-bind

1. v-bind指令的作用是：为元素绑定属性
2. 完整写法是v-bind:属性名
3. 简写的话可以直接省略v-bind，只保留:属性名
4. 需要动态的增删class可以使用三元表达式，但更建议使用对象的方式

    
    //使用三元表达式的形式：如果isActive为真，则添加active类名；如果为假，则添加空类名

     
    //使用对象的形式：这句话的意思是active类名是否生效取决于isActive的真假

v-for

1. v-for作用：根据数据生成列表结构
2. 数组经常和v-for指令结合使用
3. 语法：(item,index) in 数组名
4. item和index可以结合其他指令一起使用
5. 数组的更新会实时同步到页面上

简单数组类型

语法：

v-for="(item,index) in arr"

item名可以修改，要符合命名规则；
item代表每一个数组元素（循环生成），可以用{ {item}}来调用
in：关键字，不可修改
arr：数组名

数组有几个元素就生成几个

，如果要打印出每个数组元素，在

里面添加{ { item }}即可

要生成多个

，所以v-for需要写到

标签上
如果要生成多个其他标签，也可以写到任意其他标签上

复杂数组类型

arr可以是简单数组类型也可以是复杂数组类型，如对象数组

//创建一个对象数组apple
data:{
    apple:[
        {name:'apple'},
        {color:'red'}
    ]
}

如果arr是一个对象数组，如果直接输出item会按照对象字面量的格式输出，数组里有几个对象就生成几个

，每个

输出一个对应的对象

可以通过item.属性来调用对象的属性值，依然生成对象个数的

，如果某个对象没有该属性，则会输出一个空的

，含有该属性的对象会在

中输出对应的属性值

v-model

1. 获取和设置表单元素的值，也叫双向数据绑定
2. 绑定的数据会和表单元素值相关联
3. 修改data中绑定的数据会改变表单元素的值（网页中input框展示的值）；修改表单元素的值（在网页的input框里打字）会改变data中的数据

    

        //将表单的值与“msg”绑定
        
        {
    {msg}}
    

    

网络应用

axios

axios是一基于ajax的功能强大的网络请求库

引入axios

使用axios

GET请求

   axios.get(地址?key=value&key2=value2).then(function (response){
      //请求成功执行的回调函数，通过形参可以获取请求的内容
   },function (err){
      //请求失败执行的回调函数，通过形参可以获得错误相关信息
   })

POST请求

   axios.post(地址,{key:value,key2:value2}).then(function (response){
      //请求成功执行的回调函数，通过形参可以获取请求的内容
   },function (err) {
      //请求失败执行的回调函数，通过形参可以获得错误相关信息
   })

axios + Vue

1. axios回调函数中的this已经改变，无法访问到data中数据
2. 在axios请求之前我们先把this保存给that，等请求之后直接使用that即可
3. 网络应用和本地应用的最大区别就是改变了数据来源

//实现点击按钮即可获取一条笑话
   let app = new Vue({
      el: "#app",
      data: {
          joke: '我是一个笑话，哈哈哈哈哈哈'
      },
      methods: {
          getJoke: function () {
              let that = this; //提前将this保存给that
              axios.get('https://autumnfish.cn/api/joke/list?num=3').then(function (response) {
                  that.joke = response.data.jokes[1]; //为data中的joke赋值，注意，本行的data是response返回的对象的一条属性，其值为对象，而jokes又是data对象中的一个属性，其值为数组，本行的data和jokes与Vue的data和joke无关
              }, function (err) {
                  console.log(err);
              })
          }
      }
   })