Vue 知识扫盲-阿里云开发者社区

一、Vue 基础

1、什么是 Vue？

JavaScript 框架

简化 Dom 操作

响应式数据驱动

2、第一个 Vue 程序

（1）引入 vue2：

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

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

（2）编写第一个 Vue

创建 Vue 实例对象，设置 el 属性和 data 属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 基础</title>
</head>
<body>
    <div id ="app">
        {{ message }}
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"Hello Vue!"
            }
        })
    </script>
</body>
</html>

代码简要说明：

el:挂载点 ：表示挂载页面中的元素

{{ 属性 }} ：其中属性会被 data 中同名属性替换

el:挂载点注意事项：

el作用？

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

Vue实例的作用范围？

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

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

可以使用其他选择器，但是建议使用 Id 选择器

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

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

data:数据对象注意事项：

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

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

渲染复杂类型数据时，遵守 js 的语法即可（如：对象. 的方式 / 数组[索引]的方式……）

二、Vue 本地应用

1、v-text

v-text 注意事项：

v-text 作用是设置标签的内容（textContent）

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

<body>
    <div id ="app">
        <h2 v-text="message+'!'"> test </h2>
        <h2 v-text="info+'!'"> test </h2>
        <h2 > {{message + "!"}} test </h2>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"Hello Vue",
                info:"Hello World"
            }
        })
    </script>
</body>

2、v-html

v-html 注意事项：

v-html 指令的作用是设置元素的 innerHtml

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

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

<body>
    <div id ="app">
        <p v-text="content"></p>
        <p v-html="content"></p>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                content:"<a href = 'https://www.baidu.com/'>百度搜索</a>"
            }
        })
    </script>
</body>

3、v-on

v-on 注意事项：

v-on: 可替换为 @

v-on 作用是为元素绑定事件

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

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

<body>
    <div id ="app">
        <button @click="sub">➖</button>
        <span>{{num}}</span>
        <button @click="add">➕</button>

    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                num:1
            },
            methods: {
                add:function() {
                    if (this.num < 10) {
                        this.num++;
                    } else {
                        alert("最大了！");
                    }
                },
                sub:function() {
                    if (this.num > 0) {
                        this.num--;
                    } else {
                        alert("最小啦！");
                    }
                }
            }
        })
    </script>
</body>

4、v-on 补充

v-on 注意事项：

事件绑定的方法可以传入自定义参数
定义方法时，需要定义形参来接收传入的实参
事件后面跟上 . 操作符可以对时间进行限制（如 .enter可以限制触发的按键为回车）
v-on 文档传送门：https://cn.vuejs.org/v2/api/#v-on

  <body>
    <div id="app">
      <input type="button" value="点击" @click="doSomething('老铁',666)" />
      <input type="text" @keyup.enter="sayHello()" />
    </div>
    
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script>
        var app = new Vue({
          el:"#app",
          methods:{
            doSomething:function(p1,p2) {
              console.log(p1);
              console.log(p2);
            },
            sayHello:function(){
              alert("Hello！！！");
            }
          }
        })
      </script>
  </body>

5、v-show

v-show 注意事项：

根据表达式的真假，切换元素的显示和隐藏
原理是修改元素的display，实现显示隐藏
指令后面的内容，最终都会解析为布尔值
值为true元素显示，false元素隐藏

<body>
    <div id ="app">
        <button @click="IsShow">切换显示状态</button>
        <button @click="addAge">增加年龄</button>
        <img v-show="isShow" src="http://bd.xitong18.com/style/images/bd_logo1.png">
        <img v-show="age>=18" src="http://bd.xitong18.com/style/images/bd_logo1.png">


    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                age:17,
                isShow:false
            },
            methods: {
                IsShow:function() {
                    this.isShow = !this.isShow;
                },
                addAge:function() {
                    this.age++;
                }
            }
        })
    </script>
</body>

6、v-if

v-if 注意事项：

根据表达式的真假，切换元素的显示和隐藏（操纵 dom 元素）
v-show 底层更改的是元素样式，v-if 底层操纵的是 dom 树。
频繁操纵的元素用 v-show，反之用 v-if，因为频繁的操纵dom树对性能消耗比较大。

<body>
    <div id ="app">
        <button @click="IsShow">切换显示状态</button>
        <button @click="addAge">增加年龄</button>
        <img v-if="isShow" src="http://bd.xitong18.com/style/images/bd_logo1.png">
        <img v-if="age>=18" src="http://bd.xitong18.com/style/images/bd_logo1.png">


    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                age:17,
                isShow:false
            },
            methods: {
                IsShow:function() {
                    this.isShow = !this.isShow;
                },
                addAge:function() {
                    this.age++;
                }
            }
        })
    </script>
</body>

7、v-bind

v-bind 注意事项

v-bind 作用是设置元素的属性

v-bind:属性名可简写为 :属性名

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind 指令</title>
    <style>
        .active{
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <div id ="app">
        <img v-bind:src="imgSrc">
        <br>
        <img :src="imgSrc" :title="imgTile + '!!!'"
        :class="isActive?'active':''" @click="changeActive">
        <br>
        <img v-bind:src="imgSrc" :title="imgTile + '!!!'"
        :class="{active:isActive}" @click="changeActive">
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"http://bd.xitong18.com/style/images/bd_logo1.png",
                imgTile:"百度 Logo",
                isActive:false
            },
            methods: {
                changeActive:function() {
                    this.isActive = !this.isActive;
                }
            }
        })
    </script>
</body> 
</html>

8、v-for

v-for 注意事项：

根据数据生成列表结构

数组经常和 v-for 结合使用

语法是 (item,index) in 数据，其中 item 是每个数据，index 表示索引

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

<body>
    <div id="app">
      <button @click="add">增加动物</button>
      <button @click="remove">减少动物</button>
      
      <ul>
        <li v-for="(item,index) in arr">
          {{index+1}} 学生姓名：{{item}}.
        </li>
      </ul>
      <h2 v-for="item in animal" :title="item.name">
        动物名字： {{item.name}}
      </h2>
    </div>
    
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script>
        var app = new Vue({
          el:"#app",
          data:{
            arr:["张三","李四","王五","赵六"],
            animal:[
              {name:"老虎"},
              {name:"大象"},
              {name:"狮子"}
            ]
          },
          methods:{
            add:function() {
              this.animal.push({name:"大熊猫"});
            },
            remove:function() {
              this.animal.shift();
            }
          }
        })
      </script>
  </body>

9、v-model

v-model 注意事项：

获取和设置表单元素的值（双向数据绑定：修改两边任意一边的值，都会同步更新到另一边）

绑定的数据回合表单元素值相关联

  <body>
    <div id="app">
      <input type="button" value="修改 message" @click="modefy" />
      <input type="text" v-model="message" />
      <h2>{{message}}</h2>
    </div>
    
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script>
        var app = new Vue({
          el:"#app",
          data:{
            message:"摸摸鱼大队长!"
          },
          methods:{
            modefy:function() {
              this.message = "不摸鱼的程序员";
            }
          }
        })
      </script>
  </body>

三、Vue 生命周期

Vue 生命周期，指 Vue 对象从创建到销毁的整个过程。可以细分为如下八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）。

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	挂载前
mounted	挂载完成

beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

<!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>Vue-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            
        },
        mounted () {
            alert("vue挂载完成,发送请求到服务端")
        }
    })
</script>
</html>

四、Vue 网络应用

1、什么是 axios?

下面我将介绍一个非常流行的，且功能强大的网络请求库：axios。它的底层是基于 Ajax 的封装，因为功能单一，就是发送网络请求，所以容量很小，使用起来更加便捷，能非常方便的和其它框架或者库结合，比如 Vue。

2、axios 的基本使用

1、axios 引入

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

2、axios 在 Vue 中的基本使用

发送 get 请求：

axios({
    method:"get",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
}).then(function (resp){
    alert(resp.data);
})

发送 post 请求：

axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
    data:"username=zhangsan"
}).then(function (resp){
    alert(resp.data);
});

axios()是用来发送异步请求的，小括号中使用 js的JSON对象传递请求相关的参数：

method属性：用来设置请求方式的。取值为 get 或者 post。
url属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2。
data属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。

then() 需要传递一个匿名函数。我们将 then()中传递的匿名函数称为回调函数，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。

Axios还针对不同的请求，提供了别名方式的api：

方法	描述
axios.get(url [, config])	发送get请求
axios.delete(url [, config])	发送delete请求

axios.post(url [, data[, config]])	发送post请求
axios.put(url [, data[, config]])	发送put请求

例：

axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
    console.log(result.data);
})

axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {
    console.log(result.data);
})

axios 注意事项：

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

<!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>Ajax-Axios-案例</title>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图像</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职日期</th>
                <th>最后操作时间</th>
            </tr>

            <tr align="center" v-for="(emp,index) in emps">
                <td>{{index + 1}}</td>
                <td>{{emp.name}}</td>
                <td>
                    <img :src="emp.image" width="70px" height="50px">
                </td>
                <td>
                    <span v-if="emp.gender == 1">男</span>
                    <span v-if="emp.gender == 2">女</span>
                </td>
                <td>{{emp.job}}</td>
                <td>{{emp.entrydate}}</td>
                <td>{{emp.updatetime}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
       el: "#app",
       data: {
         emps:[]
       },
       mounted () {
          //发送异步请求,加载数据
          axios.get("请求地址").then(result => {
            console.log(result.data);
            this.emps = result.data.data;
          })
       }
    });
</script>
</html><body>
  <div id="app">
    <button @click="submit">点击访问</button>
    <h2>接口响应：{{response}}</h2>
  </div>
  
   <!-- 开发环境版本，包含了有帮助的命令行警告 -->
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
      <script>
      var app = new Vue({
        el:"#app",
        data:{
          response:"还没有任何信息！"
        },
        methods:{
          submit:function() {
            axios.post("地址?key=value&key2=values").then(
              function(response) {
                this.response = response;
                console.log(response);
              }
            )
          }
        }
      })
    </script>
</body>

小结

更多内容请移步：Vue 文档传送门

Vue 知识扫盲

一、Vue 基础

1、什么是 Vue？

2、第一个 Vue 程序

二、Vue 本地应用

1、v-text

2、v-html

3、v-on

4、v-on 补充

5、v-show

6、v-if

7、v-bind

8、v-for

9、v-model

三、Vue 生命周期

四、Vue 网络应用

1、什么是 axios?

2、axios 的基本使用

小结

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Vue 知识扫盲

一、Vue 基础

1、什么是 Vue？

2、第一个 Vue 程序

二、Vue 本地应用

1、v-text

2、v-html

3、v-on

4、v-on 补充

5、v-show

6、v-if

7、v-bind

8、v-for

9、v-model

三、Vue 生命周期

四、Vue 网络应用

1、什么是 axios?

2、axios 的基本使用

小结

热门文章

最新文章

相关课程

相关电子书