Vue教程

2022年4月26日 19:37 阅读(870)

Vue基础

Vue简介

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

第一个Vue程序

导入开发版本的Vue.js
创建Vue实例对象, 设置el属性和data属性
使用简洁的模板语法把数据渲染到页面上

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>第一个vue程序</title>
</head>

<body>
  <div id="qdkf">
    {{ message }}
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el:"#qdkf",
      data:{
        message:"前端开发网（www.qdkf.wang） "
      }
    })
  </script>
</body>

</html>

el:挂载点

el是用来设置Vue实例挂载（管理）的元素。
Vue会管理el选项命中的元素及其内部的后代元素。
可以使用其他的选择器,但是建议使用ID选择器。
可以使用其他的双标签,不能使用HTML和BODY。

<div id="qdkf">
      {{ message }}
    </div>
var qdkf = new Vue({
            el:"#qdkf",
            data:{
     message:"前端开发网(www.qdkf.wang)"
            }
        })

data:数据对象

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

<div id="qdkf">
      {{ message }}
    </div>
var qdkf = new Vue({
            el:"#app",
            data:{
    message:"前端开发网(www.qdkf.wang)",
    array:[],
    obj:{},
            }
        })

本地应用

内容绑定、事件绑定

v-text

v-text指令的作用是:设置标签的内容(textContent)
默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容
内部支持写表达式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-text指令</title>
</head>

<body>
    <div id="app">
        <h2 v-text="message+'!'">www.qdkf.wang</h2>
        <h2 v-text="info+'!'">www.qdkf.wang</h2>
        <h2>{{ message +'!'}}www.qdkf.wang</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"前端开发网",
                info:"前端开发网教程研发"
            }
        })
    </script>
</body>

</html>

v-html

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-html指令</title>
</head>

<body>
    <div id="qdkf"></div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var qdkf = new Vue({
            el:"#qdkf",
            data:{
                content:"前端开发网"
            }
        })
    </script>
</body>

</html>

v-on基础

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

<div id="qdkf">
      <input type="button" value="事件绑定" v-on:click=“toDo">
      <input type="button" value="事件绑定" v-on:monseenter=“toDo">
      <input type="button" value="事件绑定" v-on:dblclick=“toDo">
      <input type="button" value="事件绑定" @dblclick=“toDo">
    </div>

var qdkf = new Vue({
            el:"#qdkf",
            methods:{
              toDo:function(){
                // 逻辑
              }
            }
        })

计算器实例：

1.data中定义数据:比如num。
2.methods中添加两个方法:比如add(递增),sub(递减)。
3.使用v-text将num设置给span标签。
4.使用v-on将add,sub分别绑定给+,-按钮。
5.累加的逻辑:小于10累加,否则提示。
6.递减的逻辑:大于0递减,否则提示。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>计数器</title>
    <link rel="stylesheet" href="./css/index.css">
  </head>
  <body>
    <div id="qdkf">
      <!-- 计数器 -->
      <div class="input-num">
        <button @click="sub">
          -
        </button>
        <span>{{ num }}</span>
        <button @click="add">
          +
        </button>
      </div>
      <img
      src="https://qdkf.wang/wp-content/uploads/2022/04/qdkflogo.png"
      alt=""
    />
    </div>
  </body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 编码 -->
<script>
  // 创建Vue实例
  var qdkf = new Vue({
    el: "#app",
    data: {
      num: 1,
      min: 0,
      max: 12
    },
    methods: {
      sub() {
        if (this.num > this.min) {
          this.num--;
        } else {
          alert("已经是最小值了");
        }
      },
      add() {
        if (this.num < this.max) {
          this.num++;
        } else {
          alert("已经是最大值了");
        }
      }
    }
  });
</script>

显示切换、属性绑定

v-show

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>v-show指令</title>
  </head>
  <body>
    <div id="app">
      <input type="button" value="切换显示状态" @click="changeIsShow">
      <input type="button" value="点击量" @click="addHits">
      <img v-show="isShow" src="https://qdkf.wang/wp-content/uploads/2022/04/qdkflogo.png" alt="">
      <img v-show="hits>=10000" src="https://qdkf.wang/wp-content/uploads/2022/04/qdkflogo.png" alt="">
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el:"#app",
        data:{
          isShow:false,
          hits:9999
        },
        methods: {
          changeIsShow:function(){
            this.isShow = !this.isShow;
          },
          addHits:function(){
            this.hits++;
          }
        },
      })
    </script>
  </body>
</html>

v-if

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-if指令</title>
</head>
<body>
    <div id="qdkf">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isShow">前端开发网www.qdkf.wang</p>
        <p v-show="isShow">前端开发网 v-show修饰</p>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var qdkf = new Vue({
            el:"#qdkf",
            data:{
                isShow:false
            },
            methods: {
                toggleIsShow:function(){
                    this.isShow = !this.isShow;
                }
            },
        })
    </script>
</body>

</html>

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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-bind指令</title>
    <style>
        .active{
            border: 3px solid rgb(102, 175, 243);
        }
    </style>
</head>

<body>
    <div id="qdkf">
        <img v-bind:src="imgSrc" alt="">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var qdkf = new Vue({
            el:"#qdkf",
            data:{
                imgSrc:"https://qdkf.wang/wp-content/uploads/2022/04/qdkflogo.png",
                imgTitle:"前端开发网",
                isActive:false
            },
            methods: {
                toggleActive:function(){
                    this.isActive = !this.isActive;
                }
            },
        })
    </script>
</body>

</html>

图片切换案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>图片切换案例</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>

  <body>
    <div id="mask">
      <div class="center">
        <h2 class="title"><img src="https://qdkf.wang/wp-content/uploads/2022/04/qdkflogo.png" alt=""> www.qdkf.wang</h2>
        <img :src="imgList[index]" alt="" />
        <a
          href="javascript:void(0)"
          @click="prev"
          class="left"
          v-show="index>0"
        >
          <img src="./images/prev.png" alt="" />
        </a>
        <a
          href="javascript:void(0)"
          @click="next"
          class="right"
          v-show="index<imgList.length-1"
        >
          <img src="./images/next.png" alt="" />
        </a>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
      const app = new Vue({
        el: "#mask",
        data: {
          imgList: [
            "https://qdkf.wang/wp-content/uploads/2022/04/webbz.png",
            "https://qdkf.wang/wp-content/uploads/2022/04/hzmx_1.png",
            "https://qdkf.wang/wp-content/uploads/2022/05/lckz.png",
            "https://qdkf.wang/wp-content/uploads/2022/05/domshu.png",
            "https://qdkf.wang/wp-content/uploads/2022/05/fxtxgc.png",

          ],
          index: 0
        },
        methods: {
          // 上一张
          prev() {
            this.index--;
          },
          // 下一张
          next() {
            this.index++;
          }
        }
      });
    </script>
  </body>
</html>

列表循环、表单元素绑定

v-for

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-for指令</title>
</head>

<body>
    <div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">

        <ul>
            <li v-for="(course,index) in arr">
                {{ index+1 }}前端开发网教程:{{ course }}
            </li>
        </ul>
        <h2 v-for="item in jiaoCheng" v-bind:title="item.name">
            {{ item.name }}
        </h2>
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                arr:["HTML","CSS","JavaScript","web移动开发","Vue"],
                jiaoCheng:[
                    {name:"webApi"},
                    {name:"jquery"},
                    {name:"React"}
                ]
            },
            methods: {
                add:function(){
                    this.jiaoCheng.push({ name:"uniapp" });
                },
                remove:function(){
                    this.jiaoCheng.shift();
                }
            },
        })
    </script>
</body>

</html>

v-on补充

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-on补充</title>
</head>

<body>
    <div id="app">
        <input type="button" value="点击" @click="doIt(666,'hello world')">
        <input type="text" @keyup.enter="sayHi">
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            methods: {
                doIt:function(p1,p2){
                    console.log("前端开发网");
                    console.log(p1);
                    console.log(p2);
                },
                sayHi:function(){
                    alert("请重新输入，哈哈！");
                }
            },
        })
    </script>
</body>

</html>

v-model

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-model指令</title>
</head>

<body>
    <div id="app">
        <input type="button" value="修改message" @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{{ message }}</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"前端开发网"
            },
            methods: {
                getM:function(){
                    alert(this.message);
                },
                setM:function(){
                    this.message ="www.qdkf.wang";
                }
            },
        })
    </script>
</body>

</html>

ToDoList案例：

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

<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>ToDoList</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta name="robots" content="noindex, nofollow" />
  <meta name="googlebot" content="noindex, nofollow" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>

<body>
  <!-- 主体区域 -->
  <section id="todoapp">
    <!-- 输入框 -->
    <header class="header">
      <h1>ToDoList</h1>
      <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务"
        class="new-todo" />
    </header>
    <!-- 列表区域 -->
    <section class="main">
      <ul class="todo-list">
        <li class="todo" v-for="(item,index) in list">
          <div class="view">
            <span class="index">{{ index+1 }}.</span>
            <label>{{ item }}</label>
            <button class="destroy" @click="remove(index)"></button>
          </div>
        </li>
      </ul>
    </section>
    <!-- 统计和清空 -->
    <footer class="footer" >
      <span class="todo-count">
        <strong>1</strong> items left
      </span>
      <button class="clear-completed">
        Clear
      </button>
    </footer>
  </section>
  <!-- 底部 -->
  <footer class="info">
    <p>
      <a href="https://qdkf.wang/"><img src="https://qdkf.wang/wp-content/uploads/2022/04/qdkflogo.png" alt="" /></a>
    </p>
  </footer>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: "#todoapp",
      data: {
        list: ["上午写代码", "下午写代码", "晚上写代码"],
        inputValue: "请输入今天要做的事情"
      },
      methods: {
        add: function () {
          this.list.push(this.inputValue);
        },
        remove:function(index){
          console.log("删除");
          console.log(index);
          this.list.splice(index,1);
        }
      },
    })
  </script>
</body>

</html>

网络应用

网络请求库axios

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

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

axios文档
https://github.com/axios/axios

axios+vue

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios+vue</title>
</head>

<body>
    <div id="app">
        <input type="button" value="获取名人名言" @click="getMingy">
        <p> {{ mingyan }}</p>
    </div>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        /*  每日一份毒鸡汤，清醒你的人生
            接口地址： https://v.api.aa1.cn/api/api-wenan-dujitang/index.php
            返回格式： JSON
            请求方式： GET
            请求示例： https://v.api.aa1.cn/api/api-wenan-dujitang/index.php?aa1=json
        */
        var app = new Vue({
            el:"#app",
            data:{
                mingyan:"沉沉的黑夜都是白天的前奏。 —— 郭小川"
            },
            methods: {
                getMingy:function(){
                    // console.log(this.mingyan);
                    var that = this;
                    axios.get("https://v.api.aa1.cn/api/api-wenan-mingrenmingyan/index.php?aa1=text").then(function(response){
                        // console.log(response)
                        console.log(response.data);
                        // console.log(this.mingyan);
                        that.mingyan = response.data;
                    },function (err) {  })
                }
            },
        })

    </script>
</body>

</html>

天气预报案例

1.按下回车(v-on .enter)
2.查询数据(axios 接口 v-model )
3.渲染数据(v-for 数组 that)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>天气预报</title>
  <link rel="stylesheet" href="css/reset.css" />
  <link rel="stylesheet" href="css/index.css" />
</head>

<body>
  <div class="wrap" id="app">
    <div class="search_form">
      <div class="logo"><img src="img/logo.png" alt="logo" /></div>
      <div class="form_group">
        <input type="text" v-model="city"  @keyup.enter="searchWeather"   class="input_txt" placeholder="请输入查询的天气"/>
        <button class="input_sub">
          搜 索
        </button>
      </div>
      <div class="hotkey">
        <a href="javascript:;">北京</a>
        <a href="javascript:;">上海</a>
        <a href="javascript:;">广州</a>
        <a href="javascript:;">深圳</a>
      </div>
    </div>
    <ul class="weather_list">
      <li v-for="item in weatherList">
        <div class="info_type"><span class="iconfont">{{ item.type }}</span></div>
        <div class="info_temp">
          <b>{{ item.low }}</b>
          ~
          <b>{{ item.high }}</b>
        </div>
        <div class="info_date"><span>{{ item.date }}</span></div>
        <div class="info_date"><span>{{ item.fengxiang}}</span></div>
      </li>
    </ul>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 官网提供的 axios 在线地址 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <!-- 自己的js -->
  <script>
/*
  请求地址:http://wthrcdn.etouch.cn/weather_mini
  请求方法:get
  请求参数:city(城市名)
  响应内容:天气信息

  1. 点击回车
  2. 查询数据
  3. 渲染数据
  */
 var app = new Vue({
     el:"#app",
     data:{
         city:'',
         weatherList:[]
     },
     methods: {
         searchWeather:function(){
            //  console.log('天气查询');
            //  console.log(this.city);
            // 调用接口
            // 保存this
            var that = this;
            axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
            .then(function(response){
                // console.log(response);
                console.log(response.data.data.forecast);
                that.weatherList = response.data.data.forecast
            })
            .catch(function(err){})
         }
     },
 })
    </script>
</body>

</html>
没有了

已是最新文章

没有了

已是最早文章

返回顶部