Vue快速入门

午觉千万别睡过

已于 2022-03-24 22:21:03 修改

阅读量586

点赞数 1

分类专栏： Vue 文章标签： vue.js

于 2022-03-22 21:47:06 首次发布

本文链接：https://blog.csdn.net/ailaohuyou211/article/details/123672605

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue

安装：

直接用

css中#号是id选择器，.是类选择器，标签选择器即根据标签eg:div

el-挂载点

<div id="app">
   {{message}}
</div>

 var app =new Vue({
            el:"#app",
            data:{
                message:"你好 小黑!"
            }
        })

vue中message的内容会替换div中message的内容（同名）

Vue实例的作用范围是什么呢?

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

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

是否可以设置其他的dom元素呢?
可以使用其他的双标签,不能使用HTML和BODY

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>Document</title>
</head>
<body>
    <div id="app">
        {{message}}
        <h2>{{ school.name }}{{school.mobile}}</h2>
        <ul>
            <li>{{campus[0]}}</li>
            <li>{{campus[3]}}</li>
        </ul>
    </div>
      <!-- 开发环境版本，包含了有帮助的命令行警告 -->
      <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
      <script>
          var app = new Vue({
              el:"#app",
              data:{
                  message:"你好 小黑！",
                  school:{
                      name:"黑马程序员",
                      mobile:"400-618-9090"
                  },
                  campus:["北京校区","上海校区","广州校区","深圳校区"]
              }
          })
      </script>
</body>
</html>

v-text指令：设置标签的文本值（textContent）

<!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>Document</title>
</head>
<body>
    <div id="app">
        <!-- v-text指令 会覆盖标签内所有的指令 -->
        <h2 v-text="message+'!'">深圳</h2>
        <h2 v-text="info">深圳</h2>
        <h2>深圳{{message+"!"}}深圳</h2>
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script>
        var app = new Vue({ 
            el:"#app",
            data:{
                message:"黑马程序员",
                info:"前端与移动教研部"
            }
        })
    </script>

</body>
</html>

v-text指令的作用是:设置标签的内容(textContent)

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

内部支持写表达式

v-html

设置标签的innerHTML

<!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>Document</title>
</head>
<body>
    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                // content:"黑马程序员"
                content:"<a href='http://www.itheima.com'>黑马程序员</a>"
            }
        })
    </script>
</body>
</html>

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

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

v-on指令

为元素绑定事件 @可以替换v-on

   <div id="app">
        <input type="button" value="事件绑定" v-on:事件名="方法">
    </div>

   <script>
        var app =new Vue({
            el:"#app",
        })
    </script>

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

    <script>
        var app =new Vue({
            el:"#app",
            methods:{
                dolt:function(){
                    // 逻辑
                }
            }
        })
    </script>

<!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>Document</title>
</head>
<body>
    
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="dolt">
        <input type="button" value="v-on简写" @click="dolt">
        <input type="button" value="双击事件" @dblclick="dolt">
        <h2 @click="changeFood">{{ food }}</h2>
    </div>

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

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                food:"西南花炒蛋"
            },
            methods:{
                dolt:function(){
                    // 逻辑
                    alert("做IT");
                },
                changeFood:function(){
                console.log(this.food);
                this.food+="好好吃！"
                }
        },
        })
    </script>

</body>
</html>

v-on指令的作用是:为元素绑定事件

事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中

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

计数器

var app = new Vue({
        el:"#app",
        data:{
            num:1
        },
        methods{
            add:function(){},
            sub:function(){}
        }
    });

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

data定义数据:比如num
methods中添加两个方法：比如add{递增},sub{递减}
使用v-text将num设置给span标签
使用v-on将add,sub分别绑定给+，-按钮
累加的逻辑:小于10累加，否则提示
递减的逻辑:大于0递减，否则提示

创建Vue示例时:el(挂载点),data(数据),methods(方法)

v-on指令的作用是绑定事件,简写为@

方法中通过this,关键字获取data中的数据

v-text指令的作用是:设置元素的文本值,简写为{份

v-show指令：

根据表达值得真假，切换元素得显示和隐藏

 <div id="app">
        <img src="地址" v-show="true">
        <img src="地址" v-show="isShow">
        <img src="地址" v-show="age>=18">
    </div>


    var app = new Vue({
        el:"#app",
        data:{
            isShow:false,
            age:16
        }
    })

<!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>Document</title>
</head>
<body>
    <div id="app">
        <input type="button" value="切换屏显示状态" @click="changeIsShow">
        <img src="https" v-show="isShow">
    </div>

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

</body>
</html>

v-if指令:

更具2表达式的真假，切换元素的显示和隐藏（操作dom元素）

   <div id="app">
        <p v-if="true">我是一个p标签</p>
        <p v-if="isShow">我是一个p标签</p>
        <p v-if="表达式">我是一个p标签</p>
    </div>

    var app = new Vue({
        el:"#app",
        data:{
            isShow:false
        }
    })

<!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>Document</title>
</head>
<body>
    
    <div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isShow">黑马程序员</p>
        <p v-show="isShow">黑马程序员 - v-show修饰</p>
        <h2 v-if="temperature>=35">热死啦</h2>
    </div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            isShow:false,
            temperature:40
        },
        methods:{
            toggleIsShow:function(){
                this.isShow = !this.isShow;
            }
        }, 
    })
</script>

</body>
</html>

v-if指令的作用是:根据表达式的真假切换元素的显示状态

本质是通过操纵dom元素来切换显示状态

表达式的值为true,元素存在于dom树中,为false,从dom树中移除

频繁的切换v-show,反之使用v-if,前者的切换消耗小

v-bind属性：

设置元素的属性（比如:src,title,class）

 <div id="app">
        <img v-bind:src="imgSrc">
        <img v-bind:title="imgtitle+'!!!">
        <img v-bind:class="isActive?'active":"">
        <img v-bind:class="{active:isActive}">
    </div>      # 可以省去v-bind  只留一个
 var app = new Vue({
         el:"#app",
         data:{
             imgSrc:"图片地址",
             imgTitle:"黑马程序员",
             isActive: false
         }
     })

<!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>Document</title>
    <style>
        .active{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    
    <div id="app">
        <img v-bind:src="imgSrc">
        <br>
        <img :src="imgSrc" alt="" :title="imgtitle+'!!!" 
        :class="isActive?'actice:':''" @click="toggleActive">
        <br>
        <img :src="imgSrc" alt="" :title="imgtitle+'!!!" 
        :class="{active:isActive}" @click="toggleActive">

    </div>
 <!-- 开发环境版本，包含了有帮助的命令行警告 -->
 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
 <script>
     var app = new Vue({
         el:"#app",
         data:{
             imgSrc:"https://image.so.com/i?q=%E8%A1%A8%E6%83%85%E5%8C%85&listsrc=sobox&listsign=c5a6c2b0b02f61f391b692751447cb3e&src=360pic_new_strong",
             imgTitle:"黑马程序员",
             isActive: false
         },
         methods:{
            toggleActive:function(){
                this.isActive = !this.isActive;
            }
         },
     })
 </script>


</body>
</html>

v-bind指令的作用是:为元素绑定属性

完整写法是v-bind:属性名

简写的话可以直接省略v-bind,只保留:属性名

v-fot指令

根据数据生成列表结构

    <div id = "app">
        <ul>
            <li v-for="(item,index) in arr" :title="item">
                {{index}}{{item}}
            </li>
            <li v-for="(item.index) in objArr">
                {{item.name}}
            </li>
        </ul>
    </div>
    
      var app = new Vue({
            el:"#app",
            data:{
                arr:[1,2,3,4,5],
                objArr:[
                    {name:"jack"},
                    {name:"rose"}
                ]
            }
        })

<!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>Document</title>
</head>
<body>
    
    <div id = "app">

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

        <ul>
            <li v-for="(it,index) in arr" >
               {{index+1}} 黑马程序员校区: {{it}}
            </li>
        </ul>
        <h2 v-for="cai in vegetables" v-bind:title="cai.name">
            今天吃什么：{{cai.name}}
        </h2>
    </div>
 <!-- 开发环境版本，包含了有帮助的命令行警告 -->
 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
               arr:["北京","上海","广州","深圳"],
               vegetables:[
                   {name:"蛋炒西南花"},
                   {name:"西南花炒蛋"}
               ]
            },
            methods:{
                add:function(){
                    this.vegetables.push({name:"花菜炒蛋"});
                },
                remove:function(){
                    this.vegetables.shift();
                }
            }
        })
    </script>
</body>
</html>

v-for指令的作用是:根据数据生成列表结构

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

语法是( item,index ) in数据

item和index可以结合其他指令一起使用

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

v-on补充

传递自定义参数，事件修饰符

 <div id="app">
        <input type="button" @click="dolt(p1,p2)">
        <input type="text" @keyup.enter="sayHi">
    </div>
 var app = new Vue({
            el:"#app",
            methods:{
                dolt:function(p1,p2){},
                sayHi:function(){}
            }
        })

<!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>Document</title>
</head>
<body>
    <div id="app">
        <input type="button" @click="dolt(666,'老铁')" value="点击">
        <input type="text" @keyup.enter="sayHi">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script>
        var app = new Vue({
            el:"#app",
            methods:{
                dolt:function(p1,p2){
                    console.log("做it");
                    console.log(p1);
                    console.log(p2)
                },
                sayHiLfunction(){
                    alert("吃饭了没");
                }
            },
        })
    </script>

</body>
</html>

事件绑定的方法写成函数调用的形式，可以传入自定义参数

定义方法时需要定义形参来接收传入的实参

事件的后面跟上.修饰符可以对事件进行限制

.enter 可以限制触发的按键为回车

事件修饰符有多种

v-model指令

在这里插入图片描述

获取和设置表单元素的值（双向数据绑定:你更改两边数据的任意一边，他都会对应更改对方表单里面的值）

<!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>Document</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@2.6.14"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"黑马程序员"
            },
            methods:{
                getM:function(){
                    alert(this.message)
                },
                setM:function(){
                    this.message="苦丁与";
                }
            }
        })
    </script>
</body>
</html>

v-model指令的作用是便捷的设置和获取表单元素的值

绑定的数据会和表单元素值相关联

绑定的数据一→表单元素的值

axios基本使用

功能强大的网络请求库:

axios.get(地址?key=value&key2=values).then(function(response)f,function(err)})

axios.post(地址, {key:value,key2:value2}).then(function(response)f,function(err))

<!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>Document</title>
</head>
<body>
    
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
    <!-- 官网提供的axios地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        document.querySelector(".get").onclick = function(){
            axios.get("https://autumnfish.cn/api/joke/list?num=6")
            .then(function(response){
                console.log(response);
            },function(err){
                console.log(err);
            }
            )

            document.querySelect(".post").onclick = function(){
                axios.post("https://autumnfish.cn/api/user/reg",
                {username:"jack"})
                .then(function(response){
                    console.log(response);
                })
            }
        }
    </script>

</body>
</html>

axios必须先导入才可以使用

使用get或post方法即可发送对应的请求

then方法中的回调函数会在请求成功或失败时触发

通过回调函数的形参可以获取响应内容,或错误信息

axios+vue

axios如何结合vue开发网络应用

<!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>Document</title>
</head>
<body>
    
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p>{{joke}}</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>
        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.data);
                        // console.log(this.joke);
                        that.joke = reponse.data;
                    },function(err){  })
                }
            }
        })
    </script>

</body>
</html>