这是我参与【第四届青训营】笔记创作活动的第4天。

1、Vue 基础

1.1、Vue 简介

（1）JavaScript 框架

（2）简化

（3）响应式数据驱动

开发环境的版本（适合初学者）：

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

生产环境的版本（mini版，速度较快，但是没有提示）：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

1.2、第一个 Vue 程序

<!DOCTYPE html> 
<html lang="en"> 
    <head>     
        <meta charset="UTF-8">     
        <meta http-equiv="X-UA-Compatible" content="IE=edge">     
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>     
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->     
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> 
    </head> 
    <body>     
        <div id="app">
            {{ message }}     
        </div> 
    </body> 
    <script>     
        var app = new Vue({         
            el: '#app',         
            data: {             
                message: 'Hello Vue!'         
            }}) 
    </script> 
</html>

1.3、el：挂载点

（1）Vue 实例的作用范围？

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

（2）是否可以使用其他的选择器

可以，但是建议使用 ID 选择器

（3）是否可以设置其他的dom元素？

可以使用其他的双标签，但是不能使用 HTML 和 BODY 标签

1.4、data：数据对象

Vue 中用到的数据定义在 data 中
data 中可以写复杂类型的数据
渲染复杂类型数据时，遵守 JS 语法即可

2、本地应用

2.1、v-text

v-text 指令的作用：设置标签的内容（text-Content）
默认写法会替换全部内容，使用差值表达式 {{}} 可以替换成指定内容
内部支持写表达式

2.2、v-html

v-html 指令的作用是：设置元素的 innerHTML
内容中有 html 结构会被解析为标签
v-text 指令无论内容是什么，只会解析为文本
解析文本使用 v-text，需要解析 html 结构使用 v-html

2.3、v-on

v-on 指令的作用是：为元素绑定事件
事件名不需要写 on
指令可以简写为 @
绑定的方法定义在 methods 属性中
方法内部通过 this 关键字可以访问定义在 data 中数据

案例 1：实现数量框

<!DOCTYPE html> 
<html lang="en"> 
<head>     
    <meta charset="UTF-8">     
    <meta http-equiv="X-UA-Compatible" content="IE=edge">    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Document</title>     
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->     
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> 
</head> 
<body>     
    <div id="app">         
        <div class="inputnum">             
            <button @click="sub">-</button>            
            <span>{{ num }}</span>             
            <button @click="add">+</button>         
        </div>    
    </div> 
</body> 
<script>     
    var app = new Vue({        
        el: '#app',
        data: {            
            num: 1         
        },         
        methods: { 
            add: function() {  
                console.log(this.num)                 
                this.num = this.num >= 3 ? 3 : ++this.num;             
            },             
            sub: function() {      
                console.log("-");               
                this.num = this.num <= 0 ? 0 : --this.num;            
                } 
        }     
    }) 
</script> 
</html>

总结：

创建 Vue 示例时：el(挂载点），data(数据），methods（方法）
v-on 指令的作用时绑定事件，简写为 @
方法中通过 this，关键字获取 data 中的数据
v-text 指令的作用是：设置元素的文本值，简写为 {{}}
v-html 指令的作用是：设置元素的 innerHTML

2.4、v-show

v-show 指令的作用是：根据真假切换元素的显示状态
原理是修改元素的 display，实现显示隐藏
指令后面的内容，最终都会背解析为布尔值
值为 true 元素显示，值为 false 元素隐藏
数据改变之后，对应元素的显示状态会同步更新

2.5、v-if

v-if 指令的作用是：根据表达式的真假切换元素的显示状态
本质是通过操纵 dom 元素来切换显示状态
表达式的值为 true，元素存于 dom 树中，为 false，从 dom 树中移除
频繁的切换使用 v-show，反之使用 v-if，前者的切换消耗小

2.6、v-bind

v-bind 指令的作用是：为元素绑定属性
完整写法是 v-bind：属性名
简写的话可以直接忽略 v-bind，只保留：属性名
需要动态的增删 class 建议使用对象的方式

案例2：图片切换

定义图片数组
添加图片索引
绑定 src 属性
图片切换逻辑
显示状态切换

<div>
    <img:src="imgArr[index]" />
    <a href="#" @click="prev" v-show="条件">上一张</a>
    <a href="#" @click="next" v-show="条件">下一张</a>
</div>

var app = new Vue({
    el: "#app",
    data: {
        imgArr[],
        inddex:()
    },
    methods:{
        prev: function(){},
        next: function(){}
    }
})

列表数据使用数组保存
v-bind 指令可以设置元素属性，比如 src
v-show 和 v-if 都可以切换元素的显示状态，频繁切换用 v-show

2.7、v-for

v-for指令的作用是：根据数据生成列表结构
数组经常和v-for结合使用
语法是（item，index）in 数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的

2.8、v-on 补充

事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时，需要定义形参来接收传入的实参
事件的后面跟上.修饰符可以对事件进行限制
enter 可以限制触发的按键为回车
事件修饰符有多种

2.9、v-model

v-model 指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据 <--> 表单元素的值

总结：

列表结构可以通过 v-for 指令结合数据生成
v-on 结合事件修饰符可以对事件进行限制，比如 .enter
v-on 在绑定事件时可以传递自定义参数
通过 v-model 可以快速的设置和获取表单元素的值
基于数据的开发方式

3、网络应用

Vue 结合网络数据开发应用

3.1、axios：功能强大的网络请求库

网络引入地址：

<script src="http://unpkg.com/axios/dist/axios.min.js></script>"

语法：

<script src="http://unpkg.com/axios/dist/axios.min.js></script>
axios.get(地址?key=value&key2=values).then(function(response){},function(err){})
axios.post(地址,{key=value&key2=values}).then(function(response){},function(err){})

测试接口：

代码示例：

axios 必须先导入才可以使用
使用 get 或者 post 方法即可发送对应的请求
then 方法中的回调函数会在请求成功或失败的时候触发
通过回调函数的形参可以获取响应内容，或错误信息

axios 回调函数中的 this 已经改变，无法访问到 data 中的数据
把 this 保存起来，回调函数中直接使用保存的 this 即可
和本地应用的最大区别就是改变了数据来源

案例4：天气预报查询

<!DOCTYPE html> 
<html lang="en"> 
<head>     
    <meta charset="UTF-8">     
    <meta http-equiv="X-UA-Compatible" content="IE=edge">     
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Document</title>     
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->     
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> 
<body>     
    <div id="app">         
        <input type="text" v-model="city" @keyup.enter="searchWeather()">  
        <button>搜索</button>         
        <div>             
            <span @click="searchWeather('上海')">上海</span>             
            <span @click="searchWeather('北京')">北京</span>             
            <span @click="searchWeather('长沙')">长沙</span>         
        </div>         
        <ul>             
            <li v-for="item in weatherList">                 
                <div>{{ item.type }}</div>                 
                <div>{{item.low}}{{item.high}}</div>                 
                <div>{{item.date}}</div>             
            </li>        
        </ul>     
    </div> 
</body> 
<script>     
    var app = new Vue({         
        el: '#app',         
        data: {             
            city: '',             
            weatherList: []         
        },         
        methods: {             
        searchWeather: function(c) {                 
            if (c != null) {                     
                this.city = c;
        }                
        axios.get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.city}`).then((response) => {  
        // 箭头函数的this指向定义作用域
        this.weatherList = response.data.data.forecast 
        }).catch((err) => {
            console.log(err);
        })}}}) 
</script> 
</html>