Vue笔记（完结版）

目录

一、Vue简介

二、Vue基本知识

（一）简单知识

（二）本地应用（指令） 

三、axios与Vue

四、案例

（一）本地应用-计算机案例

（二）本地应用-图片切换案例

（三）本地应用-记事本案例

（四）网络应用-天气查询案例

#END（具体可观看b站黑马vue入门版）

---

一、Vue简介

1.JavaScript框架

2.简化Dom操作

3.响应式数据驱动

4.Vue实例的作用范围是什么？

Vue会管理el选项命中的元素及其内部的子元素

5.是否可以使用其他的选择器？

可以使用其他选择器，如类选择器，但是建议使用ID选择器

6.是否可以设置其他的dom元素？

可以使用其他双标签，不能使用HTML标签和body标签

二、Vue基本知识

（一）简单知识

1.el挂载点（对应一中的第五点：可以使用其他选择器，如类选择器，但是建议使用ID选择器）

1）代码：

    {{ message }}
    

      {{ message }}
      {{ message }}
    
    
    
    
  

2）结果：

2.data：数据对象

1）基本知识

① Vue中用到的数据定义在data中

② data中可以写复杂数据的类型

③ 渲染复杂类型数据时，遵守js语法

2）代码：

    

      {{ message }}
      
{{ school.name }} {{ school.mobile }}
      

        
{{ campus[0] }}
        
{{ campus[1] }}
      
    
    
    
    

3）结果：

（二）本地应用（指令） 

1.本地应用：内容绑定，事件绑定；显示切换，属性绑定；列表循环，表单元素绑定

2.内容绑定，事件绑定

1）v-text：

① 作用：设置标签的内容（textContent）

② 默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容

③ 内部支持写表达式

④ 代码：

    

      
1/20
      
1/20
      
{{ message +'!' }}1/20
    
    
    
    

⑤ 结果：

 2）v-html：

① 设置标签的innerHTML

② 内容中有HTML结构会被解析为标签

③ v-text指令无论内容是什么只会解析为文本

④ 解析文本使用v-text，解析html结构使用v-html

⑤ 代码：

⑥ 结果：

 3）v-on基础

① 作用：为元素绑定事件

② 事件名不需要写on，指令可以简写为@

③ 绑定的方法定义在methods属性中

④ 方法内部通过this关键字可以访问定义在data中数据

⑤ 代码：

    
    

      
      
      
      
{{food}}
    
    
    
    

⑥ 结果：（依次为 三个按钮点击结果，以及点击文本的事件）

 

补充：

① 事件绑定的方法写成函数调用的形式，可以传入自定义参数

② 定义方法时需要定义形参来接受传入的实参

③ 事件的后面跟上 .修饰符 可以对事件进行限制

④ .enter可以限制触发的案件为回车

⑤ 事件修饰符有很多种

⑥ 代码：

⑦ 结果：（从左往右的事件）

 

4）v-show指令 

① 作用：根据表达式的真假切换元素的显示状态

② 原理：修改元素的display，实现显示和隐藏

③ 指令后面的内容，最终都会解析为布尔值

④ 值为true元素显示，值为false元素隐藏

⑥ 数据改变之后，对应元素的显示状态会同步更新

⑦ 代码：

    

      切换显示图片状态
      累加年龄
      
      
    
  
  
  
  

⑧ 结果：

5）v-if指令

① 作用：根据表达式的真假切换元素的显示状态

② 原理：通过操纵dom元素来切换显示状态

③ 表达式的值为true，元素存在于dom树中；为false从dom树中移除

④ 频繁的切换v-show，反之使用v-if，前者的切换消耗小

⑤ 代码：

    

      点击显示或隐藏
      
今天吃草莓！
      
v-show修饰
      
好热！
    
  
  
  
  

⑥ 结果：

 6）v-bind指令（设置元素的属性，属性都写在元素的内部）

v-bind：属性+表达式

① 作用：为元素绑定属性

② 简写直接省略v-bind，只保留 :属性名

③ 需要动态的增删class建议使用对象的方式

④ 代码：

⑤ 结果：当鼠标移动到图片上时会有文字显示

7）v-for

① 根据数据生成列表结构

② 经常和数组结合使用

③ 语法是（item，index）in 数据名称（item代表每一项，index代表下标）

④ item和index可以结合其他的指令一起使用

⑤ 数组长度的更新会同步到页面上，是响应式的

⑥ 代码：

    

      

        
{{ index+1 }}.今天{{ it }}
      
      添加蔬菜
      删除蔬菜
      
{{item.name}}
    
  
  
  
  

⑦ 结果：

8）v-model（双向数据绑定）

① 作用：便捷的设置和获取表单元素的值

② 绑定的数据会和表单元素值相关联

③ 绑定的数据 <——> 表单元素的值

④ 代码：

    

      
      
      
      
{{ message }}
    
  
  
  
  

⑤ 结果：

 

三、axios与Vue

1.axios

① 必须先导入才能使用

② 使用get或post即可发送对应的请求

③ then方法中的回调函数会在请求成功或失败时触发

④ 通过回调函数的形参可以获取响应内容或错误信息

⑤ 代码：

⑥ 结果：

 

 2.将axios和vue结合

① axios回调函数中的this已经改变，无法访问到data中数据

② 把this保存起来，回调函数中直接使用

③ 和本地应用的最大区别就是改变了数据来源

④ 代码：

    

      
      
{{joke}}
    
  
  
  
  
  
  

⑤ 结果：

四、案例

（一）本地应用-计算机案例

1.代码：

1）html结构和vue

    
    

      
      

        -
        
{{ num }}
        +
      
    
  
  
  
  
  

2）css样式

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .input_num {
        margin: 100px auto;
        display: flex;
        justify-content: space-between;
        width: 220px;
        height: 60px;
        line-height: 60px;
        border-radius: 5px;
        overflow: hidden;
      }
      .input_num .left,
      .input_num .right {
        display: inline-block;
        width: 70px;
        border: none;
        background-color: lightcoral;
        text-align: center;
        font-size: 18px;
      }
      .input_num .center {
        display: inline-block;
        text-align: center;
        width: 100px;
        background-color: pink;
        font-size: 20px;
      }

2.结果：

 

（二）本地应用-图片切换案例

1.代码：

1）html结构和vue

2）css

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .box {
      position: relative;
      width: 800px;
      height: 600px;
      margin: 100px auto;
    }
    .box img {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: inherit;
      height: inherit;
      object-fit: cover;
    }
    .box .pre,
    .box .next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 60px;
      height: 60px;
      border-radius: 50%;
      z-index: 1;
      cursor: pointer;
      background-color: rgba(87, 85, 85, 0.4);
    }
    .box .pre {
      left: 10px;
    }
    .box .next {
      right: 10px;
    }

2.结果：

 

（三）本地应用-记事本案例

1.代码：

1）html结构和vue

  
    
    

      
      

        
小bin记事本
        
        
      
      

        

          
          

            
{{ index+1 }}
            
{{item}}
            
×
          
        
      
      
      
      

        

          
          {{list.length}}  items left
        
        

          Clear
        
      
    
  
  
  
  

2）css样式

2.结果：

 

 

（四）网络应用-天气查询案例

1.代码：

1）html结构

    
    
    
    
  
  
    

      
天 气 预 报
      

        
        
        

          北京
          上海
          广州
          深圳
        
      
      

        

          

            
{{ item.type }}
            
{{ item.low }} ~ {{ item.high }}
            
{{ item.date }}
          
        
      
    
  
  

2）css样式

3）vue

/**
 * 请求地址：http://wthrcdn.etouch.cn/weather_mini
 * 请求方法：get
 * 请求参数：city（城市名）
 * 相应内容：天气信息
 *
 * 1. 点击回车
 * 2. 查询数据
 * 3. 渲染数据
 *
 * ① 应用的逻辑代码建议与页面分离，使用单独的js文件编写
 * ② axios回调函数中this指向改变了，需要额外保存this
 * ③ 服务器返回的数据比较复杂时，获取时要注意层级结果
 *
 *
 * ① 自定义参数可以让代码的复用性更高
 * ② methods中定义的方法内部，可以通过this关键字点出其他的方法
 */
var app = new Vue({
  el: "#app",
  data: {
    city: "",
    weatherList: [],
  },
  methods: {
    searchWeather: function () {
      //调用接口
      //保存this
      var that = this;
      axios
        .get("http://wthrcdn.etouch.cn/weather_mini?city=" + that.city)
        .then((value) => {
          that.weatherList = value.data.data.forecast;
        })
        .catch((reason) => {
          console.warn(reason);
        });
    },
    changeCity: function (city) {
      this.city = city;
      this.searchWeather();
    },
  },
});

2.结果：

 

#END（具体可观看b站黑马vue入门版）