Vue

最新推荐文章于 2022-08-19 16:24:09 发布

Jerry&Crj

最新推荐文章于 2022-08-19 16:24:09 发布

阅读量69

点赞数

文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/weixin_42348733/article/details/115919691

版权

文章目录

Vue

一、简介

JS框架
简化Dom操作
响应式数据驱动

二、第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--开发环境版本-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="dm">
    {{msg}}
</div>
<script>
    let dm = new Vue({
        el:"#dm",
        data:{
            msg:"你好"
        }
    })
</script>
</body>
</html>

1.`el`：挂载点

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

2.`data`：数据对象

获取对象、数组等数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--开发环境版本-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="dm">
    {{msg}}
    <h2>
        {{school}}
<!--        { "name": "Tom", "age": 21 }-->
        {{school.name}}
<!--        Tom-->
        {{school.age}}
<!--        21-->
        {{arr[0]}}
<!--        1-->
    </h2>
</div>
<script>
    let dm = new Vue({
        el:"#dm",
        data:{
            msg:"你好,Jerry",
            school:{
                name:"Tom",
                age:21,
            },
            arr:["1","2","3"]
        }
    })
</script>
</body>
</html>

三、本地应用

1.概念

Vue指令指的是，以v-开头的一组特殊语法

2.指令

2.1 `v-text`:设置标签的文本值(textContent)

2.1.1 使用部分替换就使用两个大括号的写法

    <h2 v-text = "msg"Jerry></h2>
<!--    你好-->
    <h2 v-text = "msg"Jerry></h2>
    <!--    你好-->

    <!--    使用部分替换就使用两个大括号的写法-->
    <h2>{{msg}}Jerry</h2>
    <!--    你好Jerry -->

2.1.2 字符串拼接

    <h2 v-text = "msg+'!'"Jerry></h2>
    <!--    你好-->
    <h2 v-text = "msg+'!'"Jerry></h2>
    <!--    你好-->
    <!--    使用部分替换就使用两个大括号的写法-->
    <h2>{{msg + "!"}}Jerry</h2>
    <!--    你好Jerry -->

2.2 `v-html`:设置标签的innerHTML

前提：

innerHTML&innerText的区别

前者可以解析标签结构，后者只能识别文本
解析文本用v-text,解析html用v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
    <div id="dm">
<!--    Jerry    -->
        <p v-html="content"></p>
<!--    Jerry    -->
        <p v-text="content">

<!--    点我    -->
        <p v-html="con"></p>
<!--    <a href='http://www.baidu.com'>点我</a>    -->
        <p v-text="con"></p>


    </div>
    <script>
        let dm = new Vue({
            el:"#dm",
            data:{
                content:"Jerry",
                con:"<a href='http://www.baidu.com'>点我</a>"
            }
        })
    </script>
</body>

```

2.3 `v-on`：为元素绑定事件

2.3.1 注意

事件名不用写on
指令可以简写为@
需要在methods中书写
事件绑定的方法携程函数调用得形式，可以传入自定义参数

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>

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

<div id="app">
    <button  v-on:click="doIt">点我</button>
<!--    简写的写法-->
    <button @mouseover="doIt">简写</button>
    <button @dblclick="doIt">双击</button>

    <h2 @click="changeName">{{name}}</h2>
</div>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            name:"Jerry",
            age:11
        },
        methods:{
            doIt:function () {
                alert("doIt")
            },
            changeName:function () {
                console.log(this.name);
                this.name += "Tom"
                console.log(this.name)
            }
        }
    });

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button @click="clc(33,22)">点我</button>
    <input type="text" @keyup.enter="aa">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el:"#app",
        methods:{
            clc:function (a1,a2) {
                console.log("111");
                console.log(a1);
                console.log(a2);

            },
            aa:function () {
                alert("aa")
            }
        }
    })
</script>
</body>
</html>

2.4 案例-计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            margin: 100px auto;
            display: inline-block;
            text-align: center;
            line-height: 30px;
            width: 30px;
            height: 30px;
            color:black;
            text-decoration: none;
        }
        span{
            display: inline-block;
            width: 100px;
            text-align: center;

        }
    </style>
</head>
<body>
<div id="box">
    <a href="javascript:;" @click="pre_clc" id="pre">-</a>
    <span>{{ i }}</span>
    <a href="javascript:;" @click="beh_clc" id="beh">+</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    let app = new Vue({
        el:"#box",
        data:{
            i:0
        },
        methods: {
            pre_clc:function () {
                console.log("--")
                if(this.i-- == 0){
                    alert("0")
                }

            },
            beh_clc:function () {
                console.log("++")
                if(this.i++ >= 10){
                    alert("1")
                }
            }
        }

    })

</script>
</body>
</html>

2.4.1 总结

创建Vue示例时：el（挂载点）,data(数据),methods(方法)
v-on指令的作用时绑定事件，简写为@

3.指令

3.1 `v-show`:根据表达值得真假，切换元素得显示和隐藏

3.1.1 注意

原理是修改元素得display，实现显示隐藏
指令后面得内容，最终都会解析为布尔值
值为true元素显示，值为false元素隐藏
数据改变之后，对应元素得显示状态会同步更新
操纵得是style属性，从而消失与显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            width: 200px;
            height: 300px;
        }
    </style>
</head>
<body>
<div id="app">
    <img v-show="isShow" src="img/01.jpg" alt="">
    <img v-show="age<16" src="img/02.jpg" alt="">
    <input type="button" value="点我切换" @click="chageIsShow">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            isShow:true,
            age:15
        },
        methods:{
            chageIsShow:function () {
                this.isShow= !this.isShow;

            }
        }
    })
</script>
</body>
</html>

3.2 `v-if` 根据表达式得真机啊，切换元素得显示和隐藏（操作dom元素）

3.2.1 注意

v-if指令得作用是：根据表达式得真假切换元素得显示状态
本质是通过操纵dom元素来切换显示状态
表达式得值为true，元素存在于dom树中，为false,从dom树种移除
频繁切换用v-show(快),反之使用v-if,

3.3 `v-bind`：设置元素的属性

3.3.1 语法：

第一条为三元表达式；第二条为对象写法，推荐第二条

简写（推荐）

	<img src="img/02.jpg" :class="flag?'active':''" alt="" @click="isAct">
    <img src="img/02.jpg" :class="{active:flag}" alt="" @click="isAct">

完整写

	<img src="img/02.jpg" v-bind:class="flag?'active':''" alt="" @click="isAct">
    <img src="img/02.jpg" v-bind:class="{active:flag}" alt="" @click="isAct">

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            width: 200px;
            height: 200px;
        }
        .active{
            border: 1px solid red;
        }
    </style>
</head>
<body>

<div id="app">
    <img src="img/02.jpg" :class="flag?'active':''" alt="" @click="isAct">
    <img src="img/02.jpg" :class="{active:flag}" alt="" @click="isAct">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            flag:true
        },
        methods:{
            isAct:function () {
                this.flag = !this.flag;
            }
        }
    })
</script>
</body>
</html>

3.4 案例-图片切换

3.4.1 注意：

v-show和v-if都可以切换元素得显示状态，频繁切换用v-show

4.指令

4.1 `v-for`：根据数据生成列表结构

4.1.1 语法：

(item,index) in 数据名称

4.1.2 注意：

v-for指令得作用是：根据数据生成列表结构
数组长度得更新会同步到页面上，是响应式得

4.2 `v-model`:获取和设置表单元素得值（双向数据绑定）

4.2.1 特点：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button></button>
    <input type="text" v-model="name">
    <h2>{{name}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            name : "jerry"
        }
    })
</script>
</body>
</html>

5.综合案例

<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>小黑记事本</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>小黑记事本</h1>
      <input  autofocus="autofocus" v-model="doct" @keyup.enter="add" autocomplete="off" placeholder="请输入任务"
        class="new-todo" />
    </header>
    <!-- 列表区域 -->
    <section class="main">
      <ul  class="todo-list">
        <li v-for="(item,id) in arrList" class="todo" >
          <div class="view">
            <span class="index">{{id+1}}</span>
            <label >
              {{item}}
            </label>
            <button class="destroy" @click="remove(id)"></button>
          </div>
        </li>
      </ul>
    </section>
    <!-- 统计和清空 -->
    <footer class="footer" >
      <span class="todo-count"   v-for="(item,index) in arrList">
        <strong>{{arrList.length}}</strong> items left
      </span>
      <button class="clear-completed" @click="removeAll">
        Clear
      </button>
    </footer>
  </section>
  <!-- 底部 -->
  <footer class="info">
    <p>
      <a href="http://www.itheima.com/"><img src="./img/black.png" alt="" /></a>
    </p>
  </footer>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el:"#todoapp",
      data:{
        arrList:["Jerry","Tom","Jack"],
        doct:""
      },
      methods:{
        add:function () {
          this.arrList.push(this.doct)
          this.doct="";
        },
        remove:function (index) {
          console.log(index)
          this.arrList.splice(index,1);
        },
        removeAll:function () {
          this.arrList.splice(this);
        }
      }
    })

    let foot = new Vue({

    })

  </script>
</body>

</html>

四、网络应用

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

1. 注意：

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

2. 方法

    <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){})

3. 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
       <script src="https://unpkg.com/axios/dist/axios.min.js"></script>


    </head>
<body>
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<script>
    /*
        接口1：随机笑话
        请求地址：https://autumnfish.cn/api/joke/list
        请求方式:get
        请求参数：num（笑话条款，数字）
        响应内容：随机笑话
     */

    document.querySelector(".get").onclick = function () {
        axios.get("https://autumnfish.cn/api/joke/list?num3")
        .then(function (response) {
            console.log(response)
        },function (err) {
            console.log(err);
        })
    }

    /*
        接口2：用户注册
        请求地址：https://autumnfish.cn/api/user/reg
        请求方式:post
        请求参数：username（用户名，字符串）
        响应内容：注册成功或失败
    */
    document.querySelector(".post").onclick = function () {
        axios.post("https://autumnfish.cn/api/user/reg",{username:"jerry"})
        .then(function (response) {
            console.log(response)
        },function (err) {
            console.log(err)
        })
    }

</script>

</body>
</html>

4. `axios+vue`

4.1 注意

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

5. 案例-天知道

<!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" @keyup.enter="checkKey" v-model="city" class="input_txt" placeholder="请输入查询的天气"/>
        <button class="input_sub" >
          搜 索
        </button>
      </div>
      <div class="hotkey">
        <a href="javascript:;" @click="clc('北京')">北京</a>
        <a href="javascript:;" @click="clc('上海')">上海</a>
        <a href="javascript:;" @click="clc('广州')">广州</a>
        <a href="javascript:;" @click="clc('深圳')">深圳</a>
      </div>
    </div>
    <ul v-for="(item,index) in weatherList"  class="weather_list">
      <li v-for="(item,index) 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>
      </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 src="./js/main.js"></script>

</body>

</html>


let app = new Vue({
        el:"#app",
        data:{
            city:"",
            weatherList:[]

        },
        methods: {
            checkKey:function () {
                var that = this;
                axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
                    .then(function (response) {
                        // console.log(response.data.data.forecast);
                        that.weatherList = response.data.data.forecast
                        console.log(that.weatherList)
                    },function (err) {
                        console.log(err);
                    })

            },
            clc:function (city) {
                this.city = city;
                this.checkKey();

            },
        }
    })

    data:{
        city:"",
        weatherList:[]

    },
    methods: {
        checkKey:function () {
            var that = this;
            axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
                .then(function (response) {
                    // console.log(response.data.data.forecast);
                    that.weatherList = response.data.data.forecast
                    console.log(that.weatherList)
                },function (err) {
                    console.log(err);
                })

        },
        clc:function (city) {
            this.city = city;
            this.checkKey();

        },
    }
})

Jerry&Crj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue

文章目录Vue一、简介二、第一个Vue程序1.`el`：挂载点2.`data`：数据对象三、本地应用1.概念2.指令2.1 `v-text`:设置标签的文本值(textContent)2.1.1 使用部分替换就使用两个大括号的写法2.1.2 字符串拼接2.2 `v-html`:设置标签的innerHTML2.3 `v-on`：为元素绑定事件2.3.1 注意2.4 案例-计数器2.4.1 总结3.指令3.1 `v-show`:根据表达值得真假，切换元素得显示和隐藏3.1.1 注意3.2 `v-if` 根据表达
复制链接

扫一扫