Vue.js学习

是小爱呀

于 2023-04-18 18:19:54 发布

阅读量119

点赞数

分类专栏： Web端学习文章标签： vue.js vscode

本文链接：https://blog.csdn.net/weixin_51465537/article/details/130128891

版权

Web端学习专栏收录该内容

16 篇文章 3 订阅

订阅专栏

前言

这里记录的是有关vue基础知识的学习。主要包括vue的基础知识、本地应用学习、网络应用的学习，以及综合应用的学习。学习视频参考的是：黑马程序员vue前端基础教程-4个小时带你快速入门vue的学习教程。

一、Vue基础知识

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>Vue基础</title>

</head>

<body>

</body>

</html>

引入 Vue：

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

vue官网地址：https://cn.vuejs.org/

2. el:挂载点

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

3. data:数据对象

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

代码如下：

<!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基础</title>

    <style>

        .active{

            border: 1px solid red;

        }

    </style>

</head>

<body>
        

    <!-- 2.html结构 -->

    <!-- <div id ="app" class="app"> -->

    <!-- el:挂载点 -->

    <!--

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

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

        可以使用其他的选择器,但是建议使用ID选择器

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

     -->

     <!-- data:数据对象 -->

     <!--

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

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

        渲染复杂类型数据时,遵守js的语法即可

      -->

    <div id ="app">

        {{ message }}

        <!-- <span>{{ message }}</span> -->

        <h3>{{school.name}} {{school.mobile}}</h3>

        <ul>

            <li>{{campus[0]}}</li>

            <li>{{campus[1]}}</li>

            <li>{{campus[2]}}</li>

        </ul>

    </div>

        

    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->

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


        

    <!-- 3.创建vue示例 -->

    <!-- vscode注释的快捷键：“Ctrl + /”和“Alt+Shift+A”。  -->

    <!-- <script>

        var app = new Vue({

            //对应的是id选择器

            el:'#app',  

            //对应的是class选择器

            //el:".app",  

            el:"div",

            data:{

                message:"Hello el!"

            }

        })  

    </script> -->

    <script>

        var app = new Vue({

            el:"#app",

            data:{

                message:"你好呀",

                school:{

                    name: "是小愛呀",

                    mobile:"134343434343"

                },

                campus:["北京","上海","深圳"]

            }

        })

 </script>

</body>

</html>

二、本地应用

1. v-text指令

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

代码如下：

<div id ="vText">

        <h3 v-text="message+'!!!'">上海</h3>

        <h3 v-text="info+'!!!'">上海</h3>

        <h3>{{message +'!!!'}}上海</h3>
</div>

<scpirt>
    var vText = new Vue({
            el:"#vText",
            data:{
                message:"是小愛呀",
                info:"前端与移动教研部"
            }
        })
</script>

2. v-html指令

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

代码如下：

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

        var vHtml = new Vue({
            el:"#vHtml",
            data:{
                //content:"是小愛呀"
                content:"<a href='http://www.itheima.com'>是小愛呀</a>"
            }
        })

3. v-on指令

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

代码如下：

    <div id ="vOn">
        <input type="button" value="v-on指令" v-on:click="doIt"/>
        <input type="button" value="v-on简写" @click="doIt"/>
        <input type="button" value="双击事件" @dblclick ="doIt"/>
        <h3 @click="changeFood">{{food}}</h3>
    </div>

        var vOn = new Vue({
            el:"#vOn",
            data:{
                food:"麻辣小龙虾"
            },
            methods:{
                doIt:function(){
                    alert("做it");
                },
                changeFood:function(){
                    //console.log(this.food);
                    this.food +="好好吃！"
                }
            }
        })

v-on补充：

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

代码如下：

    <div id ="vOn2">
        <input type="button" value="点击" @click="doIt2(666,'老铁')"/>
        <input type="text" @keyup.enter="sayHi"/>
    </div>

        var vOn2 = new Vue({
            el:"#vOn2",
            methods:{
                doIt2:function(p1,p2){
                    console.log("做it");
                    console.log(p1);
                    console.log(p2);
                },
                sayHi:function(){
                    alert("你好呀");
                }
            }
        })

4. v-show指令

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

代码如下：

    <div id ="vShow">
        <input type="button" value="切换显示状态" @click="changeIsShow"/>
        <input type="button" value="增加年龄" @click="addAge"/>
        <img v-show="isShow" src="./images/bear.jpeg" alt="">
        <img v-show="age>=18" src="./images/bear.jpeg" alt="">
    </div>

        var vShow = new Vue({
            el:"#vShow",
            data:{
                isShow:false,
                age:17
            },
            methods:{
                changeIsShow:function(){
                    this.isShow = !this.isShow;
                },
                addAge:function(){
                    this.age++;
                }
            }
        })

5. v-if指令

v-if指令的作用是：根据表达式的真假切换元素的显示状态
本质：通过操纵dom元素来切换显示状态
区别：使用v-if控制的是dom树，添加或者移除，使用v-show控制的是样式的增加或去除；
用法：在频繁的操作的时候使用v-show

代码如下：

    <div id ="vIf">
        <input type="button" value="切换显示" @click="toggleIsShow"/>
        <p v-if="isShow">我是可以隐藏的</p>
        <p v-show="isShow">我是可以隐藏的 v-show修饰</p>
        <h3 v-if="temperature>=35">热死啦</h3>
    </div>

        var vIf = new Vue({
            el:"#vIf",
            data:{
                isShow:false,
                temperature:40
            },
            methods:{
                toggleIsShow:function(){
                    this.isShow = !this.isShow;
                }
            }
        })

6. v-bind指令

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

代码如下：

    <div id ="vBind">
        <img v-bind:src="imageSrc" alt="">
        <br>
        <img :src="imageSrc" alt="" :title="imageTitle +'!!!'" :class="isActive?'active':''" @click="toggleIsActive">
        <img :src="imageSrc" alt="" :title="imageTitle +'!!!'" :class="{active:isActive}" @click="toggleIsActive">
    </div>

        var vBind = new Vue({
            el:"#vBind",
            data:{
                imageSrc:"http://www.itheima.com/images/logo.png",
                imageTitle:"图片上悬浮显示文字",
                isActive:false
            },
            methods:{
                toggleIsActive:function(){
                    this.isActive = !this.isActive
                }
            }
        })

7. v-for指令

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

代码如下：

    <div id ="vFor">
        <ul>
            <li v-for="item in arr">
                是小愛呀----{{item}}
            </li>
            <br>
            <li v-for="(item,index) in arr">
                {{index+1 }}  是小愛呀----  {{item}}
            </li>
            <br>
            <h3 v-for="item in vegetables" v-bind:title="item.name">
                {{item.name}}
            </h3>
        </ul>
        <input type="button" value="添加数据" @click="add"/>
        <input type="button" value="删除数据" @click="remove"/>
    </div>

        var vFor = new Vue({
            el:"#vFor",
            data:{
                arr:["北京","上海","广州","深圳"],
                vegetables:[
                    {name:"麻辣小龙虾"},
                    {name:"番茄牛腩"}
                ]
            },
            methods:{
                add:function(){
                    this.vegetables.push({name:"生煎"});
                },
                remove:function(){
                    this.vegetables.shift();
                }
            }
        })

8. v-model指令

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

代码如下：

    <div id ="vModel">
        <input type="button" value="修改内容" @click="setMessage"/>
        <input type="text" v-model="message" @keyup.enter="getMessage"/>
        <h3>{{message}}</h3>
    </div>

        var vModel = new Vue({
            el:"#vModel",
            data:{
                message:"是小愛呀"
            },
            methods:{
                getMessage:function(){
                    alert(this.message);
                },
                setMessage:function(){
                    this.message = "学习中......";
                }
            }
        })

9. 计数器功能区域

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

代码如下：

    <div id ="counter">
        <div class="input-num">
            <button @click ="sub">
                -
            </button>
            <span> {{num}} </span>
            <button @click="add">
                +
            </button>
        </div>
    </div>

        var counter = new Vue({
            el:"#counter",
            data:{
                num:0
            },
            methods:{
                add:function(){
                    // console.log('add');
                    if(this.num < 10){
                        this.num ++;
                    }else{
                        alert('别点啦，最大啦！')
                    }
                    
                },
                sub:function(){
                    // console.log('sub')
                    if(this.num>0){
                        this.num --;
                    }else{
                        alert('别点啦，最小啦！')
                    }
                    
                }
            }
        })

10. 图片切换

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

代码如下：

    <div id ="mask">
        <div class="center">
            <h2 class="title">
                <img src="./images/logo.png" alt="">
                图片切换
            </h2>
            <!-- 图片 -->
            <img :src="imgarr[index]" alt="">
            <!-- 左箭头 -->
            <a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left">
                <img src="./images/prev.png" alt="">
            </a>
            <!-- 右箭头 -->
            <a href="javascript:void(0)" v-show="index<imgarr.length-1" @click="next" class="right">
                <img src="./images/next.png" alt="">
            </a>
        </div> 
    </div>

        var mask = new Vue({
            el:"#mask",
            data:{
                imgarr:[
                    "./images/bear.jpeg",
                    "./images/house.jpeg",
                    "./images/our.jpeg",
                    "./images/pig.webp",
                    "./images/road.jpeg",
                ],
                index:0
            },
            methods:{
                prev:function(){
                    this.index --;
                },
                next:function(){
                    this.index ++;
                }
            }
        })

11. 記事本

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

代码如下：

    <!-- 主体区域 -->
    <section id="todoapp">
        <!-- 输入框 -->
        <header class="header">
            <h1>记事本</h1>
            <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" calss="new-todo"/>
        </header>
        <!-- 列表区域 -->
        <section class="main">
            <ul calss="todo-list">
                <li class="todo" v-for="(item,index) in list">
                    <div calss="view">
                        <span calss="index">{{index+1}}.</span>
                        <label>{{item}}</label>
                        <button calss="destory" @click="remove(index)"></button>
                    </div>
                </li>
            </ul>
        </section>
        <!-- 统计和清空 -->
        <footer calss="fotter">
            <span calss="todo-count" v-if="list.length!=0">
                <strong>{{ list.length }}</strong>items left
            </span>
            <button calss="clear-completed" @click="clear" v-show="list.length!=0">Clear</button>
        </footer>
    </section>

        var todoapp = 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);
                },
                clear:function(){
                    this.list=[];
                }
            }
        })

三、网络应用

1. axios基础

引入axios ：

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

代码如下：

    <script>
        /*
            接口1:随机笑话
            请求地址:https://autumnfish.cn/api/joke/list
            请求方法:get
            请求参数:num(笑话条数,数字)
            响应内容:随机笑话
        */
        document.querySelector(".get").onclick = function () {
            axios.get("https://autumnfish.cn/api/joke/list?num=6")
            // axios.get("https://autumnfish.cn/api/joke/list1234?num=6")
            .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:"盐焗西兰花"})
            .then(function(response){
                console.log(response);
                console.log(this.skill);
            },function (err) {
                console.log(err);
              })
          }

    </script>

2.axios+vue

引入axios和vue：

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



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

代码如下：

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                joke:"很好笑的笑话"
            },
            methods:{
                getJoke:function(){
                    //console.log(this.joke)
                    var that = this;
                    axios.get("https://autumnfish.cn/api/joke").then(function(response){
                        // console.log(response)
                        console.log(response.data);
                        // console.log(this.joke);
                        that.joke = response.data;
                    },function(err){})
                }
            }
        })
    </script>