Vue 知识扫盲

简介: 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:挂载点注意事项:

  1. el作用?
  • 用来设置 Vue 实例挂载(管理)的元素
  1. Vue实例的作用范围?
  • Vue 会管理 el 选项命中的元素以及其内部的后代元素
  1. 是否可以使用其他选择器?
  • 可以使用其他选择器,但是建议使用 Id 选择器
  1. 是否可以设置其他的dom元素?
  • 可以使用其他双标签,不能使用 HTMLBODY

data:数据对象注意事项:

  1. Vue 中用到的数据定义在 data
  2. data 中可以写复杂类型的数据
  3. 渲染复杂类型数据时,遵守 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 注意事项:

  1. axios 必须先导入才可以使用
  2. 使用 get 或 post 方法即可发送对应请求
  3. then 方法中的回调函数会在请求成功或请求失败时触发
  4. 通过回调函数的形参可以获取响应内容,或错误信息
  5. 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 文档传送门


相关文章
|
7天前
|
JavaScript 前端开发 开发者
vue3+ts配置跨域报错问题解决:> newpro2@0.1.0 serve > vue-cli-service serve ERROR Invalid options in vue.
【6月更文挑战第3天】在 Vue CLI 项目中遇到 &quot;ERROR Invalid options in vue.config.js: ‘server’ is not allowed&quot; 错误是因为尝试在 `vue.config.js` 中使用不被支持的 `server` 选项。正确配置开发服务器(如代理)应使用 `devServer` 对象,例如设置代理到 `http://xxx.com/`: ```javascript module.exports = { devServer: {
22 1
|
1天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
6 2
|
1天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
7 3
|
1天前
|
JavaScript 前端开发 API
【vue实战项目】通用管理系统:学生列表
【vue实战项目】通用管理系统:学生列表
11 2
|
1天前
|
缓存 JavaScript
【vue实战项目】通用管理系统:首页
【vue实战项目】通用管理系统:首页
8 2
|
1天前
|
JavaScript 前端开发 数据安全/隐私保护
【vue实战项目】通用管理系统:登录页
【vue实战项目】通用管理系统:登录页
8 2
|
1天前
|
JavaScript 网络架构
Vue中三个点(...)的意思
**孤立元素**:通过扩展运算符(`...`)可以将数组元素打印出来,如 `console.log(...iArray)`。 - **添加元素**:可以使用扩展运算符结合数组合并来添加元素,例如 `[&#39;0&#39;, ...iArray, &#39;4&#39;]` 或者使用 `push` 方法。 - **删除元素**:通过解构赋值取出数组第一个元素,如 `const [first, ...last] = arr`。 - **数组合并**:可以使用扩展运算符将多个数组合并,如 `[...arr1, ...arr2]`。
5 0
|
1天前
|
JavaScript 前端开发
vue filters过滤器传多个参数
这段内容展示了如何在HTML和JavaScript中使用过滤器(filter)。在HTML中,通过`{{变量 | 过滤器名(参数)}}`的方式传递参数给过滤器。在JavaScript中,定义过滤器函数并接收参数,如`filterAa(aa, bb, cc)`,其中`aa`, `bb`, `cc`分别代表过滤器接收到的第1至第3个参数。示例逐步演示了传1个、2个到3个参数给过滤器的过程。
9 1
|
1天前
|
JavaScript
vue知识点
vue知识点
8 3
|
2天前
|
JavaScript
vue数据的双向绑定
vue数据的双向绑定